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

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

- 中国WEB开发者网络 (http://www.webasp.net)
-- 技术教程 (http://www.webasp.net/article/)
--- webservice结合dthml的简单例子（二，dhtml) (http://www.webasp.net/article/5/4938.htm)

-- 作者：未知
-- 发布日期： 2003-07-12

  客户端之所以使用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才能实现的功能。

webasp.net