基于ＡＳＰ．ＮＥＴ中ＡＪＡＸ的Ｗｅｂ新應(yīng)用模型的設(shè)計(jì)

[摘 要] 在傳統(tǒng)的Web應(yīng)用程序中，把所有的處理都放到服務(wù)器來完成，由服務(wù)器進(jìn)行運(yùn)行管理，這在相當(dāng)?shù)某潭壬鲜艿搅朔?wù)器處理能力和網(wǎng)絡(luò)帶寬的制約。Ajax技術(shù)方便的運(yùn)用在.Net框架中，給用戶帶來了一套全新的快速響應(yīng)的Web應(yīng)用模型。本文主要介紹了Ajax的基本原理，在Asp.Net框架中，對Ajax組件的設(shè)計(jì)方法也進(jìn)行了闡述和分析。

[關(guān)鍵詞] AJAX ASP.NET WEB 異步通信

一、引言

在瀏覽網(wǎng)頁時，瀏覽者經(jīng)常會遇到網(wǎng)頁打開很慢的問題。用戶使用“打開，刷新，再打開，再刷新”的方式瀏覽網(wǎng)頁，當(dāng)用戶提交一個網(wǎng)頁中填寫的表單內(nèi)容時，用戶向服務(wù)器發(fā)出請求，服務(wù)器接到Http請求后，需要完成分析請求與處理內(nèi)容的過程后才將響應(yīng)回復(fù)給客戶端用戶，這樣用戶的每個操作都要接收一次數(shù)據(jù)，并刷新整個頁面。隨著服務(wù)器同時訪問用戶的增多，服務(wù)器的處理任務(wù)就急速增加，此時，用戶的客戶端大部分都在等待響應(yīng)。這樣既給服務(wù)器帶來巨大的運(yùn)行負(fù)擔(dān)，也沒有利用起客戶端空閑等待的時間。在目前眾多的web應(yīng)用中，如Java applet和Servlet結(jié)構(gòu)，都未能很好的解決這個問題。Ajax技術(shù)的提出，給網(wǎng)絡(luò)Web應(yīng)用帶來了新模型，較好的解決了客戶端和服務(wù)器端的通信問題。

二、AJAX技術(shù)

1.AJAX的含義

Ajax指異步JavaScript與XML技術(shù)，是Asynchronous JavaScript and XML首字母的縮寫。它不是一種新的編程語言和技術(shù)，實(shí)際是由幾項(xiàng)技術(shù)按一定的方式組合在共同的協(xié)作中發(fā)揮各自的作用的結(jié)果。Ajax主要將HTML（或XHTML）和層疊樣式表作為表達(dá)信息，利用文檔對象模型（DOM）、JavaScript動態(tài)地顯示和與頁面進(jìn)行交互，通過XMLHttpRequest對象與Web服務(wù)器異步交換和處理數(shù)據(jù)，是一種創(chuàng)建交互式Web應(yīng)用程序的開發(fā)技術(shù)。

2.AJAX的工作原理和特點(diǎn)

Ajax實(shí)際是在用戶和服務(wù)器之間加了一個中間層，使用戶操作與服務(wù)器響應(yīng)異步化。并不是所有的用戶請求都提交給服務(wù)器，像一些數(shù)據(jù)驗(yàn)證和數(shù)據(jù)處理等都交給Ajax引擎來做，只有確定需要從服務(wù)器讀取新數(shù)據(jù)時再由Ajax引擎代為向服務(wù)器提交請求。

