综述ASP.NET下的AJAX模式

 本文内容:

一、导言
二、XMLHttp+WebForm模式

三、XMLHttp+HttpHandler模式

四、ASP.NET 2.0/3.5回调模式

五、AJAX框架模式
--------------------------------------------------------------------------------------------------

一、导言
     在这篇文章中，将介绍在ASP.NET环节下的几种常用的AJAX模式。例如：XMLHttpRequest+WebForms,XMLHttpRequest+HttpHandlers,CallBacks,以及使用AJAX框架等，下面将以示例结合的方式展开介绍这一系列常用模式。本文之后将提供示例代码下载。

二、XMLHttp+WebForm模式

     或许大家都比较清楚的记得，XMLHttp+WebForm模式是ASP.NET下最原始的AJAX模式。在这种模式下，是通过JavaScript去操作XMLHttpRequest对象，发送异步请求到服务器端的WEB窗体的形式。另一方面，在服务端创建WEB窗体可以直接用来接受XMLHTTP的请求。以此，浏览器的XMLHttpRequest对象便成了服务器端和客户端的一种良好的沟通方式。

     在这一节将结合一个简单的示例来介绍，希望能够帮助大家更直观的理解XMLHttp+WebForm模式的这种AJAX模式。

     （1）、客户端

          客户端里创建XMLHttpRequest对象以及发起异步请求我们将其JavaScript封装在一个Ajax.js文件里。这样部分方法可以达到重用，在Ajax.js里有三个方法，newXmlHttpReqeust,sendRequest和onSuccessCallBack方法，详细如下：

 1 // 创建XMLHttpRequest对象
 2 var  xmlHttp;
 3 function  newXMLHttpRequest()  {
 4
 5    if (window.XMLHttpRequest) {
 6        xmlHttp = new XMLHttpRequest();
 7    } else if (window.ActiveXObject) {
 8        try { 
 9            xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
10        } catch (e1) { 
11            try {
12                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
13            } catch (e2) {
14            } 
15        }
16     }
17       return xmlHttp;
18}  
19
20 // 发起异步请求
21 function  sendRequest() {
22    newXMLHttpRequest();
23    var url="AjaxForm.aspx?name="+document.getElementById("txtName").value;
24      xmlHttp.open("GET",url,true);
25    xmlHttp.onreadystatechange=onSuccessCallBack;
26    xmlHttp.send(null);
27}
28
29 // 回调处理函数
30 function  onSuccessCallBack() {
31    if (xmlHttp.readyState == 4) 
32    {
33        if (xmlHttp.status == 200) 
34        {
35            document.getElementById("result").innerHTML = xmlHttp.responseText;
36        } 
37        else 
38        {
39            document.getElementById("result").innerHTML=result.status;
40        }
41    }
42}

     客户端调用异步发起请求前首先执行创建XmlHttpRequest对象的方法，最后通过回调函数更新页面显示。
     （2）、服务端

          服务端就是一个WebForm，接受客户端传递的参数然后将其转化为大写后返回给客户端。

 1 protected   void  Page_Load( object  sender, EventArgs e)
 2 {
 3    if (!IsPostBack)
 4    {
 5        string name = Request.QueryString["name"];
 6        Response.Write(name.ToUpper());
 7        Response.Flush();
 8        Response.End();
 9    }
10}

 

三、XMLHttp+HttpHandler模式

     此模式和上一种形式上没有太大的差别，只是服务端的处理对象不同，一个是WebForm一个则是HttpHandler。在HttpHandler里通过Request对象获取请求的参数，然后通过Response对象将结果返回，是直接通过HttpHandler的ProcessRequest方法来处理的。OK，既然是这样，那么我们只需要在上一模式的基础上将请求Url修改为HttpHandler就OK了，如下：

 1 public   class  AjaxHandler : IHttpHandler
 2 {
 3
 4    public void ProcessRequest(HttpContext context)
 5    {
 6        context.Response.ContentType = "text/plain";
 7        string name = context.Request.QueryString["name"];
 8        context.Response.Write(name.ToUpper());
 9    }
10
11    public bool IsReusable
12    {
13        get
14        {
15            return false;
16        }
17    }
18}

 

四、ASP.NET 2.0/3.5回调模式

     ASP.NET的回调，其实很好理解，就是使用ICallbackEventHandler接口，通过实现RaiseCallbackEvent()和GetCallbackResult()方法来实现回调，最后通过调用ClientScript.GetCallbackEventReference()方法实现Ajax效果。看看下面这个示例：

 1 namespace  AjaxPattern._3
 2 {
 3    public partial class AjaxForm : System.Web.UI.Page,ICallbackEventHandler
 4    {
 5        protected void Page_Load(object sender, EventArgs e)
 6        {
 7
 8        }
 9
10        string text = string.Empty;
11
12        public string GetCallbackResult()
13        {
14            return text;
15        }
16
17        public void RaiseCallbackEvent(string eventArgument)
18        {
19            text = DateTime.Now.ToLocalTime().ToString();
20        }
21    }
22}

      上 面便是实现了ICallbackEventHandler，在RaiseCallbackEvent方法里将当前时间返回，客户端通过调用 ClientScript.GetCallbackEventReference()方法，来实现Ajax，客户端代码如下：

 1 < script type = " text/javascript " >
 2 function  receiveServerData(arg,context)
 3 {
 4    document.getElementById("result").innerHTML=arg;
 5}
 6
 7 function  callServer(arg,context)
 8 {
 9    <%=ClientScript.GetCallbackEventReference(this,"arg","receiveServerData","context") %>;
10}
11 < / script>

     

     现在我们就可以通过调用callServer方法去回调服务端的方法了，html如下：

1  < input  type ="button"  value ="Submit"  onclick ="callServer()"   />
2  < hr  />
3  < div  id ="result" >
4 
5  </ div >

     以上三种模式相比成型的AJAX框架来说使用起比较麻烦，没有框架那么直接，通过调用一个请求方法就搞定AJAX请求。不过各自也有各自的好处，在我们的实际开发中应该根据实际需求来选择适合自己的AJAX模式。  

五、AJAX框架模式

     此模式，顾名思义就是使用成型的AJAX框架来开发AJAX应用。如：JQuery,ASP.NET AJAX等等。示例下载：点击下载示例代码