webservice结合dthml的简单例子（二，dhtml)

dhtml|web

  客户端之所以使用dhtml，主要是为了实现remote,简单地说就是要达到无刷新的效果。

文件：study.htm

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
    <HEAD>
        <TITLE></TITLE>
        <META NAME="GENERATOR" Content="Microsoft Visual Studio 7.0">
    </HEAD>
    <script language="jscript">
     var oTblMain ;                //主要的表格
     var strHtml = "" ;            //临时用全局变量
     var bSaveStatus = true ;    //保存是否成功
     var iCallId ;                //调用webservice的唯一号
     
      //通过webservice取得所有items
      //然后通过回调函数OnGetItems格式化输出
      function GetItems()
      {
        //调用webservice的GetItems方法
        service.myService.callService(OnGetItems , "GetItems") ;
      }
      
      //webservice的回调函数
      function OnGetItems(result)
      {
        if(result.error)
        {
            alert(result.errorDetail.code + ":" + result.errorDetail.string ) ;
            return ;
        }
        
        bbXML.loadXML(result.raw.xml);
        var sXML = bbXML.transformNode(bbXSL.XMLDocument);
        if (bbXML.parseError.reason == "")
        {
            strHtml = sXML;
        }
        else
        {
            strHtml = bbXML.parseError.reason;
        }
    
      }
     
     //页面的初始化
     function OnLoad()
     {
        //为使用webservice做准备
        service.useService("study.asmx?WSDL" , "myService") ;

        //定义纪录表格对象
        oTblMain = document.getElementById("tblMain") ;
     }
     
     //添加一个新纪录
     //作用是给表格添加一个新行，并定义3个td的style , event
     function OnAdd()
     {
        var row = oTblMain.insertRow() ;
        row.bgColor = "#ffffff" ;
        var cellID = row.insertCell() ;
        cellID.innerHTML = oTblMain.rows.length - 1 ;
        cellID.onclick = function(){OnIDClick(this);} ;
        cellID.style.cursor = "hand" ;
        cellID.title = "选定纪录" ;
        var cellItem = row.insertCell() ;
        cellItem.style.cursor = "crosshair" ;
        cellItem.onclick = function(){OnItemClick(this);} ;
        var cellDemo = row.insertCell() ;
        cellDemo.style.cursor = "help" ;
        cellDemo.onclick = function(){OnDemoClick(this);} ;
     }
     
     //td item的点击事件
     //作用是弹出一个层，然后通过GetItems方法取得所有的items
     //格式化后作为这个新层的innerHTML
     function OnItemClick(cell)
     {
        GetItems() ;

        var oDiv = document.createElement("Div") ;
        oDiv.zIndex = "1" ;
        oDiv.style.position = "absolute";
        oDiv.style.height = "200" ;
        oDiv.style.width = "300" ;
        oDiv.style.left = cell.style.left ;
        oDiv.style.top = cell.style.top ;
        oDiv.style.backgroundColor = "#99eeff" ;
        oDiv.style.border = '0.1cm groove blue' ;
        oDiv.style.overflow = "auto" ;
        
        oDiv.innerHTML = strHtml ;
        //document.body.appendChild(oDiv);
        cell.appendChild(oDiv) ;
     }
     
     //td item的选择事件
     function OnItemSelected(cell)
     {
        var oTr = cell.parentElement ;
        var oTable = oTr.parentElement ;
        var oTbody = oTable.parentElement ;
        var oDiv = oTbody.parentElement ;
        oDiv.style.display = "none" ;
        var oCell = oDiv.parentElement ;
        oCell.removeChild(oDiv) ;
        oCell.innerText = cell.innerText ;
        
        oDiv = null ;
        
     }
     
     //选定纪录
     function OnIDClick(cell)
     {
        var tr = cell.parentElement ;
        if(tr.bgColor == "#99ccff")
        {
            tr.bgColor = "#ffffff" ;
        }
        else
        {
            for(var i = 0 ; i < oTblMain.rows.length ; i ++)
            {
                oTblMain.rows[i].bgColor = "#ffffff" ;
                oTblMain.rows[i].cells[0].title = "选定纪录" ;
            }
            tr.bgColor = "#99ccff" ;
            cell.title = "取消选定" ;
        }
     }
     
     //删除按钮的点击事件
     //删除用户选定的行，并重新给行编号
     function OnDelete()
     {
        var i = GetSelectedIndex() ;
        if( i == 0)
        {
            alert("没有选择要删除的纪录!") ;
            return false ;
        }
        else
        {
            oTblMain.deleteRow(i) ;
            for(var j = 1 ; j < oTblMain.rows.length ; j ++)
            {
                oTblMain.rows[j].cells[0].innerText = j ;
            }
        }
        
     }
     
     //取得用户选定那一行
     function GetSelectedIndex()
     {
        for(var i = 0 ; i < oTblMain.rows.length ; i ++)
        {
            if(oTblMain.rows[i].bgColor == "#99ccff")
            {
                return i ;
            }
        }
        return 0 ;
     }
     
     //表格中demo td的点击时间
     //作用是弹出模式化窗口，用户输入多个值
     function OnDemoClick(cell)
     {
       //alert(cell.innerText) ;
       var oDemo = window.showModalDialog("demo.htm",cell.innerText , "dialogwidth:200px;dialogheight:200px;resizeable:no;status:no;scroll:no") ;  
       if(oDemo != undefined)
       {
         cell.innerText = oDemo.Name + "-" + oDemo.Amount ;
        }
     }
     
     //保存按钮的点击方法
     //现在的做法是调用webservice依次保存每条纪录，
     //然后通过回调函数OnSaveRecords(result)将已保存的纪录清除
     function OnSave()
     {
        if(oTblMain.rows.length < 2)
        {
          alert("没有记录可保存！") ;
          return false ;
        }
        
        for(var i = 1 ; i < oTblMain.rows.length  && bSaveStatus ; i ++)
        {
            var strItemName ;
            var strDemoName  ;
            var intDemoAmount ;

            strItemName = oTblMain.rows[i].cells[1].innerText ;

            var arr = oTblMain.rows[i].cells[2].innerText.split("-") ;
            if(arr.length != 2)
            {
                alert("每条纪录都要填") ;
                return false ;
            }
            else
            {
                strDemoName = arr[0] ;
                intDemoAmount = arr[1] ;
                //alert(strItemName + "," + strDemoName + "," + intDemoAmount) ;
                window.status = "" ;
                iCallId = service.myService.callService(OnSaveRecords , "SaveRecord" , strItemName , strDemoName , parseInt(intDemoAmount , 10)) ;
                window.status = "正在保存第" + i + "条纪录……" ;
        }
            
            
        }
        
        
     }
     
     //保存纪录
     function OnSaveRecords(result)
     {
        if(result.error)
        {
            alert(result.errorDetail.code + ":" + result.errorDetail.string ) ;
            bSaveStatus = false ;
            return ;
        }
        else
        {
           
            if(result.value)
            {
                window.status = window.status + "成功！" ;
                oTblMain.deleteRow(1) ;
            }
            else
            {
                bSaveStatus = false ;
                alert("由于未知原因保存失败！") ;
                window.status = window.status + "失败！终止保存！" ;
            }
        }

     }
     
     
    </script>
    <BODY onload="OnLoad();">
        <div id="service" style="behavior:url(webservice.htc)">
            <xml id="bbXML"></xml>
            <xml id="bbXSL" src="item1.xsl"></xml>
            <br>
            <h3 align="center">WebService示例</h3>
            <br>
            <br>
            <table width="600" align="center" id="tblMain" bgcolor="#000000" cellspacing="1">
                <tr bgcolor="#ffffff">
                    <td width="50">编号</td>
                    <td width="200">Item</td>
                    <td>Demo</td>
                </tr>
            </table>
            <p align="center">
                <input type="button" value="增加" onclick="OnAdd()">   <input type="button" value="删除" onclick="OnDelete()">
                  <input type="button" value="保存" onclick="OnSave()">
            </p>
    </BODY>
