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

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

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

一、引言

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

二、AJAX技術(shù)

1.AJAX的含義

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

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

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

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

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

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

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

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

1.ASP.NET編程模型

傳統(tǒng)的ASP.NET采用較簡(jiǎn)單易用的基于服務(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的編程模型又對(duì)傳統(tǒng)的ASP.NET編程模型是種強(qiáng)烈的沖擊。

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

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

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

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

在數(shù)據(jù)表格頁(yè)面中，點(diǎn)擊數(shù)據(jù)表格上的“下一頁(yè)”按鈕時(shí)，客戶端同樣僅僅把“下一頁(yè)”這個(gè)信息通知給服務(wù)器，不過(guò)這種通知是采用XMLHttpRequest對(duì)象以“柔和”的異步方式進(jìn)行的。然后，服務(wù)器如同普通ASP.NET頁(yè)面一樣，來(lái)完成所有數(shù)據(jù)計(jì)算操作。但在最后的頁(yè)面呈現(xiàn)環(huán)節(jié)中，服務(wù)器不再生成整個(gè)頁(yè)面內(nèi)容，而是只生成UpdatePanel控件中的那部分內(nèi)容發(fā)送回客戶端。客戶端的局部更新管理器將用其替換頁(yè)面上原有的那個(gè)UpdatePanel中內(nèi)容，實(shí)現(xiàn)數(shù)據(jù)表格的翻頁(yè)。

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

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

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

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

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

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

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

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

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

四、總結(jié)與展望

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

參考文獻(xiàn):

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

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

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

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

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

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