淺析Ajax的四種開發模式

摘 要:Ajax的主要特點在于異步交互，更新web頁面的局部信息。本文分析了Ajax的實現原理，通過實例介紹了Ajax常用的四種開發模式。

關鍵詞:異步交互Ajax開發模式

中圖分類號:TP393.02文獻標識碼:A文章編號:1674-098X(2011)01(a)-0028-02

在傳統的web應用中，用戶使用瀏覽器瀏覽網頁，瀏覽器等待刷新，當網頁刷新很慢時，屏幕內容一片空白，用戶只能在屏幕前等待瀏覽器的響應。這是因為傳統的web應用采用同步交互過程，即用戶首先向服務器發送一個請求，服務器接收到用戶的請求后開始執行用戶請求的操作，最后將結果返回給瀏覽器。在服務器處理時，用戶只能等待。這是一種不連貫的用戶體驗。

當負載較小時，這種方式沒有體現出什么問題。可是當負載較大時，響應時間可能比較長，用戶等待時間也較長。另外，有時用戶只需要更新頁面的部分數據，而不需要更新整個頁面。在軟件設計越來越人性化的時候，我們應該通過一定的方法來改進用戶體驗。由此產生了異步的工作方式。例如在輸入表單時，在異步的工作方式下，當用戶輸入部分內容的時候，服務器可以先檢查輸入的內容。異步交互、局部更新正是Ajax可以實現的功能。

1 Ajax的實現原理

Ajax應用程序的加載和傳統的web應用程序沒什么區別:首先，某個用戶操作引發了瀏覽器的一次HTTP請求。然后服務器處理這個請求。生成合適的HTML、CSS以及Javascript，并發送至客戶端。最后，客戶端瀏覽器將這一段HTML顯示出來。

隨后，用戶在該Ajax頁面上的后續操作將和傳統web頁面完全不同。用戶的操作將不會引發瀏覽器的另一次HTTP請求，取而代之的是將引發客戶端的某段JavaScript代碼的執行。一次用戶操作的全過程可以分為7個步驟:

(1)用戶在頁面上執行了某個操作，例如點擊某個按鈕等;

(2)根據用戶的操作，頁面發出相應的DHTML事件;

(3)調用注冊到該DHTML事件的客戶端JavaScript事件處理函數，其中初始化了一個用以向服務器發送異步請求的XMLHttpRequest對象，同時指定一個回調函數，當服務器端的響應返回時，將自動調用該回調函數;

(4)服務器收到XMLHttpRequest對象的請求后，開始根據請求進行一系列的處理;

(5)處理完畢，服務器返回客戶端所需要的數據;

(6)數據到達客戶端之后，執行JavaScript回調函數，并根據返回的數據對用戶界面進行更新。

(7)用戶看到界面的變化。

在整個過程中，用戶并沒有被阻塞，依然可以瀏覽當前頁面的其他部分，甚至還可以再引發事件并觸發另一個與服務器的異步交互過程。這種模式即非阻塞的異步通信模式，在用戶體驗方面有很大的進步。

2 Ajax的開發模式

目前，Ajax技術沒有統一的開發模式。不同的開發模式針對不同的Ajax項目在實現上有一些差別。下面介紹Ajax常見的四種開發模式。

2.1 XMLHTTP+WebForms

XMLHTTP+WebForms是使用Ajax技術進行web應用開發的最基本方法。在這種模式下，通過JavaScript去操作XMLHttpRequest對象，發送異步請求到服務器端。另一方面，在服務器端可以直接接受XMLHttpRequest的請求。并根據請求進行相對應的處理，處理完成后返回相應的執行結果給XMLHttpRequest對象。最后再直接使用JavaScript語言代碼將返回的結果顯示出來。下面用這種方法實現一個輸入小寫字母，點擊按鈕，轉換為大寫字母輸出的頁面。如圖 1所示。

主要代碼如下:

(1) 客戶端

客戶端里創建XMLHttpRequest對象以及發起異步請求、回調處理。

創建XMLHttpRequest對象。

varxmlHttp=1;

function creatXMLHTTP()

{

//根據瀏覽器的不同，創建XMLHttpRequest對象。

}

發起異步請求。

function sendRequest(url)