</HTML>

上面这个htm是通过微软的webservice.htc来对webservice进行soap访问，他封装得很好，我们要做的工作就是把传递回来的xml进行解析，我是用xsl进行解析的，下面是这个文件内容

文件 item1.xsl
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema">
    <xsl:output method="html"/>
    <xsl:template match="/">
        <xsl:apply-templates select="//soap:Body"/>
    </xsl:template>
    <xsl:template match="soap:Body">
        <xsl:apply-templates select="*[local-name() = 'GetItemsResponse']/*[local-name() = 'GetItemsResult']"/>
    </xsl:template>
    <xsl:template match="*[local-name() = 'GetItemsResult']">
        <html>
            <body>
                <table border="1">
                    <tr>
                        <th>name</th>
                        <th>value</th>
                    </tr>
                    <xsl:for-each select="*[local-name() = 'anyType' and @xsi:type='Item']">
                        <xsl:apply-templates select="."/>
                    </xsl:for-each>
                </table>
            </body>
        </html>
    </xsl:template>
    <xsl:template match="*[local-name() = 'anyType' and @xsi:type='Item']">
        <tr>
            <td style="cursor:hand" onclick="OnItemSelected(this);">
                <xsl:text disable-output-escaping="yes"> </xsl:text>
                <xsl:value-of select="*[local-name() = 'Name']"/>
            </td>
            <td>
                <xsl:text disable-output-escaping="yes"> </xsl:text>
                <xsl:value-of select="*[local-name() = 'Value']"/>
            </td>
        </tr>
    </xsl:template>
</xsl:stylesheet>

