AJAX精要
本文介绍AJAX的基础概念，包括依赖服务器处理请求的方式、封装类的使用、安装步骤及配置详解。并通过实例展示如何创建和调用异步客户端函数。
程守华 译
概述
AJAX依靠服务器作为中介来分发和处理请求。为了完成这项工作，.net封装类依赖于客户端的请求对象，而xmlHttpRequest对象被大部分的浏览器支持，因此使用这个对象是一个不错的解决方案。因为封装的目的是隐藏xmlHttpRequest的实现，故我们不讨论他的实现细节。
封装类是通过在.net的方法上增加AJAX属性标记来实现的，一旦被标记，AJAX创建客户端的javascript函数（这类似于客户端编写的javascript函数），并使用xmlhttprequest创建服务器代理，这个代理映射客户端的函数到服务器的处理函数。
复杂吗？不会的，让我们看看下面的简单例子，给出的.net 函数
| 'VB.Net public function Add(firstNumber as integer, secondNumber as integer) as integer return firstNumber + secondNumber end sub |
| //C# public int Add(int firstNumber, int secondNumber) { return firstNumber + secondNumber; } |
Ajax.net会立即自动的创建带有两个参数、名字为Add的javascript函数，当客户端调用这个javascript函数时，请求将从后台送到服务器端并从将计算结果返回给客户端。
初始安装
我们首先从如何把”.dll”安装到你的项目开始，当然，如果你了解如何使用，这一节可以跳过。
如果你还没有Ajax.dll，可以首先下载AJAX的最新版本。解压文件放到可以被你的项目引用的地方，在.net项目中，添加上对其的引用，然后就可以开始使用ajax.dll封装进行开发了。
| <shapetype id="_x0000_t75" coordsize="21600,21600" o:spt="75" o:preferrelative="t" path="m@4@5l@4@11@9@11@9@5xe" filled="f" stroked="f"><stroke joinstyle="miter"></stroke><formulas><f eqn="if lineDrawn pixelLineWidth 0"></f><f eqn="sum @0 1 0"></f><f eqn="sum 0 0 @1"></f><f eqn="prod @2 1 2"></f><f eqn="prod @3 21600 pixelWidth"></f><f eqn="prod @3 21600 pixelHeight"></f><f eqn="sum @0 0 1"></f><f eqn="prod @6 1 2"></f><f eqn="prod @7 21600 pixelWidth"></f><f eqn="sum @8 21600 0"></f><f eqn="prod @7 21600 pixelHeight"></f><f eqn="sum @10 21600 0"></f></formulas><path o:extrusionok="f" gradientshapeok="t" o:connecttype="rect"></path><lock v:ext="edit" aspectratio="t"></lock></shapetype><shape id="_x0000_i1025" style="width: 24.75pt; height: 24.75pt;" type="#_x0000_t75"><imagedata src="file:///C:%5CDOCUME~1%5CADMINI~1%5CLOCALS~1%5CTemp%5Cmsohtml1%5C01%5Cclip_image001.jpg" o:title="info"></imagedata></shape> | 如果你在安装引用时遇到了麻烦，可以参考这个链接的说明: |
设置HttpHandle
为了使其可以工作，第一步必须做的是在web.config中安装设置封装包的HttpHandle，不去详细解释HttpHandle是如何工作的，我们只需要了解他们可以用来处理asp.net请求。例如，所有的目的为*.aspx的请求可以通过System.Web.UI.PageHandlerFactory类发送到控制句柄，简单的说，我们把任何向ajax/*.ashx的请求发送到Ajax.PageHandlerFactory的请求处理句柄：
| <configuration> <system.web> <httpHandlers> <add verb="POST,GET" path="<city w:st="on"><span class="Code-StringChar"><span lang="EN-US" style="font-size: 9pt;">ajax</span></span></city>/*.ashx" </httpHandlers> ... <system.web> </configuration> |
上面的代码告诉asp.net把任何匹配到特定的路径（ajax/*.ashx）请求发送到Ajax.PageHandlerFactory产生的HttpHandle，而不再是默认的Handler factory。你不需要创建ajax子目录，这是一个只用来临时使用的虚拟的目录，因此别的HttpHandler可以用他们自己的目录来使用.ashx扩展名的文件。
配置页面
现在我们准备好开始代码编写了。打开一个新的网页或者已经存在的页面，在其codebehind文件中的Page_Load事件中增加以下代码：
| 'vb.net Public Class Index Inherits System.Web.UI.Page
Private Sub Page_Load(sender As Object, e As EventArgs) Handles MyBase.Load Ajax.Utility.RegisterTypeForAjax(GetType(Index)) '... end sub '... End Class |
| //C# public class Index : System.Web.UI.Page{ private void Page_Load(object sender, EventArgs e){ Ajax.Utility.RegisterTypeForAjax(typeof(Index)); //... } //... } |
对RegisterTypeForAjax方法的调用在页面产生如下的javascript代码（另外一种选择，你也可以人工在页面上添加如下的javascript代码）
| <script language="javascript" src="ajax/common.ashx"></script> <script language="javascript" |
上面这段代码的粗体部分NAMESPACE.PAGECLASS,ASSEMBLYNAME含义如下
| NAMESPACE.PAGECLASS | 当前页面的命名空间和类 |
| ASSEMBLYNAME | 当前页面的程序集的名称 |
下面是在AjaxPlay项目中sample.aspx的示例输出：
| <%@ Page Inherits="AjaxPlay.Sample" Codebehind="sample.aspx.cs" ... %> <html> <head> <script language="javascript" src="ajax/common.ashx"></script> <script language="javascript" </head> <body> <form id="Form1" method="post" runat="server"> </form> </body> </html> |
你可以测试一下，人工通过浏览器将src path(通过查看源文件并copy)打开，一切都能正常的工作。如果输出了无意义的文本表示到目前为止是正确的，如果输出asp.net错误，则表示中间出现了错误。
即使你不了解HttpHandle的工作方式，也应该可以理解上面的描述。通过web.config,我们可以确保发送向ajax/*.ashx的请求由我们自定义的句柄来处理，很显然，两个脚本标记由自定义句柄处理。
编写服务端函数
现在我们编写服务器端函数，他们可以被客户端异步的调用。尽管现在还不能支持全部的返回类型，我们仍坚持服务器端添加功能。在codebehind文件的页面类里，添加下面的方法：
| 'VB.Net <Ajax.AjaxMethod()> _
Public Function ServerSideAdd (byval firstNumber As Integer, byval secondNumber Return firstNumber + secondNumber End Function |
| //C# [Ajax.AjaxMethod()]
public int ServerSideAdd(int firstNumber, int secondNumber) { return firstNumber + secondNumber; } |
注意，这个函数有Ajax.AjaxMethod()定制属性，属性服务会告知ajax封装类为此方法创建一个javascript代理，这样才能被客户端调用。
定制客户端调用
接下来在客户端用javascript调用函数。Ajax封装类会创建一个javascript函数，带有两个参数，名字是 类名.ServerSideAdd。作为最基本的功能，我们所需要作的只是调用这个方法并且传递参数：
| <%@ Page Inherits="AjaxPlay.Sample" Codebehind="sample.aspx.cs" ... %> <html> <head> <script language="javascript" src="ajax/common.ashx"></script> <script language="javascript" </head> <body> <form id="Form1" method="post" runat="server"> <script language="javascript"> var response = Sample.ServerSideAdd(100,99); alert(response.value); </script> </form> </body> </html> |
当然，我们不能把这么强大的功能仅仅用来通过alert来提醒浏览者，这就是为什么所有的客户端代理（如 类名.ServerSideAdd函数）同时带有一个额外的定制属性。这个属性是用来处理服务器响应的回调函数：
| Sample.ServerSideAdd(100,99, ServerSideAdd_CallBack); function ServerSideAdd_CallBack(response){ if (response.error != null){ alert(response.error); return; } alert(response.value); } |
从上面的代码中可以看出，我们为ServerSideAdd函数增加了一个额外参数ServerSideAdd_CallBack，这个参数就是用来处理服务器端响应的客户端函数。这个callback函数接受一个带有四个关键属性的response对象：
| value | 服务器端函数执行的返回值（可能是一个字符串、自定义对象或者dataset） |
| error | 如果发生错误，则返回错误信息. |
| request | 原始的xmlHttpRequest请求 |
| context | 一个上下文对象 |
我们首先应该检查是否有错误发生，你可以通过在服务器端函数抛出异常来实现这个error属性。在上面这个例子中，我们简单的alert了一个值，就是value属性；request属性可以用来取得额外的信息（见下面的表格）
| <shape id="_x0000_i1026" style="width: 24.75pt; height: 24.75pt;" type="#_x0000_t75"><imagedata src="file:///C:%5CDOCUME~1%5CADMINI~1%5CLOCALS~1%5CTemp%5Cmsohtml1%5C01%5Cclip_image001.jpg" o:title="info"></imagedata></shape> | 如果你想了解更多的关于XmlHttpRequest的知识，可以查看下面的链接： http://www.quirksmode.org/blog/archives/2005/02/xmlhttp_linkdum.html |
处理类型
返回一个复杂类型
Ajax可以支持除了我们上面ServerSideAdd函数返回的Int值以外很多类型。他可以直接支持integers, strings, double, booleans, DateTime, DataSets 和 DataTables，也支持简单的自定义类型和数组。其他的类型通过其ToString方式来返回字符串。
返回DataSet的工作就像真正的.net Dataset.给出一个返回DataSet的服务器端函数，我们可以通过下面的方法在客户端显示：
| <script language="JavaScript"> //Asynchronous call to the mythical "GetDataSet" server-side function function getDataSet(){ AjaxFunctions.GetDataSet(GetDataSet_callback); } function GetDataSet_callback(response){ var ds = response.value; if(ds != null && typeof(ds) == "object" && ds.Tables != null){ var s = new Array(); s[s.length] = "<table border=1>"; for(var i=0; i<ds.Tables[0].Rows.length; i++){ s[s.length] = "<tr>"; s[s.length] = "<td>" + ds.Tables[0].Rows[i].FirstName + "</td>"; s[s.length] = "<td>" + ds.Tables[0].Rows[i].Birthday + "</td>"; s[s.length] = "</tr>"; } s[s.length] = "</table>"; tableDisplay.innerHTML = s.join(""); } else{ alert("Error. [3001] " + response.request.responseText); } } </script> |
Ajax也可以支持自定义类，但是需要这个类是可以被序列化的。如下面的类：
| [Serializable()]
public class User{ private int _userId; private string _firstName; private string _lastName;
public int userId{ get { return _userId; } } public string FirstName{ get { return _firstName; } } public string LastName{ get { return _lastName; } }
public User(int _userId, string _firstName, string _lastName){ this._userId = _userId; this._firstName = _firstName; this._lastName = _lastName; } public User(){}
[AjaxMethod()] public static User GetUser(int userId){ //Replace this with a DB hit or something :) return new User(userId,"Michael", "Schwarz"); } } |
我们需要通过调用RegisterTypeForAjax向服务器注册GetUser代理
| private void Page_Load(object sender, EventArgs e){ Utility.RegisterTypeForAjax(typeof(User)); } |
在客户端我们可以通过这样的方式调用GetUser函数：
|
<script language="javascript"> function getUser(userId){ User.GetUser(GetUser_callback); } function GetUser_callback(response){ if (response != null && response.value != null){ var user = response.value; if (typeof(user) == "object"){ alert(user.FirstName + " " + user.LastName); } } } getUser(1); </script> |
返回值同服务器端对象一样有三个属性（FirstName, LastName and UserId）。
译者注：其他的类型只能由开发者通过在服务器端函数在返回值时自定义转换为ajax支持的类型来实现了，ajax推荐使用ToString方法。
扫一扫
131
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
