利用Ajax.dll进行Ajax开发

最新推荐文章于 2016-10-22 16:27:58 发布

转载最新推荐文章于 2016-10-22 16:27:58 发布 · 718 阅读

文章标签：

#ajax #javascript #xmlhttprequest #callback #服务器 #function

.Net 专栏收录该内容

14 篇文章

订阅专栏

利用Ajax.dll进行Ajax开发

附录

0、它是如何工作的

利用 Ajax包装器，ASP.NET开发人员可以快速方便的部署很容易利用AJAX功能的页面。

Ajax依靠代理（broker）指派和处理往返服务器的请求，对此，包装器的目的是隐藏 XmlHttpRequest对象的实现，包装器本身通过将.NET函数标记为 Ajax方法来工作。标记之后，AJAX就创建对应的JavaScript函数，这些函数（和任何JavaScript函数一样）作为代理可以在客户端使用 XmlHttpRequest调用。这些代理再映射回服务器端函数。

假设有一个.NET函数：

 
    0ublic int Add(int  firstNumber, int  secondNumber)  
 
    1{ 
 
    2   return firstNumber + secondNumber; 
 
    3}

包装器将自动创建名为“Add”、带有两个参数的JavaScript函数。使用JavaScript（在客户机上）调用该函数时，请求将传递给服务器并把结果返回给客户机。

1、创建服务器端函数

⑴、项目中引用 Ajax.dll文件。

⑵、编写函数代码

 
    00namespace  ForAjax 
 
    01{ 
 
    02    public class Example  
 
    03    {  
 
    04        [Ajax.AjaxMethod()] 
 
    05        public static int ServerSideAdd(int firstNumber, int secondNumber) 
 
    06        { 
 
    07            return firstNumber + secondNumber; 
 
    08        } 
 
    09    }  
 
    10}

函数中包含 [Ajax.AjaxMethod()]属性集。该属性告诉包装器这些方法创建javaScript代理，以便在客户端调用。

2、客户端调用

⑴、网站中引用 Ajax.dll及服务器项目文件。

⑵、web.config中建立HttpHandler

 
    0<configuration> 
 
    1   <system.web> 
 
    2     <httpHandlers> 
 
    3       <add verb="POST,GET" path="ajax/*.ashx" type="Ajax.PageHandlerFactory, Ajax" /> 
 
    4     </httpHandlers> 
 
    5   </system.web> 
 
    6</configuration>

注：在 IIS7上部署。

 
    0<system.webServer> 
 
    1    <handlers> 
 
    2        <add name="ajax" verb="POST,GET" path="ajax/*.ashx" type="Ajax.PageHandlerFactory, Ajax" /> 
 
    3    </handlers> 
 
    4</system.webServer>

⑶、客户端页面调用

 
    00<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> 
 
    01  
 
    02<html> 
 
    03<head> 
 
    04    <script language="javascript" src="ajax/common.ashx"></script> 
 
    05    <script language="javascript" src="ajax/ForAjax.Example,ForAjax.ashx"></script>  
 
    06    <script language="javascript"> 
 
    07        var response = Example.ServerSideAdd(100,99); 
 
    08        alert(response.value); 
 
    09    </script>   
 
    10</head> 
 
    11  
 
    12<body"> 
 
    13    <form id="form1"> 
 
    14    </form> 
 
    15</body> 
 
    16</html>

其中，"ajax/ForAjax.Example,ForAjax.ashx" 为 "ajax/Namespace.PageClass,AssemblyName.ashx"格式。可以在浏览器中手工导航到src路径（查看源代码，复制粘贴路径）检查是否一切正常。

