js通过xmlhttp对象调用webService

    数据存储如果用XML来存储的话，那么就适用于所有的web应用程序，就相当于一个标准。webservice就是以xml的格式进行数据传递的。所以我们可以通过javascript来获取数据。

    本文介绍javascript通过xmlhttp对象获取webService，且程序只适用于同一域，没涉及跨域访问的问题。

 

1、webService方法定义

以最熟悉的用户密码验证功能来讲述

[WebMethod] public string HelloWorld() { return "Hello World"; } [WebMethod] public string CheckLogin(string userName, string userPwd) { if ("mocklystone" == userName && "123" == Pwd) return "UserOrPwdError"; else return "Available"; }

2、xmlhttp对象定义

// 定义一个xmlhttp对象 var request; function createRequest() { try { request = new XMLHttpRequest(); } catch (trymicrosoft) { try { request = new ActiveXObject("Msxml2.XMLHTTP"); } catch (othermicrosoft) { try { request = new ActiveXObject("Microsoft.XMLHTTP"); } catch (failed) { request = false; } } } if (!request) alert("Error initializing XMLHttpRequest!"); }

3、异步发送请求

// ajax异步调用Webservice function Call(flag) { // 用http Post方法实现调用 if(true==flag) { // 可取相对地址与绝对地址（webService所在的地址） var url = "LoginService.asmx/CheckLogin"; request.open("POST",url, false); request.setRequestHeader ("Content-Type","application/x-www-form-urlencoded"); request.setRequestHeader ("Content-Length",2); // 2即为参数的个数 request.onreadystatechange = updatePage; var strName=document.getElementById("userName").value; var strPwd=document.getElementById("userPwd").value; // var strName="mocklystone"; // var strPwd="123"; request.send("userName="+strName+"&userPwd="+strPwd); //发送参数的数据，可自行组合 } else { // 可取相对地址与绝对地址（webService所在的地址） var url = "LoginService.asmx/HelloWorld"; request.open("POST",url, false); request.setRequestHeader ("Content-Type","application/x-www-form-urlencoded"); request.onreadystatechange = Show; request.send(null); //发送参数的数据，可自行组合 } }

    A、有带参数的请求方法

          用post的方式来请求数据，地址格式webServicer地址+"/"+函数名

          // 可取相对地址与绝对地址（webService所在的地址）
            var url = "LoginService.asmx/CheckLogin";
            request.open("POST",url, false);

 

            request.setRequestHeader ("Content-Type","application/x-www-form-urlencoded");
            request.setRequestHeader ("Content-Length",2); // 2即为参数的个数

            request.send("userName="+strName+"&userPwd="+strPwd); //发送参数的数据，可自行组合

            这三句是关键所在，通过对数据的声明及需要传递参数个数的定义，并且通过Send()方法来传递所需要的数据。

    B、无参数的请求方法

4、数据处理

function updatePage() { if (request.readyState == 4) { // 状态为200表示调用成功，状态为500表示调用错误 if (request.status == 200) { var xmlDoc=request.responseXML; var item= xmlDoc.getElementsByTagName("string"); // 返回类型为string var data=item[0].firstChild.nodeValue; alert(data); // 输出得到的值,测试用 parseData(data); } else alert("status is " + request.status); } }

 

附表1（IXMLHTTPRequest - 属性）
onreadystatechange  N/A 指定当就绪状态发生改变时调用的事件处理函数，仅用于异步操作 
readyState  Long 异步操作的状态：未初始化(0)，正在加载(1)，已加载(2)，交互(3)，已完成(4) 

不同的浏览器状态值不同，上述状态公为IE内核的。
responseBody  Variant 将响应信息正文作为unsigned byte数组返回 
responseStream  Variant 将响应信息正文作为一个ADO Stream对象返回 
responseText  String 将响应信息正文作为一个文本字符串返回 
responseXML  Object 通过XMLDom将响应信息正文解析为XMLDocument对象 
status  Long 服务器返回的HTTP状态码 
statusText  String 服务器HTTP响应行状态 

附表2（IXMLHTTPRequest - 方法）
abort 取消当前 HTTP 请求 
getAllResponseHeaders 从响应信息中检索所有的标头字段 
getResponseHeader 从响应信息正文中获得一个 HTTP 标头值 
open(method, url, boolAsync, bstrUser, bstrPassword) 打开一个与 HTTP 服务器的连接 
send(varBody) 设定一个请求的标头字段 
setRequestHeader(bstrHeader, bstrValue) 向 HTTP 服务器发送请求。可包含正文。

 

详细源码下载地址：http://download.youkuaiyun.com/source/2074078