上述例子很简单，主要难度在于那些dhtml。但如果你把它扩展一下，可以完成很多以前必须用activex才能实现的功能。

时间： 2024-11-30 06:59:37

webservice结合dthml的简单例子（二，dhtml)的相关文章

那位高手有WebService能跑起来的例子

问题描述 那位高手有WebService能跑起来的例子 刚刚接触这个 那位仁兄 有能跑起来的 代码 给我参考下 谢谢啦 解决方案 请看看这篇博文,有什么不明白的可以问我.http://jadethao.iteye.com/blog/1706963希望你能自己动手完成.毕竟自己弄出来能学到很多东西,还能有成就感.若正想要现成的,我这有!解决方案二:一分钟速成webservice,http://java-frog.iteye.com/admin/blogs/808412解决方案三:现在人们提到web

akka 简单例子总是 not delivered和dead letters encountered

问题描述 akka 简单例子总是 not delivered和dead letters encountered package spark;import akka.actor.{ Actor Props ActorSystem ExtendedActorSystem }import com.typesafe.config.ConfigFactoryimport akka.remote._object MyApp extends App { val actorSystem1 = ActorSyst

最简单例子图解JVM内存分配和回收

原文链接:最简单例子图解JVM内存分配和回收 一.简介 JVM采用分代垃圾回收.在JVM的内存空间中把堆空间分为年老代和年轻代.将大量(据说是90%以上)创建了没多久就会消亡的对象存储在年轻代,而年老代中存放生命周期长久的实例对象.年轻代中又被分为Eden区(圣经中的伊甸园).和两个Survivor区.新的对象分配是首先放在Eden区,Survivor区作为Eden区和Old区的缓冲,在Survivor区的对象经历若干次收集仍然存活的,就会被转移到年老区.   简单讲,就是生命期短的对象放在一起

filenamefilter-关于FilenameFilter的一个简单例子，但总是有空指针异常，哪位大侠帮忙看看吧

问题描述 关于FilenameFilter的一个简单例子,但总是有空指针异常,哪位大侠帮忙看看吧 public class Demo { public static void main(String[] args) { File dir=new File("D:\test"); JavaTest filter=new JavaTest("java"); File[] files=dir.listFiles(filter); for(File a:files){ Sy

chrome-ajax简单例子中的错误

问题描述 ajax简单例子中的错误 写了一个非常简单的ajax实例,但在chrome调试时报一下错误: 为什么 .ajax前面的$符号不见了. 这是我的代码: 解决方案 问题解决了,原来是jquery中的$关键字和这里的$冲突了.把$.ajax改成jQuery.ajax就可以了(先引入jquery.js) 解决方案二: 上面少了个}..... 解决方案三: c#.net下简单的Ajax例子$.ajax 的简单小例子AJAX的简单例子 解决方案四: 应该把它写在一个函数里头的 然后直接调用就行了

JQuery Ajax WebService传递参数的简单实例_jquery

Asp.NET中利用jQuery实现Ajax时,在服务器端可以使用aspx,ashx,以及WebService等方式.最近研究了一下WebService方式,jQuery Ajax 方法调用 jQuery Ajax方法调用 Asp.Net WebService 的详细实例代码这篇帖子给出了很详细的例子,不过没有给出详细解释.其中有几个细节问题开始没注意,费老劲才调通: 1)客户端data数据中的key字段名称必须和服务器端方法参数严格一致. 如客户端: //有参数调用 $(document).r

编码-请教下关于springmvc简单例子出错问题

问题描述 请教下关于springmvc简单例子出错问题 警告: No mapping found for HTTP request with URI [/springmvc4/test1/helloworld] in DispatcherServlet with name 'springmvc' 运行后一直报错. 我贴下代码 各位帮我看下 web配置: <?xml version="1.0" encoding="UTF-8"?> springMVC1 i

有没有开源的双核浏览器或者有个制作双核浏览器的简单例子？

问题描述 有没有开源的双核浏览器或者有个制作双核浏览器的简单例子? 如题所示,想对这个了解,然后捣鼓下 网上没有搜索到开源的的,也没有找到个简单的例子入门,求解 解决方案 说白了,就是在你的程序中同时集成webkit和webbrowser,不知道你用的是什么语言,如果是C++,webrowser自不用说,webkit参考这个http://download.csdn.net/detail/gaozan198912/5054818 解决方案二: 国产所谓的"极速"."X核&quo

寻个html:cancel的简单例子

问题描述 刚刚学的html:cancel标签,按照书中的做法,在页面中写了标签,也写了Action和Form,xml也修改过了,但百做不对,网上也搜不到个完整点的简单例子,求大侠帮小弟写个完整的例子呗,我参考下到底哪里写错了~~ 解决方案 解决方案二:电驴里面搜教学视频解决方案三:我在页面中写的<html:cancel>Cancel</html:cancel>书中Action的execute中写的FormBasicFormfbf=(FormBasicForm)form;if(isC