在支持 AJAX 的网页中，浏览器向服务器发出对页面的初始请求，然后向 Web 服务发出对数据的后续异步请求。客户端通信元素采用代理类（从服务器下载）和核心客户端脚本库的形式。服务器通信元素是处理程序和自定义服务。下图显示了客户端与服务器之间的通信中涉及的元素。

客户端-服务器通信

浏览器使用代理类调用 Web 服务方法。代理类是由服务器自动生成并在页面加载时下载到浏览器中的脚本。代理类提供一个客户端对象，该对象表示某个 Web 服务的已公开方法。

为了调用 Web 服务方法，客户端脚本会调用代理类的相应方法。调用是通过 对象异步进行的。

Web 服务通信层包含使代理类可以进行服务调用的库脚本类型。有关更多信息，请参见 命名空间中包含的类。

代理类和核心 Web 服务通信层中的代码隐藏了 的复杂性和浏览器之间的差异。这简化了调用 Web 服务所必需的客户端脚本。

发出 Web 服务请求有以下两种方式：

• 使用 HTTP POST 谓词调用 Web 服务。POST 请求具有一个包含浏览器发送到服务器的数据的正文。该正文没有大小限制。因此，可以在数据大小超过 GET 请求的固有大小限制时使用 POST 请求。客户端将请求序列化为 JSON 格式并将其作为 POST 数据发送到服务器。服务器将 JSON 数据反序列化为 .NET Framework 类型并进行实际的 Web 服务调用。在响应过程中，服务器对返回值进行序列化并将这些值传递回客户端，而客户端再将这些值反序列化为 JavaScript 对象以便进行处理。

• 使用 HTTP GET 谓词调用 Web 服务。这与 POST 请求的功能类似，只不过具有以下区别：

  • 客户端使用查询字符串将参数发送到服务器。

  • GET 请求只能调用使用 属性配置的 Web 服务方法。

  • 数据大小限制为浏览器所允许的 URL 长度。

    说明：
    对于在服务器上修改数据或公开关键信息的方法调用，应避免使用 GET 请求。在 GET 请求中，由浏览器将消息编码为 URL，因此更容易遭到篡改。对于 GET 和 POST 请求，您应遵循安全准则以保护敏感数据。

下图显示了 ASP.NET AJAX 客户端结构。

AJAX 客户端结构

客户端结构的元素包括位于核心库中的 Web 服务通信层以及下载的服务代理类（在页面上使用）。图中显示的各个元素如下所示：

• 自定义服务代理类。这些类包含由服务器自动生成并下载到浏览器中的客户端脚本。代理类为页面中使用的每个 WCF 或 ASMX 服务提供一个对象。（也就是说，代理类为页面中 控件的 ServiceReferences 元素中的每个项提供一个对象。）在客户端脚本中调用代理方法会创建一个对服务器上相应 Web 服务方法的异步请求。

• 身份验证代理类。 代理类由服务器身份验证应用程序服务生成。该代理类使得用户可以在浏览器中通过 JavaScript 进行登录或注销，而不必进行到服务器的往返过程。

• 角色代理类。 代理类由服务器角色应用程序服务生成。使用该代理类可以通过 JavaScript 对用户进行分组并将每个组视为一个单元，而不必进行到服务器的往返过程。对于启用或拒绝对服务器上资源的访问，这可能十分有用。

• 配置文件代理类。 代理类由服务器配置文件应用程序服务生成。该代理类使得当前用户的配置文件信息通过 JavaScript 对客户端可用，而不必进行到服务器的往返过程。

• 页面方法代理类。此代理类为客户端脚本提供脚本基础结构以调用 ASP.NET 页中的静态方法（就好像这些方法是 Web 服务方法一样）。有关更多信息，请参见。

• Web 服务通信层。这是包含客户端脚本类型的库。这些类型使得浏览器（客户端）可以与服务器上的服务进行通信。这些类型还使客户端应用程序避免了在客户端与服务器之间建立和维护异步通信的复杂性。它们封装提供异步功能的浏览器 XMLHTTP 对象，并使得客户端应用程序可以独立于浏览器。Web 服务通信层的主要元素如下：

  • WebRequest. 此元素提供用于发出 Web 请求的客户端脚本功能。有关更多信息，请参见 类。

  • WebRequestManager. 此元素管理由 对象向关联的执行器对象发出的 Web 请求流。有关更多信息，请参见 类。

  • XmlHttpExecutor. 此元素利用浏览器的 XMLHTTP 支持发出异步网络请求。有关更多信息，请参见 类。

  • JSON 序列化。将 JavaScript 对象序列化为 JSON 格式。使用 JavaScript eval 函数可进行反序列化。有关更多信息，请参见 类。

