?本文內容:

一、導言
二、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");
10????????}?catch?(e1)?{?
11????????????try?{
12????????????????xmlHttp?=?new?ActiveXObject("Microsoft.XMLHTTP");
13????????????}?catch?(e2)?{
14????????????}?
15????????}
16?????}
17???????return?xmlHttp;
18}?
19
20//發起異步請求
21function?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//回調處理函數
30function?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，接受客戶端傳遞的參數然后將其轉化為大寫后返回給客戶端。

?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????}
10}

?

三、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????}
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效果。看看下面這個示例：

?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
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">
?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")?%>;
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等等。具體的使用我在這里就不在做重復的示例和介紹了，有興趣的朋友可以看看我寫的其他有關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

示例下載：點擊下載示例代碼

總結

以上是生活随笔為你收集整理的综述ASP.NET下的AJAX模式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。