JavaScript调用Web Service

原创

zhangyah 2013-11-11 00:07:28 博主文章分类：C# ©著作权

文章标签 JavaScript调用Web Serv 文章分类 Java 后端开发

©著作权归作者所有：来自51CTO博客作者zhangyah的原创作品，请联系作者获取转载授权，否则将追究法律责任

1、通过Webservice.htc调用WebService

(1)使用webservice.htc的限制：
1>要想使用webservice行为组件访问webservice必须保证包含组件的页面和webservice在相同

的域中，对于远程服务可以建立本地的中转代理webservice实现。
2>webservice行为组件支持.net中的基本数据类型及其数组，但是用于DataSet自定义类等不提

供直接支持，如果使用可以做相应的转化。
3>保证浏览器是IE5.0或者以上版本。
(2)使用步骤
1>先从微软网站上下载webservice.htc,
2>把webservice行为组件帮定到一个html元素。
3>用webservice行为组件的useService提供webservice的地址。
4>用webservice行为组件的callService访问webmethod。

(3)主要用到了其中的两个方法
1、service.useService({webservice地址},{本地的webservice代理类名})
2、service.{本地的webservice代理类名}.callService({本地的回调函数},{要调用的webservice方法名},{需要为方法传递的参数})
callService方法中的第一个参数为本地的回调函数，通过此函数可以对调用webservice返回的结果作相应的处理

(4)代码示例如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Js 调用 WebService实例</title>
<script language="JavaScript">
function init()
{
//改成你自己的实际地址
divservice.useService("http://localhost:12074/Service1.asmx?WSDL","S");
//       //调用示例
//        var iCallID;
//        var intA = 2;
//        var intB = 3;
//       iCallID = service.S.callService("Add", intA, intB);
}
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;
// 错误处理代码
}
else
if((!event.result.error) && (iCallID == event.result.id))
{
divservice.innerHTML=  event.result.value;// 显示计算结果
}
else
{
alert("Something else fired the event!");
}
}
</script>
</head>
<body  type='text' id='ip1' name="ip1"><br>
第二个值：<input type='text' id='ip2' name="ip2"><br>
<button onclick='iCallID=divservice.S.callService("Add",ip1.value,ip2.value);'
id="Button1" type="button">s调用加法方法</button><br>
返回结果：<div id="divservice" style=" url(webservice.htc)"  onresult="onWSresult()">
</div>
</div>
</body>
</html>

2、通过Microsoft.XMLDOM调用WebService

代码示例如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>通过Microsoft.XMLDOM调用WebService</title>
<script language="javascript" type="text/javascript">
function getXMLData()
{
docSubmit =new ActiveXObject("Microsoft.XMLDOM");
docSubmit.async = false;
//WebService引用地址
docSubmit.load("http://localhost:12074/Service1.asmx/GetProducts?topNum=5");
docSubmit.loadXML(docSubmit.xml.replace(/&lt;/g,"<").replace(/&gt;/g,">"));
var s="";
nodeList=docSubmit.documentElement.getElementsByTagName("ds");
for (i=0;i<nodeList.length;i++)
{
s=s+nodeList(i).selectSingleNode("Name").text+'<br>';//显示产品名称
}
div2.innerHTML=s;
}
function getStringData() {
docSubmit = new ActiveXObject("Microsoft.XMLDOM");
docSubmit.async = false;
docSubmit.load("http://localhost:12074/Service1.asmx/GetProductPrice?ProductId=001");
var s = docSubmit.documentElement.text; //获取返回结果
div1.innerHTML = s;
}
</script>
</head>
<body>
<input type="button" value="调用返回字符串的方法"  type="button" value="调用返回XML数据集的方法"  id="div1" class="list"></span>
<br/>
<span id="div2" class="list"></span>
</body>
</html>

3、通过Microsoft.XMLHTTP调用WebService

代码示例如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>通过XMLHTTP-POST调用WebService</title>
<script language="JavaScript" type="text/javascript">
function GetDataByXMLHttpPost(i) {
//WebService引用地址
var URL = "http://localhost:12074/Service1.asmx/GetProductPrice";
var Params = "ProductId=" + i;// Set postback parameters
var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
xmlhttp.Open("POST",URL, false);
xmlhttp.SetRequestHeader ("Content-Type","application/x-www-form-urlencoded");
xmlhttp.SetRequestHeader ("Content-Length",Params.length);
xmlhttp.send(Params);
var x =   xmlhttp.responseXML;
div1.innerHTML=x.childNodes[1].text;
//返回调用状态，状态为200说明调用成功，500则说明出错
alert(xmlhttp.Status);
alert(xmlhttp.StatusText);
}
</script>
</head>
<body>
<input type="button" value="XMLHttpPost"  id="Button2" name="Button2"/>
<br/>
<div id="div1"></div>
</body>
</html>

4、通过SOAP调用WebService

代码示例如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>通过SOAP调用WebService</title>
<script language="JavaScript" type="text/javascript">
function GetDataBySoap(i)
{
var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
var soapMessage, soapData, URL;
// 设置SOAP信息
soapMessage = "<?xml version=\"1.0\" encoding=\"utf-8\"?>";
soapMessage += "<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/\">";
soapMessage += "<soap:Body>";
// 设置SOAP数据 ---- begin ------
soapData = "<GetProductPrice xmlns=\"http://tempuri.org/\">";
soapData += "    <ProductId>" + i + "</ProductId>";
soapData += "</GetProductPrice>";
// 设置SOAP数据 ----  end  ------
soapMessage = soapMessage + soapData + "</soap:Body>";
soapMessage = soapMessage + "</soap:Envelope>";
URL = "http://localhost:12074/Service1.asmx"; //可以使用相对地址或完整URL
xmlhttp.Open("POST",URL, false);
xmlhttp.SetRequestHeader ("Content-Type","text/xml; charset=utf-8");
xmlhttp.SetRequestHeader ("SOAPAction","http://tempuri.org/GetProductPrice");//方法名
xmlhttp.send(soapMessage);
alert(soapMessage)//SOAP数据信息
var x = xmlhttp.responseXML;
alert('调用结果：'+x.childNodes[1].text);
//返回调用状态，状态为200说明调用成功，500则说明出错
alert('状态值：'+xmlhttp.Status);
alert('状态描述：'+xmlhttp.StatusText);
}
</script>
</head>
<body>
<input type="button" value="SOAP"  id="Button1" name="Button1" />
<br/>
<div id="div1"></div>
</body>
</html>