Ajax的根本理念是“按需取數(shù)據(jù)”，只和服務(wù)器交換有用的數(shù)據(jù)，而不是包括用戶界面在內(nèi)的整個頁面，最大可能地減少了冗余請求和響應(yīng)對服務(wù)器造成的負(fù)擔(dān)。Ajax的特點(diǎn)有:（1)瀏覽器與服務(wù)器進(jìn)行異步數(shù)據(jù)交互;（2)使用XML封裝數(shù)據(jù)，便于使用XML文檔對象模型（DOM)分析處理處理數(shù)據(jù);（3)基于JavaScript腳本，從服務(wù)器端獲取數(shù)據(jù)，解析數(shù)據(jù)，渲染用戶界面，響應(yīng)用戶事件的任務(wù)全部使用JavaScript完成;（4)根據(jù)XML數(shù)據(jù)及用戶事件更新局部頁面元素，使Web中的界面和應(yīng)用程序分離;（5)利用這種技術(shù)，在服務(wù)器端和用戶客戶端都減少等待時間，因此對于用戶和營運(yùn)商來說是雙贏的。

3. AJAX模型與傳統(tǒng)模型對比

傳統(tǒng)的Web應(yīng)用，每一次請求都需要服務(wù)器返回完整的Http頁面，即用戶都要時間來等待整個頁面的更新，而用戶實(shí)際想得到的數(shù)據(jù)量只是網(wǎng)頁的一小部分。為了保持服務(wù)器和用戶客戶端的同步通信，它們兩者有相當(dāng)一部分時間都在等待中。傳統(tǒng)的Web模式不僅降低了用戶的瀏覽速度，而且極大地浪費(fèi)了本來就不寬裕的網(wǎng)絡(luò)帶寬。

在新型的Ajax異步通信模型中，用戶的客戶端不必等服務(wù)器響應(yīng)完畢才開始下一步操作，而是隨時隨地都可以發(fā)出第二個請求，大大提高了效率。傳統(tǒng)同步Web應(yīng)用模式和新型異步通信Web應(yīng)用模式的比較如圖1所示。

三、ASP.NET中AJAX的新模型架構(gòu)

1.ASP.NET編程模型

傳統(tǒng)的ASP.NET采用較簡單易用的基于服務(wù)端編程模型。而ASP.NET AJAX模型有兩大類：基于服務(wù)端模型和新的基于客戶端的模型，許多人認(rèn)為基于服務(wù)端模型控件已經(jīng)能夠?qū)崿F(xiàn)相當(dāng)大部分的AJAX應(yīng)用程序了。而這里新提出的基于客戶端編程模型，它的新理念將強(qiáng)烈挑戰(zhàn)基于服務(wù)端編程模型。而這兩種ASP.NET AJAX的編程模型又對傳統(tǒng)的ASP.NET編程模型是種強(qiáng)烈的沖擊。

下面以數(shù)據(jù)表格頁面翻頁功能為例，逐一對比ASP.NET 傳統(tǒng)編程模型、AJAX的基于服務(wù)端編程模型和基于客戶端編程模型。

(1)傳統(tǒng)的ASP.NET編程模型。在傳統(tǒng)的ASP.NET編程模型中，實(shí)現(xiàn)數(shù)據(jù)表格頁面一般選擇數(shù)據(jù)網(wǎng)格GridView（對于ASP.NET 1.x來講，是DataGrid）控件，客戶端和服務(wù)器端的模型如圖2所示?？蛻舳酥皇且欢纹胀ǖ腍TML代碼而已，用戶的每一次操作都將導(dǎo)致瀏覽器中的所有內(nèi)容刷新一遍。而服務(wù)器端則有非常繁重的任務(wù)，它將負(fù)責(zé)根據(jù)客戶端的請求得到數(shù)據(jù)，并生成包括數(shù)據(jù)和表現(xiàn)內(nèi)容的完整一頁發(fā)送給客戶端。

在數(shù)據(jù)表格頁面中，點(diǎn)擊數(shù)據(jù)表格上的“下一頁”按鈕時，客戶端僅僅把“下一頁”這個信息告訴服務(wù)器。然后，服務(wù)器完成后續(xù)所有數(shù)據(jù)計(jì)算操作，同時還重新生成了頁面中其他重復(fù)內(nèi)容，最后將這個全新頁面的完整HTML代碼都發(fā)送回客戶端。