默认序列化格式为 JSON，但是 Web 服务和 ASP.NET 网页中的单个方法可以返回其他格式（如 XML）。可以通过属性来指定方法的序列化格式。例如，对于某个 ASMX 服务，可以设置 属性以使某个 Web 服务方法返回 XML 数据，如下面的示例中所示：

[ScriptMethod(ResponseFormat.Xml)] 
          

下图显示了 AJAX 服务器结构，该结构包含启用与客户端应用程序的通信的元素。

AJAX 服务器结构

服务器结构的元素包括具有 HTTP 处理程序和序列化类的 Web 服务通信层、自定义服务、页面方法以及应用程序服务。图中显示的各个元素如下所示：

• 自定义 Web 服务。这些服务提供您实现的服务功能并将相应的响应返回给客户端。自定义 Web 服务可以是 ASP.NET 或 WCF 服务。Web 服务通信层自动生成可从客户端脚本异步调用的客户端脚本代理类。

• 页面方法。此组件使得 ASP.NET 页中的方法可以如同 Web 服务方法一样被调用。页面方法必须在执行页面方法调用的页面中进行定义。

• 身份验证服务。身份验证服务生成身份验证代理类，该代理类使得用户可以通过客户端 JavaScript 进行登录或注销。此应用程序服务始终可用，因此不必将其实例化。有关更多信息，请参见。

• 角色服务。角色服务生成角色代理类，该代理类使得客户端 JavaScript 可以访问当前经过身份验证的用户的角色信息。此应用程序服务始终可用，因此不必将其实例化。有关更多信息，请参见。

• 配置文件服务。配置文件服务生成配置文件代理类，该代理类使得客户端 JavaScript 可以获取和设置与当前请求相关联的用户的配置文件属性。此应用程序服务始终可用，因此不必将其实例化。有关更多信息，请参见。

• JSON 序列化。使用服务器 JSON 序列化组件可以在常见 .NET Framework 类型与 JSON 格式之间进行可自定义的序列化和反序列。有关更多信息，请参见 。

• XML 序列化。Web 服务通信层支持 XML 序列化，用于对 Web 服务发出 SOAP 请求，并用于从对 Web 服务的 JSON 请求返回 XML 类型。

使用 .NET Framework 可以通过客户端脚本从浏览器异步调用 ASP.NET Web 服务 (.asmx) 方法。页面可以在不进行回发和刷新整个页面的情况下调用基于服务器的方法，因为浏览器与服务器之间只传输数据。

下面的示例演示如何在 ASP.NET 网页中公开 Web 服务方法。

<%@ Page Language="C#" %>                                                
           
         
                            
                                 
                              
                         
                        
            
                
             
Server Time
                    
             
Calling a service that returns the current server time.
                    
                         
            
        
           
        
           
        
           
            
                    
           
       

下面的示例演示一个网页以及由页面脚本调用的相关 Web 服务。

<%@ WebService Language="C#" Class="Samples.AspNet.ServerTime" %>using System;using System.Web;using System.Web.Services;using System.Xml;using System.Web.Services.Protocols;using System.Web.Script.Services;namespace Samples.AspNet{    [WebService(Namespace = "http://tempuri.org/")]    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]    [ScriptService]    public class ServerTime : System.Web.Services.WebService    {        [WebMethod]        public string GetServerTime()        {            return String.Format("The server time is {0}.",                 DateTime.Now);        }    }}

上面的示例演示如何通过调用为 Web 服务自动生成的代理类来从客户端脚本调用 Web 服务。还可以从客户端脚本对 Web 服务进行较低级别的调用。如果您需要管理通信层或检查要发送到服务器或从服务器发送的数据，则可能需要这样做。若要通过这种方式调用 Web 服务，请使用 类。

下面的示例演示如何使用 WebRequest 对象实现连接到指定 URL（HTTP 终点）的 GET 和 POST Web 请求。

