摘 要: Ajax技術(shù)較好地解決了傳統(tǒng)Web開發(fā)中數(shù)據(jù)整頁(yè)提交、系統(tǒng)響應(yīng)時(shí)間較長(zhǎng)的問題,使用戶操作與服務(wù)器響應(yīng)異步化,可將當(dāng)前Web應(yīng)用中的一些服務(wù)器負(fù)擔(dān)轉(zhuǎn)移到客戶端,便于資源處理。同時(shí),結(jié)合網(wǎng)上民主評(píng)議系統(tǒng)具體說明了Ajax技術(shù)在系統(tǒng)中的應(yīng)用。實(shí)踐表明,使用基于Ajax的架構(gòu)應(yīng)用大大提高了系統(tǒng)的響應(yīng)速度,使系統(tǒng)用戶具有良好的使用體驗(yàn),對(duì)各類評(píng)議系統(tǒng)的構(gòu)建有普遍推廣價(jià)值。
關(guān)鍵詞: Asp.net; Ajax; B/S; 民主評(píng)議
Ajax技術(shù)較好地解決了傳統(tǒng)Web開發(fā)中數(shù)據(jù)整頁(yè)提交、系統(tǒng)響應(yīng)時(shí)間較長(zhǎng)的問題,使用戶操作與服務(wù)器響應(yīng)異步化,可將當(dāng)前Web應(yīng)用中的一些服務(wù)器負(fù)擔(dān)轉(zhuǎn)移到客戶端,便于資源處理。本文結(jié)合網(wǎng)上民主評(píng)議系統(tǒng)具體說明了Ajax技術(shù)在系統(tǒng)中的應(yīng)用。實(shí)踐表明,使用基于Ajax的架構(gòu)應(yīng)用,大大提高了系統(tǒng)的響應(yīng)速度,使系統(tǒng)用戶具有良好的使用體驗(yàn)。
1 Ajax關(guān)鍵技術(shù)
Ajax技術(shù)是當(dāng)今Web開發(fā)技術(shù)熱點(diǎn)之一,由HTML、JavaScript 技術(shù)、DHTML和DOM組成[1-4],它使用客戶端腳本JavaScript[5],大大減少了服務(wù)器端的運(yùn)算量,減輕了服務(wù)器端的壓力,使服務(wù)器資源得到更合理的分配應(yīng)用。其工作原理相當(dāng)于在用戶與服務(wù)器之間加了—個(gè)中間層,使用戶操作與服務(wù)器響應(yīng)異步化,并非所有用戶請(qǐng)求都提交服務(wù)器,部分?jǐn)?shù)據(jù)驗(yàn)證和數(shù)據(jù)處理等是由Ajax引擎自行處理[5-6],僅特定需要從服務(wù)器讀取新數(shù)據(jù)時(shí)才由Ajax引擎向服務(wù)器提交請(qǐng)求。因服務(wù)器與瀏覽器之間交換的數(shù)據(jù)大量減少(大約只有原來的5%),同時(shí)很多處理工作可在發(fā)出請(qǐng)求的客戶端完成,所以能夠看到更快的應(yīng)用結(jié)果。它實(shí)際是幾項(xiàng)技術(shù)按一定方式組合,同時(shí)在協(xié)同合作中發(fā)揮各自作用。其Web應(yīng)用模型(異步)如圖1所示。
與傳統(tǒng)的B/S交互模式相比較,使用Ajax技術(shù)主要的優(yōu)勢(shì)在于:
(1)頁(yè)面無刷新,在頁(yè)內(nèi)與服務(wù)器通信,用戶體驗(yàn)良好;
(2)異步方式與服務(wù)器通信,不打斷用戶操作,響應(yīng)更迅速;
(3)部分服務(wù)器負(fù)擔(dān)轉(zhuǎn)移到客戶端,利用客戶端閑置能力處理,減輕服務(wù)器和帶寬負(fù)擔(dān),節(jié)約空間和帶寬成本;
(4)基于廣泛支持的標(biāo)準(zhǔn)化技術(shù),無需下載插件或小程序;
(5)“按需取數(shù)據(jù)”,最大程度地減少冗余請(qǐng)求和響應(yīng)負(fù)擔(dān);
(6)支持第三方Ajax框架(如Jquery Ajax框架)引用,增強(qiáng)瀏覽器兼容性,大大減少代碼量,提高數(shù)據(jù)處理效率。
2 系統(tǒng)架構(gòu)設(shè)計(jì)
系統(tǒng)結(jié)構(gòu)設(shè)計(jì)是系統(tǒng)設(shè)計(jì)的一項(xiàng)重要工作,根據(jù)民主評(píng)議系統(tǒng)的具體情況:參評(píng)用戶多、測(cè)評(píng)題庫(kù)數(shù)據(jù)量大、交互比較頻繁、用戶端與管理端實(shí)時(shí)查詢?cè)L問的速度要求高,評(píng)議系統(tǒng)采用B/S分層設(shè)計(jì)方式,如圖2所示,采用界面層、邏輯層及數(shù)據(jù)層三層結(jié)構(gòu)。
界面層負(fù)責(zé)提供交互操作,用戶可實(shí)現(xiàn)數(shù)據(jù)輸入、數(shù)據(jù)獲取、信息管理、評(píng)測(cè)過程、問題反饋等,同時(shí)提供一定的安全保障,確保非共享信息的封閉性;邏輯層是界面層與數(shù)據(jù)層的之間橋梁,它響應(yīng)界面層的用戶請(qǐng)求,執(zhí)行任務(wù)并從數(shù)據(jù)層抓取數(shù)據(jù),將必要的數(shù)據(jù)傳送給界面層;數(shù)據(jù)層定義、維護(hù)數(shù)據(jù)的完整性、安全性,負(fù)責(zé)響應(yīng)邏輯層請(qǐng)求及數(shù)據(jù)訪問,該層通常由大型數(shù)據(jù)庫(kù)服務(wù)器實(shí)現(xiàn),如Oracle、MS SQL Server等。
3 Ajax技術(shù)在民主評(píng)議系統(tǒng)中的應(yīng)用
3.1系統(tǒng)模塊設(shè)計(jì)
民主評(píng)議系統(tǒng)包括用戶測(cè)評(píng)管理子系統(tǒng)、測(cè)評(píng)系統(tǒng)管理子系統(tǒng)和統(tǒng)計(jì)計(jì)算管理子系統(tǒng),并且包含參評(píng)人信息管理模塊、個(gè)人測(cè)評(píng)情況查詢模塊、評(píng)測(cè)類型和指標(biāo)管理模塊、統(tǒng)計(jì)分析模塊。系統(tǒng)模塊設(shè)計(jì)如圖3所示。
3.2 注冊(cè)用戶管理
Ajax的XMLHttpRequest對(duì)象提供了對(duì)HTTP協(xié)議的完全訪問,包括 POST和HEAD請(qǐng)求以及GET請(qǐng)求能力,可同步或異步返回Web服務(wù)器響應(yīng),能以文本或DOM文檔形式返回內(nèi)容。因此,Ajax可實(shí)現(xiàn)網(wǎng)頁(yè)的局部更新,客戶端按需請(qǐng)求數(shù)據(jù),服務(wù)器端異步處理返回?cái)?shù)據(jù)。
參評(píng)人員需在系統(tǒng)限定日期內(nèi)進(jìn)行網(wǎng)上注冊(cè)。在注冊(cè)界面,當(dāng)用戶名文本框失去焦點(diǎn)時(shí),系統(tǒng)自動(dòng)向服務(wù)器請(qǐng)求檢查用戶名是否可用,檢查與用戶后續(xù)操作是異步的,服務(wù)器的返回信息會(huì)自動(dòng)顯示在頁(yè)面顯著位置,檢查結(jié)果以“√”或“×”符號(hào)對(duì)用戶進(jìn)行提示,此過程主要通過XMLHttp實(shí)現(xiàn)。其原理流程圖如圖4所示。
關(guān)鍵代碼如下:
// JavaScript Document
var XHR; //定義一個(gè)全局對(duì)象
function createXHR(){ //創(chuàng)建XMLHttpRequest對(duì)象
if(window.ActiveXObject)
{ XHR=new ActiveXObject(′Microsoft.XMLHTTP′); }
//IE的低版本系類
else if(window.XMLHttpRequest)
{XHR=new XMLHttpRequest();}
//非IE瀏覽器,但包括IE7 IE8}
function checkname(){ //處理方法
var username=document.myform.user.value;
createXHR();
XHR.open("GET","checkname.aspx?um="+username,
true); //true:表異步傳輸,是關(guān)鍵所在
XHR.onreadystatechange= ShowResult;
//當(dāng)狀態(tài)改變時(shí),調(diào)用ShowResult方法
XHR.send(null);}
function ShowResult(){ //回調(diào)方法
if(XHR.readyState == 4){
//關(guān)于Ajax引擎對(duì)象的方法和屬性
if(XHR.status == 200){
document.getElementById('checkbox').innerHTML==XHR.
responseText; }}}
3.3 個(gè)人信息與測(cè)評(píng)管理
參評(píng)人信息管理頁(yè)面中,需要錄入個(gè)人詳細(xì)信息(包括出生日期、入黨日期),為規(guī)范格式,采用彈出式日歷選擇輸入日期。如圖5所示,Asp.net Ajax的Calendar日歷控件主要用來在頁(yè)面中提供日歷的選擇,雖現(xiàn)在已有很多用JavaScript寫的日歷控件,但是Canlendar控件能夠更加快速地實(shí)現(xiàn)這種效果,而且設(shè)置方法簡(jiǎn)明實(shí)用。以TargetControlID指定顯示日期的控件;以CssClass屬性設(shè)置日歷的樣式;以Format屬性指定顯示日期的格式,如yy-MM—dd。用戶只能通過日歷選擇的方式向文本框?qū)懭肴掌?,從而保證了日期格式的正確性。Calendar控件的設(shè)置如下:
<user_Calendar:CalendarExtender TargetControlID="birth_D" runat="server" Format="yy-MM-dd" ID="cal_D" PopupButtonID="img_D" CssClass="Date_Calendar"/>
用戶在線評(píng)測(cè)時(shí),需要對(duì)指定范圍的參評(píng)人員進(jìn)行評(píng)測(cè),評(píng)測(cè)題目較多。傳統(tǒng)方法是在完成對(duì)一個(gè)參評(píng)人所有評(píng)測(cè)題目時(shí)再進(jìn)行結(jié)果提交,提交將對(duì)評(píng)測(cè)界面產(chǎn)生一次整體刷新,若在對(duì)某參評(píng)人的評(píng)測(cè)過程中IE意外關(guān)閉,則登錄后需對(duì)該參評(píng)人進(jìn)行重新評(píng)測(cè)。應(yīng)用Asp.net Ajax Control Toolkit控件,可在UpdatePanel控件中動(dòng)態(tài)創(chuàng)建RadioButtonList控件(以單選為例),用戶完成一組題目時(shí)前臺(tái)JS對(duì)單選框進(jìn)行處理并將數(shù)據(jù)異步提交服務(wù)器,回調(diào)結(jié)果由前臺(tái)處理并進(jìn)行提示,表示某一測(cè)評(píng)題目是否成功提交。其實(shí)現(xiàn)效果如圖5所示。
3.4 總體評(píng)測(cè)情況管理
評(píng)議系統(tǒng)為管理者提供用戶總體測(cè)評(píng)情況查詢?yōu)g覽系統(tǒng),在Asp.net中有很多數(shù)據(jù)展現(xiàn)控件,如GridView,它自帶了分頁(yè)功能,但若未禁用ViewState,則其產(chǎn)生的結(jié)果非常大,而且進(jìn)行上下頁(yè)點(diǎn)擊操作時(shí)都會(huì)引起頁(yè)面回發(fā),該過程需要與服務(wù)器進(jìn)行完全交互,響應(yīng)時(shí)間較長(zhǎng)、傳輸數(shù)據(jù)量很大。基于Ajax技術(shù)的分頁(yè)可以很好地解決這些問題,Ajax將JavaScript技術(shù)和XML HttpRequest對(duì)象置于Web表單與服務(wù)器之間,當(dāng)用戶進(jìn)行翻頁(yè)操作時(shí),命令數(shù)據(jù)交由特定JavaScript代碼處理并向服務(wù)器發(fā)送請(qǐng)求,此時(shí)用戶屏幕表單并不會(huì)閃爍、消失或延遲。請(qǐng)求發(fā)送的異步特定,使用戶無需等待服務(wù)器的響應(yīng)便可繼續(xù)輸入數(shù)據(jù)、滾動(dòng)屏幕和使用應(yīng)用程序,JS腳本接收服務(wù)器返回的數(shù)據(jù)并決定如何處理數(shù)據(jù),這樣便可以迅速更新表單顯示,使用戶感覺翻頁(yè)操作是即時(shí)完成的。
其實(shí)現(xiàn)過程如下:換頁(yè)指令由JavaScript腳本截獲并異步發(fā)送Web服務(wù)器,服務(wù)器調(diào)用數(shù)據(jù)庫(kù)存儲(chǔ)過程得到頁(yè)面內(nèi)容并轉(zhuǎn)換成JSON格式,JSON格式內(nèi)容異步發(fā)回JavaScript腳本,JS腳本在瀏覽器后臺(tái)動(dòng)態(tài)局部刷新用戶界面,完成換頁(yè)操作。其關(guān)鍵過程如下:
(1)由SQL Server 2005內(nèi)建ranking函數(shù)為待分頁(yè)表行生成行號(hào),利用Row_Number()函數(shù)設(shè)計(jì)分頁(yè)存儲(chǔ)過程。
(2)Web服務(wù)器中調(diào)用存儲(chǔ)過程讀取頁(yè)面信息。Asp.net執(zhí)行數(shù)據(jù)獲取得到要訪問頁(yè)面SqlDataReader對(duì)象,由處理程序?qū)⒃搶?duì)象轉(zhuǎn)換成JSON格式的字符串。
(3)Web服務(wù)器Ajax服務(wù)端實(shí)現(xiàn)。Web服務(wù)器在頁(yè)面事件中把Json數(shù)據(jù)傳輸?shù)娇蛻舳藶锳jax客戶端程序提供服務(wù)。
(4)Ajax客戶端實(shí)現(xiàn)。使用JQuery Ajax框架技術(shù),客戶端JavaScript腳本完成JSON接收后,將數(shù)據(jù)顯示在Web頁(yè)面。
本文針對(duì)網(wǎng)上評(píng)議系統(tǒng)運(yùn)行過程中交互較多和讀取服務(wù)器數(shù)據(jù)量大的特點(diǎn),設(shè)計(jì)并實(shí)現(xiàn)了基于Asp.net Ajax開發(fā)框架的民主評(píng)議系統(tǒng)。此技術(shù)的應(yīng)用大大減少了系統(tǒng)對(duì)用戶交互的響應(yīng)時(shí)間,使用戶感受到良好的使用體驗(yàn),同時(shí)縮短了開發(fā)時(shí)間與成本,使系統(tǒng)具有較強(qiáng)的可維護(hù)性與可擴(kuò)展性。異步交互功能避免了傳統(tǒng)的整頁(yè)刷新方式造成的時(shí)間浪費(fèi),大大提高了系統(tǒng)資源利用率,使該系統(tǒng)在使用過程中比傳統(tǒng)Web實(shí)現(xiàn)更加高效和實(shí)用。
參考文獻(xiàn)
[1] GARRETT J J. Ajax: A new approach to Web applications[EB/OL].[2006-02-12].http://www.Adaptivepath.com/publications/essays/.
[2] ASLESON R, SCHUTA N T. Foundation of Ajax[M].Appress,2005.
[3] CRANE D,PASCARELLO E. Ajax in action[M].中文版.李錕,譯.北京:人民郵電出版社,2006.
[4] ASLESON R,SCHUTTA N T.Ajax基礎(chǔ)教程[M].金靈,等譯.北京:人民郵電出版社,2005.
[5] 陳黎.ASP.NET Ajax程序設(shè)計(jì)(第1卷:服務(wù)器端)[M].北京:人民郵電出版社,2007.
[6] 黃大偉.ASP.NET Ajax深度剖析范例集[M].北京:中國(guó)青年出版社,2007.