通过 web.config，我们已经保证所有对 ajax/*.ashx的请求都由自定义的 Ajax包装器处理。包装器负责创建带有两个参数的 JavaScript函数 Sample.ServerSideAdd以供前台调用。

3、回调函数

 
    0Sample.ServerSideAdd(100,99, ServerSideAdd_CallBack);  
 
    1  
 
    2function  ServerSideAdd_CallBack(response){ 
 
    3  if (response.error != null){ 
 
    4    alert(response.error); 
 
    5    return; 
 
    6  }  
 
    7  
 
    8  alert(response.value);  
 
    9}

其中响应对象 response公开了三个主要性质

Value——服务器端函数实际返回的值（无论是字符串、自定义对象还是数据集）。
Error——错误消息，如果有的话。
Request——xml http请求的原始响应。
Context——上下文对象。

4、处理类型

Ajax包装器不仅能处理ServerSideAdd函数所返回的整数。它目前支持 integers、strings、double、booleans、DateTime、DataSets和DataTables，以及自定义类和数组等基本类型。其他所有类型都返回它们的ToString值。

⑴、返回的 DataSets

和真正的.NET DataSet差不多。假设一个服务器端函数返回DataSet，我们可以通过下面的代码在客户端显示其中的内容：

 
    00<script language="JavaScript">  
 
    01//Asynchronous call to the mythical "GetDataSet" server-side  
 
    02function  function getDataSet(){ 
 
    03  AjaxFunctions.GetDataSet(GetDataSet_callback); 
 
    04}  
 
    05  
 
    06function  GetDataSet_callback(response){  
 
    07  var ds = response.value; 
 
    08  if(ds != null &&  typeof(ds) ==  "object" && ds.Tables != null){  
 
    09    var s = new  Array(); 
 
    10    s[s.length] = "<table border=1>"; 
 
    11    for(var i=0; i<ds.Tables[0].Rows.length; i++){ 
 
    12      s[s.length] = "<tr>";  
 
    13      s[s.length] = "<td>" + ds.Tables[0].Rows[i].FirstName + "</td>";  
 
    14      s[s.length] = "<td>" + ds.Tables[0].Rows[i].Birthday + "</td>";  
 
    15      s[s.length] = "</tr>";  
 
    16    }  
 
    17    s[s.length] = "</table>"; 
 
    18    tableDisplay.innerHTML = s.join(""); 
 
    19  }  
 
    20  else { 
 
    21    alert("Error. [3001] " + response.request.responseText); 
 
    22  }  
 
    23} 
 
    24</script>

⑵、返回自定义类

Ajax还可以返回自定义类，唯一的要求是必须用 [Serializable()]属性标记。假设有如下的类：

 
    00[Serializable()] 
 
    01public  class User 
 
    02{ 
 
    03    private int _userId;  
 
    04    private string _firstName; 
 
    05  
 
    06    private string _lastName;  
 
    07    public int userId {  get { return _userId; } } 
 
    08    public string FirstName { get {  return _firstName; } } 
 
    09    public string LastName {  get { return _lastName; } } 
 
    10    public User(int  _userId, string  _firstName, string  _lastName)  
 
    11    {  
 
    12        this._userId = _userId;  
 
    13        this._firstName = _firstName;  
 
    14        this._lastName = _lastName;  
 
    15    }  
 
    16    public User() { } 
 
    17  
 
    18    [AjaxMethod()] 
 
    19    public static User GetUser(int userId) 
 
    20    {  
 
    21        //Replace this with a DB hit or something :) 
 
    22        return new User(userId,  "Michael", "Schwarz"); 
 
    23    }  
 
    24}

我们可以通过调用 RegisterTypeForAjax注册 GetUser代理：

 
    0private  void Page_Load(object sender, EventArgs e) 
 
    1{  
 
    2    Utility.RegisterTypeForAjax(typeof(User));  
 
    3}

这样就可以在客户端异步调用 GetUser：

 
    00<script language="javascript">  
 
    01function  getUser(userId){  
 
    02    User.GetUser(GetUser_callback); 
 
    03}  
 
    04  
 
    05function  GetUser_callback(response){  
 
    06    if (response != null && response.value != null){  
 
    07        var user = response.value;  
 
    08        if (typeof(user) == "object"){  
 
    09            alert(user.FirstName + " " + user.LastName);  
 
    10        }  
 
    11     }  
 
    12} 
 
    13  
 
    14getUser(1); 
 
    15</script>

响应中返回的值实际上是一个对象，公开了和服务器端对象相同的属性（FirstName、LastName和UserId）。

⑶、返回 Unicode字符

Ajax .NET包装器能够从服务器向客户机返回Unicode字符。为此，数据在返回之前必须在服务器上用html编码。比如：

 
    0[Ajax.AjaxMethod] 
 
    1public  string Test1(string name, string email, string comment) 
 
    2{ 
 
    3    string html = "";  
 
    4    html += "Hello " + name + "<br>";   
 
    5    html += "Thank you for your comment <b>";  
 
    6    html += System.Web.HttpUtility.HtmlEncode(comment);  
 
    7    html += "</b>.";   
 
    8    return html; 
 
    9}

⑷、自定义转换器

我们已经看到，Ajax .NET包装器能够处理很多不同的.NET类型。但是除了大量.NET类和内建类型以外，包装器对不能正确返回的其他类型仅仅调用ToString()。为了避免这种情况，Ajax .NET包装器允许开发人员创建对象转换器，用于在服务器和客户机之间平滑传递复杂对象。

5、会话访问

 
    0[Ajax.AjaxMethod(Ajax.HttpSessionStateRequirement.Read)] 
 
    1public  void DocumentReleased() 
 
    2{  
 
    3    if (System.Web.HttpContext.Current.Session["DocumentsWaiting"] == null)  
 
    4    {  
 
    5       //... 
 
    6    }                 
 
    7}