使用 XMLHTTP 协议消耗 .NET Web 服务

引言

本文介绍如何使用 XmlHttpRequest 对象封装的 XmlHttp 协议调用 Web 服务方法。

背景

在早期版本的 Internet Explorer (5.0 和 6.0) 中，XmlHttpRequest 对象可用作 ActiveX 控件，您需要像下面这样创建该对象：

var myReq = new ActiveXObject("Microsoft.XMLHTTP");

现在，对于 IE 7，您可以像这样创建一个 XmlHttpRequest 对象实例：

var myReq = new XMLHttpRequest;

XmlHttpRequest 简介

Internet Explorer 7 支持 XmlHttpRequest 对象。它存在于 IE 浏览器的 window 属性中。使用此对象，您可以通过 HTTP 发起 XML 请求。此对象是 Microsoft 的 AJAX (Asynchronous Java and XML) 技术的主干，用于在客户端请求时向服务器执行回调。

借助 XMLHttpRequest 对象，Microsoft Internet Explorer 客户端无需重新加载页面即可直接向 Web 服务器检索和提交 XML 数据。在从服务器接收 XML 内容后，您可以使用客户端 XML DOM 或 XSLT 将 XML 数据转换为可读的 HTML 内容。

XmlHttpRequest 对象属性

属性	描述
onreadystatechange	设置或检索异步请求的事件处理程序。
readyState	检索请求操作的当前状态。
responseBody	以无符号字节数组的形式检索响应正文。
responseText	以字符串形式检索响应正文。
responseXML	以 XML 文档对象模型 (DOM) 对象的形式检索响应正文。
状态	检索请求的 HTTP 状态码。
statusText	检索请求的友好 HTTP 状态。

XmlHttpRequest 对象方法

方法	描述
abort	取消当前的 HTTP 请求。
getAllResponseHeaders	返回完整的响应头列表。
getResponseHeader	返回指定的响应头。
open	为待处理的请求分配方法、目标 URL 和其他可选属性。
send	向服务器发送 HTTP 请求并接收响应。
setRequestHeader	向请求添加自定义 HTTP 头。

使用 XMLHTTP 获取 XML 文件的示例请求

打开 Visual Studio 2008 并创建一个新的网站。向网站添加一个名为“books.xml”的新 XML 文件。向站点添加一个新网页，并在页面上放置一个 HTML 按钮控件。点击下方的源代码选项卡以查看标记。通过添加以下用 JavaScript 编写的脚本来修改源代码。

<script type="text/javascript" language="javascript"> 
var myReq = new XMLHttpRequest(); 
function getBooks() 
{ 
  if (window.XMLHttpRequest) 
  { 
    var url = "https://:49216/WebXmlHttpDemo/books.xml" 
    myReq.open("GET", url, false) 
    myReq.send(); 
    alert(myReq.responseXML.xml); 
  } 
}

请记住在按钮的 onclick 事件中调用此方法。

<input id="Button1" type="button" 
   value="Show Books" onclick="getBooks() " />

使用 XmlHttpRequest 消耗 Web 服务

XmlHttpRequest 对象甚至可以用于调用 Web 服务方法。在对象的 Open 方法中，将 async 标志设置为 true，并将 onreadystatechange 属性设置为一个函数。当您异步请求 Web 服务方法时，您指定的函数会由 XmlHttpRequest 回调，报告请求的状态。在此回调方法中，您可以传递 Web 服务方法的输入参数并调用该方法以获取结果。

现在，我将解释如何消耗 Web 服务，其中异步标志设置为 true。请注意，Web 服务方法调用涉及多个请求-响应 SOAP 消息，并且仅有很小的可能性可以同步执行 Web 方法。

为方便测试，向现有网站添加了一个 Web 服务 (.asmx)。为此，在网站菜单中，选择“添加新项”，然后在显示的对话框中找到 Web 服务类。将 Web 服务命名为 SomeService。

