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