// ConnectingEndPoints.jsvar resultElement;function pageLoad(){    resultElement = $get("ResultId");}// This function performs a GET Web request.function GetWebRequest(){    alert("Performing Get Web request.");    // Instantiate a WebRequest.    var wRequest = new Sys.Net.WebRequest();    // Set the request URL.          wRequest.set_url("getTarget.htm");    alert("Target Url: getTarget.htm");    // Set the request verb.    wRequest.set_httpVerb("GET");    // Set the request callback function.    wRequest.add_completed(OnWebRequestCompleted);    // Clear the results area.    resultElement.innerHTML = "";    // Execute the request.    wRequest.invoke();  }// This function performs a POST Web request.function PostWebRequest(){    alert("Performing Post Web request.");    // Instantiate a WebRequest.    var wRequest = new Sys.Net.WebRequest();    // Set the request URL.          wRequest.set_url("postTarget.aspx");    alert("Target Url: postTarget.aspx");    // Set the request verb.    wRequest.set_httpVerb("POST");    // Set the request handler.    wRequest.add_completed(OnWebRequestCompleted);    // Set the body for he POST.    var requestBody =         "Message=Hello! Do you hear me?";    wRequest.set_body(requestBody);    wRequest.get_headers()["Content-Length"] =         requestBody.length;    // Clear the results area.   resultElement.innerHTML = "";    // Execute the request.    wRequest.invoke();              }// This callback function processes the // request return values. It is called asynchronously // by the current executor.function OnWebRequestCompleted(executor, eventArgs) {        if(executor.get_responseAvailable())     {        // Clear the previous results.        resultElement.innerHTML = "";        // Display Web request status.        resultElement.innerHTML +=          "Status: [" + executor.get_statusCode() + " " +                     executor.get_statusText() + "]" + "
";        // Display Web request headers.       resultElement.innerHTML +=             "Headers: ";       resultElement.innerHTML +=             executor.getAllResponseHeaders() + "
";        // Display Web request body.       resultElement.innerHTML +=             "Body:";      if(document.all)        resultElement.innerText +=            executor.get_responseData();      else        resultElement.textContent +=            executor.get_responseData();    }}if (typeof(Sys) !== "undefined") Sys.Application.notifyScriptLoaded();

可以从客户端脚本异步调用 Windows Communication Foundation (WCF) 服务 (.svc)，方法与调用基于 .asmx 的服务基本相似。下面的示例演示如何在 ASP.NET 网页中公开和调用 WCF 服务操作。

<%@ Page Language="C#" AutoEventWireup="true"%>            
           
        
                        
                             
                          
                         
                             
                          
                     
                            
            
            
             
Simple WCF Service
            
                             
                         
             
            
             
                
                          
             
         
            
    
           

var ServiceProxy;function pageLoad(){    ServiceProxy = new ISimpleService();    ServiceProxy.set_defaultSucceededCallback(SucceededCallback);}function OnClick(){    // var myService = new ISimpleService();    ServiceProxy.HelloWorld1("George");}function OnClick2(){    var dc = new DataContractType();    dc.FirstName = "George";    dc.LastName = "Washington";    ServiceProxy.HelloWorld2(dc);      }// This is the callback function that// processes the Web Service return value.function SucceededCallback(result, userContext, methodName){    var RsltElem = document.getElementById("Results");    RsltElem.innerHTML = result + " from " + methodName + ".";}if (typeof(Sys) !== "undefined") Sys.Application.notifyScriptLoaded();

using System;using System.Web;using System.Collections;using System.Collections.Generic;using System.Threading;using System.Xml;using System.Xml.Serialization;using System.Text;using System.IO;using System.Runtime.Serialization;using System.ServiceModel;using System.ServiceModel.Description;using System.ServiceModel.Dispatcher;using System.ServiceModel.Channels;using System.ServiceModel.Activation;// This a WCF service which consists of a contract, // defined below as ISimpleService, and DataContractType, // a class which implements that interface, see SimpleService, // and configuration entries that specify behaviors associated with // that implementation (see 
           
             in web.config)namespace Aspnet.Samples{    [ServiceContract()]    public interface ISimpleService    {        [OperationContract]        string HelloWorld1(string value1);        [OperationContract]        string HelloWorld2(DataContractType dataContractValue1);    }    [ServiceBehavior(IncludeExceptionDetailInFaults = true)]    [AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]    public class SimpleService : ISimpleService    {        public SimpleService()        { }        public string HelloWorld1(string value1)        {            return "Hello " + value1;        }        public string HelloWorld2(DataContractType dataContractValue1)        {            return "Hello " + dataContractValue1.FirstName +                                " " + dataContractValue1.LastName;        }    }    [DataContract]    public class DataContractType    {        string firstName;        string lastName;        [DataMember]        public string FirstName        {            get { return firstName; }            set { firstName = value; }        }        [DataMember]        public string LastName        {            get { return lastName; }            set { lastName = value; }        }    }}
           

其他示例