webservice結合dthml的簡單例子（二，dhtml)
2024-08-26 00:15:33
供稿：網友
客戶端之所以使用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才能實現的功能。