(2)AJAX基于服務(wù)器端編程模型。在AJAX基于服務(wù)器端編程模型中，UpdatePanel控件是核心，它將數(shù)據(jù)表格包圍起來，讓頁面擁有“異步回送、局部更新”的Ajax特性。在使用UpdatePanel控件實(shí)現(xiàn)的Ajax數(shù)據(jù)表格頁面中，客戶端多了一個用來管理頁面局部更新的JavaScript組件。對于服務(wù)器端，則基本和傳統(tǒng)的ASP.NET編程模型沒有什么區(qū)別，依然是先根據(jù)客戶端的請求計(jì)算并取得相應(yīng)的數(shù)據(jù)，但在頁面呈現(xiàn)時，ASP.NET AJAX將只呈現(xiàn)UpdatePanel中的內(nèi)容，并將這部分內(nèi)容發(fā)送給客戶端。如圖3所示。

在數(shù)據(jù)表格頁面中，點(diǎn)擊數(shù)據(jù)表格上的“下一頁”按鈕時，客戶端同樣僅僅把“下一頁”這個信息通知給服務(wù)器，不過這種通知是采用XMLHttpRequest對象以“柔和”的異步方式進(jìn)行的。然后，服務(wù)器如同普通ASP.NET頁面一樣，來完成所有數(shù)據(jù)計(jì)算操作。但在最后的頁面呈現(xiàn)環(huán)節(jié)中，服務(wù)器不再生成整個頁面內(nèi)容，而是只生成UpdatePanel控件中的那部分內(nèi)容發(fā)送回客戶端?？蛻舳说木植扛鹿芾砥鲗⒂闷涮鎿Q頁面上原有的那個UpdatePanel中內(nèi)容，實(shí)現(xiàn)數(shù)據(jù)表格的翻頁。

(3)運(yùn)用AJAX基于客戶端編程模型。在AJAX基于客戶端的編程模型中，客戶端承擔(dān)了非常重要的職責(zé)，負(fù)責(zé)將用戶的操作轉(zhuǎn)化為對服務(wù)器端的請求，并用指定的樣式呈現(xiàn)出服務(wù)器端返回的數(shù)據(jù)。而服務(wù)器端的職責(zé)則明顯少，只為客戶端提供數(shù)據(jù)，不包含任何數(shù)據(jù)的表現(xiàn)樣式。如圖4所示。

在數(shù)據(jù)表格頁面中，點(diǎn)擊數(shù)據(jù)表格上的“下一頁”按鈕，ASP.NET AJAX將在客戶端根據(jù)當(dāng)前數(shù)據(jù)表格的狀態(tài)計(jì)算出信息，并發(fā)送給服務(wù)器，而不只光發(fā)送“下一頁”命令。服務(wù)器端中的Web 服務(wù)接收到這個內(nèi)容范圍之后，可以很容易地根據(jù)該信息從數(shù)據(jù)庫中取得所需的數(shù)據(jù)，并直接將這個數(shù)據(jù)發(fā)送回客戶端，而并不需要發(fā)送HTML代碼。客戶端在得到服務(wù)器端的響應(yīng)之后，使用基于客戶端的數(shù)據(jù)網(wǎng)格控件把這一段數(shù)據(jù)按照一定的樣式進(jìn)行格式化，并顯示到頁面中。

2.分析與設(shè)計(jì)

經(jīng)過三種模型的比較，我們提出的AJAX基于客戶端編程模型，它是一種組件化、封裝良好的數(shù)據(jù)訪問模型。大大減輕了服務(wù)端的工作，提高了服務(wù)器響應(yīng)能力，無論是服務(wù)器端的DataService，還是客戶端的離線數(shù)據(jù)源，都是以組件的形式提供給編程者的。

AJAX基于客戶端編程模型中組件化數(shù)據(jù)訪問可以分為兩大部分：

（1）服務(wù)端的DataService組件：為配合客戶端數(shù)據(jù)源組件，新模型的服務(wù)端封裝了普通的WebService，負(fù)責(zé)數(shù)據(jù)的常規(guī)操作，包含了數(shù)據(jù)選擇、插入、更新、刪除等一系列的統(tǒng)一接口。同時DataService組件還負(fù)責(zé)與數(shù)據(jù)庫等存儲介質(zhì)的通信和數(shù)據(jù)保存。

