webservice结合dthml的简单例子（二，dhtml)
客户端之所以使用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>
文件：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>