{creatXMLHTTP();

xmlHttp.open(\"GET\"，url，true);

xmlHttp.onreadystatechange=httpStateChange; //指定響應函數

xmlHttp.send(1);//發送請求

}

回調處理函數。

functionhttpStateChange(){

if(xmlHttp.readyState==4){//判斷對象狀態

if(xmlHttp.status==200)//信息已經成功返回、開始處理信息

{vara=xmlHttp.responseText;

document.form1.result.value=a;//顯示服務器傳回的信息

} else{

window.alert(\"異常\");

}}}

functionusercheck()

{

vartest=document.form1.testmsg.value;

if(test==\"\")

{window.alert(\"輸入不能為空\");

return1;}

else{

varurl=\"ajax.aspx?test=\"+test;

sendRequest(url)

}

頁面上的控件代碼如下:

提交給ajax.aspx頁面

(2)服務器端

服務器端就是一個WebForm，接受客戶端傳遞的參數然后將其轉化為大寫后返回給客戶端。本例中WebForm為ajax.aspx。

protected void Page_Load(object sender， EventArgs e){

if (!IsPostBack){

string test = Request.QueryString[\"test\"].ToString().Trim();

string result = test.ToUpper();

Response.Write(result);

Response.Flush();

Response.End();

}}

2.2 XMLHTTP+HttpHandler

XMLHTTP+HttpHandler模式與XMLHTTP+WebForms模式相比，客戶端的實現并沒有變化，還是直接使用JavaScript語言代碼操作XMLHTTP對象，但在服務器端已經改用HttpHandler接收和處理異步請求。下面用這種方式來實現小寫轉大寫的例子。

(1)客戶端

在上面的例子中只需要更改發送請求函數的url。主要代碼如下:

function sendRequest(){

creatXMLHTTP();

var url=\"hello.ashx?name=\"+document.getElementById(‘testmsg’).value;

xmlHttp.open(\"GET\"，url，true);

xmlHttp.onreadystatechange=onSuccessCallBack;

xmlHttp.send(1);

}

(2)服務器端

服務器端編寫一般處理程序文件hello.ashx，代碼如下:

public class hello: IHttpHandler{

public void ProcessRequest(HttpContext context){

context.Response.ContentType=\"text/plain\";

string name=context.Request.QueryString[\"name\"];

context.Response.Write(name.ToUpper());}

public bool IsReusable{

get{

return 1;}}}

2.3 CallBack

CallBack是ASP.NET 2.0新增的開發方式。它要求頁面實現ICallbackEventHandler接口。ASP.NET的回調，就是使用ICallbackEventHandler接口。它包括兩個方法:RaiseCallbackEvent0方法執行對異步請求的服務器端處理;GetCallBackResult0方法返回異步請求的處理結果。通過實現RaiseCallbackEvent()和GetCallbackResult()方法來實現回調，最后通過調用ClientScript.GetCallbackEventReference()方法實現Ajax效果。下面用這種方式來實現小寫轉大寫的例子。

(1)客戶端

客戶端通過調用ClientScript.GetCallbackEventReference()方法，來實現Ajax，主要代碼如下:

接收服務器返回的數據，在頁面顯示出來。

function ReceiveServerData(arg， context)

{

document.getElementById (\"result\").value=arg;

}

向服務器發送請求，設置回調處理函數。

function CallTheServer(arg， context)

{

<%= ClientScript.GetCallbackEventReference(this， \"arg\"， \"ReceiveServerData\"， \"context\") %>;

}

button控件通過調用CallTheServer去回調服務器端的方法，頁面上的主要控件代碼如下:

提交給服務器的CallBack

(2)服務器端

服務器端實現了ICallbackEventHandler，在RaiseCallbackEvent方法里接收瀏覽器以CallBack機制傳過來的值，GetCallbackResult()將大寫值返回給瀏覽器。主要代碼如下:

public partial class Default8 : System.Web.UI.Page， ICallbackEventHandler

{

string str = \"\";

public void RaiseCallbackEvent(String eventArgument)

{

str = eventArgument.ToUpper();}// 返回給CallBack的字符串

public string GetCallbackResult()

{return str;}}

2.4 AJAX框架

Ajax框架現在已有很多，通常情況下將基于瀏覽器的應用框架稱為客戶端框架，如Prototype、DOJO、qooxdoo、Bindows等;還有基于服務器端的框架，如ASP．NET Ajax、Ajax．NET、WebORB for．NET、ComfortASP．NET、AjaxAspects等。通過使用Ajax框架進行web開發可以提高效率，并且代碼穩定性好。

ScriptManager是放置在web窗體上的服務器端控件，在ASP.NET Ajax中發揮核心作用。UpdatePanel控件的使用可以大大減少客戶端腳本的編寫工作量，它不需要編寫任何客戶端腳本，只要在一個頁面上添加幾個UpdatePanel控件和一個ScriptManager控件就可以實現頁面的局部更新。下面使用ASP.NET Ajax來實現小寫轉大寫的例子。在頁面添加ScriptManager和UpdatePanel控件來實現頁面的局部更新。頁面主要代碼如下:

服務器端代碼如下:

protected void Button1_Click(object sender， EventArgs e)

{ string a = TextBox1.Text.Trim();

string b = a.ToUpper();

TextBox2.Text = b;

}

3 結束語

Ajax的四種開發模式各有特點，前三種方法相比成型的Ajax框架來說使用起來比較麻煩，沒有框架那么直接，不過各自也有各自的好處。所有的Ajax框架都會調用一大堆并不需要的代碼，雖然開發效率增加了，但會嚴重影響運行效率。如果JavaScript設計得好，效率會比使用一些Ajax框架高出很多。在我們的實際開發中應該根據實際需求來選擇適合自己的Ajax模式。

參考文獻

[1]陳黎夫.ASP.NET Ajax程序設計[M].人民郵電出版社，2007.

[2]凌宗軍．Ajax級聯菜單的實現[J]．科技創新導報，2009，16:25．

[3]王玉娟．AJAX技術及其優缺點[J]．科技創新導報，2009，8:16．