（2)客戶端系列組件：①離線數(shù)據(jù)源組件：該數(shù)據(jù)源組件用于和服務(wù)端DataService進(jìn)行通信，以方便從用戶端獲取數(shù)據(jù)或?qū)⑿薷暮蟮臄?shù)據(jù)提交給DataService，并給服務(wù)端的數(shù)據(jù)提供了良好的緩存。同時它還為客戶端數(shù)據(jù)訪問的上層組件（DataView以及數(shù)據(jù)綁定界面控件）作好數(shù)據(jù)橋梁的工作。主要包括DataSource控件、XMLDataSource控件。②DataView組件（數(shù)據(jù)瀏覽組件）：它使用上面數(shù)據(jù)源組件所提供的原始數(shù)據(jù)，和其他組件做好配合，對數(shù)據(jù)作好必要的修飾，如分頁、排序、篩選等。最后把這些提供給數(shù)據(jù)綁定界面控件。主要包括DataNavigator控件、SortBehavior控件和DataFilter控件。③數(shù)據(jù)綁定UI控件（數(shù)據(jù)綁定界面控件）：它主要負(fù)責(zé)從DataView組件中，取得數(shù)據(jù)，另一種方法是它直接和數(shù)據(jù)源組件通信，獲得數(shù)據(jù)。再將數(shù)據(jù)以預(yù)定義的格式顯示給用戶。同時，它還能從用戶處得到數(shù)據(jù)經(jīng)過更改、維護(hù)后，傳回到下層DataView組件或數(shù)據(jù)源組件。主要包括ListView控件、ItemView控件和XSLTView控件。

上面的這些組件均定義于ASP.NET中的Microsoft.Web.Preview.dll程序集中的PreviewScript.js腳本文件中。然后利用ScriptManager的聲明將其引入客戶端：

有了這樣良好分層的模型，再借助于綁定技術(shù)的強(qiáng)大功能，其中的各個組件即可各司其職，在給用戶帶來更豐富、更友好、更方便的用戶體驗(yàn)的同時，也大大提高了系統(tǒng)性能和開發(fā)效率。

四、總結(jié)與展望

ASP.NET 中AJAX基于客戶端編程模型實(shí)現(xiàn)了用戶與程序異步方式的交互——不用等待服務(wù)器的通訊。在使用此模型的WEB應(yīng)用中，充分利用了客戶端的計(jì)算能力，對客戶端動作的響應(yīng)幾乎是立即的，不用等待頁面刷新。同時，AJAX的客戶端編程模型與以前的服務(wù)器端編程模型并不是完全排斥的，將二者合理地結(jié)合起來，既關(guān)注了程序的開發(fā)效率，也保證了其執(zhí)行效率。在今后的web應(yīng)用程序中，靈活、強(qiáng)大且對用戶友好的客戶端Ajax應(yīng)用程序必將越來越多，飛速發(fā)展。

參考文獻(xiàn):

[1]Ryan Asleson，Nathaniel T.Schutta， 金靈譯:Ajax基礎(chǔ)教程.人民郵電出版社，2006年，第26～55頁

[2]Dave Crane，Eric Pascarello，Darren Jame：Ajax in Action[M]，America:Manning Publications co，2006年，第32-33頁。

[3]陳黎平:ASP.NET AJAX程序設(shè)計(jì).人民郵電出版社，2007年，第39～146頁

[4]徐麗麗 張永勝:AJAX技術(shù)及其應(yīng)用研究，計(jì)算機(jī)時代，2007（3），第56～57頁

[5]薛勝軍 倪 俊：基于AJAX的Web應(yīng)用互交方式的研究，電腦知識與技術(shù)，2007（2），第390～391頁

注：本文中所涉及到的圖表、注解、公式等內(nèi)容請以PDF格式閱讀原文