[WebService(Namespace = "https://:49216/WebXmlHttpDemo/")] 
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] 
public class SomeService : System.Web.Services.WebService { 
    [WebMethod] 
    public string ReverseTheString(string s) { 
        string outText = "";
        char[] letters = new char[s.Length];
        s.CopyTo(0, letters, 0,s.Length);
        Array.Reverse(letters);
        foreach (char c in letters)
            outText += c; 
        return outText; 
    }
    [WebMethod] 
    public string GetTimeString() 
    {
        return DateTime.Now.ToLongTimeString(); 
    }

在上述 Web 服务中，有两个 Web 方法：ReverseTheString，它接受一个字符串作为输入参数并返回反转后的字符串作为结果；以及 GetTimeString，它返回服务器端的当前时间。

调用没有输入参数的 Web 服务方法

要从网页消耗上述 Web 服务，请向网页添加一个 HTML 按钮 (ID=Button1) 和一个 TextArea 控件。在页面的标记中，编写以下脚本。它调用 SomeService 类中定义的 GetTimeString 方法。

<script type="text/javascript" language="javascript"> 
var myReq = new XMLHttpRequest(); 
function callWSMethod1() 
{ 
    if (window.XMLHttpRequest) 
    { 
        var url = "https://:49216/WebXml" + 
                  "HttpDemo/SomeService.asmx?op=GetTimeString" 
        myReq.onreadystatechange = checkStatus1;
        // true indicates asynchronous request  
        myReq.open("GET", url, true);
        myReq.send(); 
    } 
} 
function CheckStatus1() 
{ 
    if (myReq.readyState == 4) // Completed operation 
    { 
        myReq.open("POST", 
          "https://:49216/WebXmlHttpDemo/" + 
          "SomService.asmx/GetTimeString", false); 
        myReq.send(); 
        form1.TextArea1.value = oReq.responseText; 
    } 
} 
</script> 

请确保在 button1 的 onclick 事件中调用 CallWSMethod1 方法。

<form id="form1" runat="server"> 
<div> 
<input id="Button1" type="button" 
  value="Get Time" onclick="callWSMethod1() " /><br /> 
<textarea id="TextArea1" name="S1"></textarea> 
</div> 
</form> 

输出

调用带输入参数的 Web 服务方法

要从网页消耗上述 Web 服务，请向网页添加一个 HTML 按钮 (ID=Button2)。在页面的标记中，编写以下脚本以调用 SomeService 类中定义的 ReverseTheString 方法。

<script type="text/javascript" language="javascript"> 
var myReq = new XMLHttpRequest(); 
function callWSMethod2() 
{ 
    if (window.XMLHttpRequest) 
    { 
        var url = "https://:49216/WebXmlHttpDemo/" + 
            "SomeService.asmx/ReverseTheString?someText="; 
        url += form1.Text1.value; 
        myReq.onreadystatechange = checkStatus2; 
        myReq.open("GET", url, true); 
    } 
} 
function CheckStatus2() 
{ 
    if (myReq.readyState == 4) 
    { 
        form1.TextArea1.value = myReq.responseXML.xml; 
    } 
} 
</script> 

请确保在 Button2 的 onclick 事件中调用 CallWSMethod2 方法。

<input id="Button2" type="button" 
    value="Reverse The String" onclick="callWSMethod2() " /><br /> 

在运行页面之前，在 Web.Config 文件中添加以下设置，以在您的网站中启用 HTTP-GET 和 HTTP-POST 方法。

<webServices> 
<protocols> 
<add name="HttpGet"/> 
<add name="HttpPost"/> 
</protocols> 
</webServices> 

输出

可以使用 XSLT 或通过 XML DOM 对象模型解析，以更清晰的方式呈现这些 XML 输出。

摘要

本文介绍了 XmlHttpRequest 对象的基础知识，并展示了如何使用它来异步调用 Web 服务方法。XmlHttpRequest 的真正强大之处和优势在于其在 AJAX、Mozilla Development 和其他技术中的使用和实现。