JavaScript调用Web Service的三种实现方式详解

using System;
using System.Web;
using System.Web.Services;
using System.Web.Services.Protocols;
[webservice(namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
public class Service : System.Web.Services.WebService
{ 
public Service ()
{ 
//uncomment the following line if using designed components
//InitializeComponent();
} 
[webmethod]
public string SayHelloTo(string Name)
{ 
return "Hello "+Name;
} 
} 

上述代码结构较为传统。

基于XMLHttpRequest的GET与POST调用

接下来介绍使用JavaScript结合XMLHttpRequest调用Web Service的具体实现。

<html>
<title>Call webservice with javascript and xmlhttp.</title>
<body>
<script language="javascript"><!--
//test function with get method.
function RequestByGet(data){
var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
//Webservice location.
var URL="http://localhost:1323/WebSite6/Service.asmx/SayHelloTo?Name=Zach";
xmlhttp.Open("GET",URL, false);
xmlhttp.SetRequestHeader ("Content-Type","text/xml; charset=utf-8");
xmlhttp.SetRequestHeader ("SOAPAction","http://tempuri.org/SayHelloTo");
xmlhttp.Send(data);
var result = xmlhttp.status;
//OK
if(result==200) {
document.write(xmlhttp.responseText);
} 
xmlhttp = null;
} 
//test function with post method
function RequestByPost(value)
{ 
var data;
data = '<?xml version="1.0" encoding="utf-8"?>';
datadata = data + '<soap:Envelope xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/">';
datadata = data + '<soap:Body>';
datadata = data + '<SayHelloTo xmlns="http://tempuri.org/">';
datadata = data + '<Name>'+value+'</Name>';
datadata = data + '</SayHelloTo>';
datadata = data + '</soap:Body>';
datadata = data + '</soap:Envelope>';
var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
var URL="http://localhost:1323/WebSite6/Service.asmx";
xmlhttp.Open("POST",URL, false);
xmlhttp.SetRequestHeader ("Content-Type","text/xml; charset=gb2312");
xmlhttp.SetRequestHeader ("SOAPAction","http://tempuri.org/SayHelloTo");
xmlhttp.Send(data);
document.write( xmlhttp.responseText);
} 
// --></script>
<input type="button" value="CallWebserviceByGet" onClick="RequestByGet(null)">
<input type="button" value="CallWebserviceByPost" onClick="RequestByPost('Zach')">
</body>
</html>

对于使用POST方法时需要发送的数据结构，可以在Web Service的测试页面中找到示例，自行拼接并添加对应参数即可。

利用IE Behavior行为简化调用

第三种方法是通过style.behavior属性来实现，这种方式相对简单。

function getfemale()

//第一个参数是webservice的url，后面是名称

female.useService("news.asmx?WSDL","news");

//设置一个回调函数，service返回结果的时候回调；第一个参数是回调函数的名称，后面的是webservice的参数

intCallID=female.news.callService(female_result,"getphoto","female"); //这里有两个参数.....

function female_result(result)//回调函数

if(result.error)

female.innerHTML=result.errorDetail.string;

else

female.innerHTML=result.value; //将webservice返回的结果写如div中

页面显示部分： <div id="female" style="BEHAVIOR:url(WebService.htc)"></div>

这种方法为在静态页面中调用动态内容提供了一条途径。

如果在getfemale()函数中增加定时调用，即可实现页面的无刷新更新机制。

该方法的缺点在于Web Service存在一定延迟，即使是本地服务也比纯静态页面响应慢，初次打开页面时可能会感到不协调。

第二种方法使用的代码更为简洁，它利用了CSS定义了div的行为，相比第一种方法更易读。

style="behavior:url(webservice.htc)"

使用该方法的前提条件是：

if you are using Microsoft IE 5 or later, you can use the behavior/HTML-Component "WebService" to access a Web service. The "WebService" behavior communicates with Web services over HTTP using Simple Object Access Protocol (SOAP).

附注:另一个总结帖子在:http://goody9807.cnblogs.com/archive/2005/08/17/216725.html

calling WebServices using Javascript

if you are using Microsoft IE 5 or later, you can use the behavior/HTML-Component "WebService" to access a Web service. The "WebService" behavior communicates with Web services over HTTP using Simple Object Access Protocol (SOAP).

to use the "WebService" behavior, you must attach it to an element using the STYLE attribute, as follows:

style="behavior:url(webservice.htc)">

附上ibm上面有关ajax调用webservice的文章: