综述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对象
 2var xmlHttp;
 3function newXMLHttpRequest() {
 4
 5    if (window.XMLHttpRequest) {
 6        xmlHttp = new XMLHttpRequest();
 7    } else if (window.ActiveXObject) {
 8        try { 
 9            xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e1) { 
            try {
                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e2) {
            } 
        }
     }
       return xmlHttp;
} 

//发起异步请求
function sendRequest(){
    newXMLHttpRequest();
    var url="AjaxForm.aspx?name="+document.getElementById("txtName").value;
      xmlHttp.open("GET",url,true);
    xmlHttp.onreadystatechange=onSuccessCallBack;
    xmlHttp.send(null);
}

//回调处理函数
function onSuccessCallBack(){
    if (xmlHttp.readyState == 4) 
    {
        if (xmlHttp.status == 200) 
        {
            document.getElementById("result").innerHTML = xmlHttp.responseText;
        } 
        else 
        {
            document.getElementById("result").innerHTML=result.status;
        }
    }
}

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

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

 1protected 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    }
}

 

三、XMLHttp+HttpHandler模式

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

 1public 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    }

    public bool IsReusable
    {
        get
        {
            return false;
        }
    }
}

 

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

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

 1namespace 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
        string text = string.Empty;

        public string GetCallbackResult()
        {
            return text;
        }

        public void RaiseCallbackEvent(string eventArgument)
        {
            text = DateTime.Now.ToLocalTime().ToString();
        }
    }
}

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

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

     

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

 <input type="button" value="Submit" onclick="callServer()" />
 <hr />
 <div id="result">
 
 </div>

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

五、AJAX框架模式

     此模式，顾名思义就是使用成型的AJAX框架来开发AJAX应用。如：JQuery,ASP.NET AJAX等等。具体的使用我在这里就不在做重复的示例和介绍了，有兴趣的朋友可以看看我写的其他有关AJAX框架的文章。

     相关文章：JavaScript与Web Service组合实现无刷新交互   ----使用ASP.NET AJAX
                   ASP.NET MVC中使用AJAX(XMLHttpRequest、Microsoft AJAX Library......)  ----包括JQuery

参考文献:http://aspalliance.com/1740_Summarizing_AJAX_Patterns_Under_ASPNET

示例下载：点击下载示例代码