转--JavaScript调用WebServices(使用WebService.htc)--
穆铭晨
.XML Web services 行为使客户端脚本能够调用由 Microsoft .NET XML Web services 或其他支持简单对象访问协议 (SOAP) 的 Web 服务器公开的远程方法。
目的：提供一种简单的方法使用和利用 SOAP，而不需具有 SOAP 实现的专业知识。
步骤：
1.下载Webservice.htc,许多网上的文章介绍该文件可以在微软的网站上找到，但我按照地址点进去时，只看到网页不存在的提示
2.创建WebService文件假设为MathService.asmx，其提供Add和Subtract两个服务函数
3.创建调用的网页文件Sample.htm(文件内容在下面详细分析)
4.将Webservice.htc复制到Sample.htm同一目录下
5.通过浏览器，浏览该网页
下面分析Sample.htm的内容（取自Msdn）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<LINK REL="stylesheet" HREF="/workshop/samples/samples.css" TYPE="text/css">
<SCRIPT language="JavaScript">
var iCallID;
var callObj;
function init()
{
// 定位WebService服务位置，并且为该服务制定一个名字
// 同一ServiceURl可以指定多个名字,Service为HTM文件中的HTML TAG,可以使用HTML中定义的任何标记
service.useService("..//..//MathService.asmx?WSDL","MyMath");
// 禁用Add按钮.
doAddButton.disabled = true;
service.onserviceavailable = enableButton();
}
function enableButton(){
doAddButton.disabled = false;
}
function doAdd(x, y){
// 同步调用 // 创建一个 the SOAPHeader object
var headObj = new Object();
// 创建 the call object
callObj = service.createCallOptions();
callObj.async = false;
callObj.params = new Array();
callObj.params.a = x;
callObj.params.b = y;
callObj.funcName = "Add";
callObj.SOAPHeader = new Array();
callObj.SOAPHeader[0] = headObj;
oSPAN.innerText = x + " + " + y + " = ";
// 使用回调函数"mathResults"调用
iCallID = service.MyMath.callService(mathResults, callObj);
mathResults(iCallID);
}
function doSubtraction(y, x){
// 异步调用，这是系统默认的调用方式(the default)
oSPAN.innerText = y + " - " + x + " = ";
// 调用Subtract
// 使用回调函数"mathResults"调用
iCallID = service.MyMath.callService(mathResults, "Subtract", y, x);
}
function mathResults(result){
// If there is an error, and the call came from the call() in init()
if(result.error){
// Pull the error information from the event.result.errorDetail properties
var xfaultcode = result.errorDetail.code;
var xfaultstring = result.errorDetail.string;
var xfaultsoap = result.errorDetail.raw;
oSPAN.innerText = xfaultcode + " " + xfaultstring + " " + xfaultsoap;
}// If there was no error
else{
// Show the arithmetic
oSPAN.innerText += result.value;
}
}
</SCRIPT>
</HEAD>
<body οnlοad="init()">
//设置Div元素绑定WebService服务，在这里可以添加onresult="onWSresult()"，在该事件中处理调用结果 <div id="service" style="behavior:url(../webservice.htc)"></div> <BR><BR> Equation : <SPAN id="oSPAN"></SPAN> <BR><BR> <BUTTON id="doAddButton" οnclick="doAdd(5, 6);">Do Add function of 5 and 6</BUTTON> <BUTTON οnclick="doSubtraction(6, 5);">Do Subtraction of 6 and 5</BUTTON> </body>
一些总结：
- 客户端必须包含Webservice.htc，将Webservice.htc放在服务器可访问的目录下，可以保证IE浏览器浏览时自动下载该文件，该过程对客户来说是透明的，但是使用其他的浏览器可能会无法使用该功能。
- 获取调用结果有两种方式
使用事件捕获:在Html标记中添加 onresult="onWSresult()"，如：
<SCRIPT language="JavaScript">
var iCallID;
function init()
{
service.useService("/services/math.asmx?WSDL","MyMath");
iCallID = service.MyMath.callService("add",5,6);
}
function onWSresult()
{
if((event.result.error)&&(iCallID==event.result.id))
{
var xfaultcode = event.result.errorDetail.code;
var xfaultstring = event.result.errorDetail.string;
var xfaultsoap = event.result.errorDetail.raw;
document.writeln("ERROR. Method call failed!");
document.writeln("Call ID:" + iCallID);
document.writeln("Fault Code:" + xfaultcode);
document.writeln("Fault String:" + xfaultstring);
document.writeln("SOAP Data:" + xfaultsoap);
}
else if(event.result.error == false)
{
document.writeln("Result received without errors!");
}
}
</script>
<body οnlοad="init()">
<div id="service" style="behavior:url(webservice.htc)" onresult="onWSresult()">
</div>
</body>
使用回调函数：（例子见上面） - 调用分为同步调用和异步调用，异步调用为默认的调用方式：（例子见上面）
- 可以使用Callobj进行复杂的调用，设置调用时的参数，以及认证信息
- 支持有限的数据类型，请参看http://msdn.microsoft.com/workshop/author/webservice/datatypes.asp
类似资料：