JavaScript 调用 Web Service 的多种方法

作者: 来源: 日期:2010-5-12

通过 xmlhttp+webservice( 原始方法 )

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;
}
}

还是俗了点。:)

2. js 调用 webservice+xmlhttp 的实现部分。

<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 方法需要发送的那堆东东可以在 webservice 的测试页面中找到,自己拼凑加上对应的参数就可以。

通过 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>

ok,这给我们在静态页调用动态的内容提供了一种途径;

这里如果给 getfemale() 函数加上定时调用的话,就是一种无刷新更新页面的机制了。

缺点是 webservice 会有一定的延迟,即使是本地的 webservice 也会比静态页面慢很多,初次打开页面会感觉很不协调。

第二种方法使用了 style. 代码就简洁多了他使用了 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 的文章 :

使用 Ajax 调用 SOAP Web 服务,第 1 部分 : 构建 Web 服务客户机

相关文章