使用XmlHttpRequest对象调用Web Services 服务
最近写了一个使用XmlHttpRequest对象调用Web Services 系统时间（分别以GET，POST，SOAP 1.1，SOAP 1.2方式），通过XML DOM对象解析返回 的小程序，兼容IE 和 FireFox浏览器 希望对初学AJAX的朋友带来帮助 不过程序中还有很多不足的地方，还请多多指点... 谢谢~
首先我们需要了解XmlHttpRequest对象使用的基本步骤：
1.创建XMLHttpRequest对象
2.创建HTTP请求
3.设置状态改变时的事件
4.发送HTTP请求
5.获取异步返回的数据
一、GetSystemTime.htm 页面如下：
代码：
Code
<body>
<p>
使用<span>XmlHttpRequest</span>对象调用<span>Web Services</span>，并使用<span>XML DOM</span>
对象解析返回，兼容IE 和 FireFox浏览器
</p>
<div style="padding-right: 20px;">
<select id="select">
<option selected="selected" value="0">HTTP GET</option>
<option value="1">HTTP POST</option>
<option value="2">SOAP 1.1</option>
<option value="3">SOAP 1.2</option>
</select>
<input type="button" onclick="GetTime();" value="调用Web Service" />
<input type="button" value="刷新界面" onclick="RenovatePage();" />
<span style="margin-left: 40px;"><span style="color: Blue;">系统时间为：</span>
<input type="text" id="serverTime" style="background-color: #FFF9c4;" /></span>
<div id="loading" style="display: none;">
<img alt="load" src="images/loading.gif?http://www.xvna.com" style="float: left; padding: 0 10px 0 0;" />
<span style="color: #A11111">正在加载数据</span>
</div>
</div>
<br />
<textarea id="response" style="width: 750px; height: 150px; font-family: Courier New;
background-color: #FFF9c4; font-size: 14px; margin-top: 0px;" cols="25" rows="10"></textarea><br />
</body>
二、调用页面的Js代码：
Code
1var XHR;
2var getMode; //调用WebServices方式
3var xmlString; // 传入Xml字符串类型
4var ctype = null;
5var soapheader = null;
6var data = null;
7var newDom = null;
8var res = null;
9
10//创建xmlHttpRequest对象
11function CreatXHR() {
12 try {
13 //适用于IE5.0 或IE6.0
14 XHR = new ActiveXObject("Msxml2.XMLHTTP");
15 }
16 catch (e) {
17 try {
18 //用于IE5.0下
19 XHR = new ActiveXObject("Microsoft.XMLHTTP");
20 }
21 catch (e) {
22 XHR = false;
23 }
24 }
25 if (!XHR && typeof (XMLHttpRequest) != "undefined") {
26 //适用于IE7.0或FireFox
27 XHR = new XMLHttpRequest();
28 }
29}
Code
1//调用函数
2function onReadyStateChange() {
3 var res = null;
4 if (XHR.readyState == 4) {
5 if (XHR.status == 200) {
6 document.getElementById("response").value = "这是返回的响应正文：\r\n" + XHR.responseText;
7 //调用XML DOM函数使用xpath及命名空间映射实现数据查询
8 res = HandleResponseByXMLDOM(XHR.responseText, data, nsMap);
9 }
10 document.getElementById("serverTime").value = res;
11 }
12}
13//根据页面单选框的选项调用Webservice
14function GetTime() {
15 getMode = document.getElementById("select").value; //从单选框中获取调用服务类型
16 InvokeWebService(getMode, "Service.asmx", "http://www.SouBao.com", "GetTime"); //调用webservice服务
17}
Code
1/**//*---------------------------------------------------------------
2调用Webservice服务
3mode：指调用服务的类型[get,post,soap1.1,soap1.2]
4url:指调用webservice的文件地址
5nspace： Services的namespace，默认为null
6MethodName：webservice的方法名
7-----------------------------------------------------------------*/
8function InvokeWebService(mode, url, nspace, MethodName) {
9
10 var method = "POST"; //调用方法
11 //调用之前显示动画
12 document.getElementById("loading").style.display = "none";
13 switch (mode) {
14 // GET
15 case "0":
16 method = "GET";
17 //由于缓存的原因，用了个取巧的办法：使用一个时间戳 ['不是原创~！']
18 url = url + "/" + MethodName + "?" + new Date();
19 break;
20 // POST
21 case "1":
22 url = url + "/" + MethodName;
23 break;
24 //SOAP 1.1
25 case "2":
26 //设置Content-Type报头
27 ctype = "text/xml; charset=utf-8";
28 //设置SOAPAction报头
29 soapheader = nspace + "/" + MethodName;
30 url = url + "?.tmp=" + new Date() + "/" + MethodName;
31
32 data = "<?xml version=\"1.0\" encoding=\"utf-8\"?>";
33 data += "\r\n" + "<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/\">";
34 data += "\r\n" + "<soap:Body>"
35 data += "\r\n" + "<" + MethodName + " xmlns=\"" + nspace + "\" />";
36 data += "\r\n" + "</soap:Body>";
37 data += "\r\n" + "</soap:Envelope>";
38 break;
39 //SOAP 1.2
40 case "3":
41 ctype = "application/soap+xml; charset=utf-8";
42 //构建最终请求的url地址
43 url = url + "?.tmp=" + new Date() + "/" + MethodName;
44 data = "<?xml version=\"1.0\" encoding=\"utf-8\"?>";
45 data += "\r\n" + "<soap12:Envelope xmlns:xsi=\"http://www.w3.org/2001/XMLSchema-instance\" xmlns:xsd=\"http://www.w3.org/2001/XMLSchema\" xmlns:soap12=\"http://www.w3.org/2003/05/soap-envelope\">";
46 data += "\r\n" + "<soap12:Body>"
47 data += "\r\n" + "<" + MethodName + " xmlns=\"" + nspace + "\" />";
48 data += "\r\n" + "</soap12:Body>";
49 data += "\r\n" + "</soap12:Envelope>";
50 break;
51 }
52 //显示加载
53 document.getElementById("loading").style.display = "block";
54 //调用Web Services
55 //Load(method, url, onReadyStateChange, data, ctype, soapheader);
56 document.getElementById("response").value = "";
57 //延时1S
58 setTimeout(function() { Load(method, url, onReadyStateChange, data, ctype, soapheader); }, 1000);
59}
Code
1function Load(method, url, onReadyStateChange, data, ctype, soapheader) {
2 if (ctype == null) {
3 ctype = "application/x-www-form-urlencoded; charset=utf-8";
4 }
5 //创建XMLHttpRequest对象
6 CreatXHR();
7 //创建HTTP请求
8 XHR.open(method, url, true);
9 XHR.setRequestHeader("Content-Type", ctype);
10 if (soapheader != null) {
11 XHR.setRequestHeader("SOAPAction", soapheader);
12 }
13 XHR.onreadystatechange = onReadyStateChange;
14 XHR.send(data);
15}
16
17//调用函数
18function onReadyStateChange() {
19
20 if (XHR.readyState == 4) {
21 document.getElementById("loading").style.display = "none";
22 if (XHR.status == 200) {
23 document.getElementById("response").value = "这是
相关内容
赞助商链接