[b]關(guān)鍵字：ajax、javascript、xmlhttprequest、異步交互、xml[br][/b]　　 [br][color=#ff6600][b]一、緒論[/b][/color]
由于系統(tǒng)開發(fā)成本低、時(shí)間短，在過(guò)去的幾年里，c/s結(jié)構(gòu)一直是信息系統(tǒng)開發(fā)采用的主要模式。但隨著企業(yè)規(guī)模的日益擴(kuò)大，應(yīng)用程序復(fù)雜程度不斷提高，傳統(tǒng)的c/s結(jié)構(gòu)的系統(tǒng)暴露出越來(lái)越多的問(wèn)題：系統(tǒng)客戶端日趨龐大而顯得“臃腫”，同時(shí)服務(wù)器負(fù)擔(dān)日益加重。而且c/s系統(tǒng)的布署、遷移和維護(hù)的成本很高，使企業(yè)信息系統(tǒng)的總擁有成本大為提高。
隨著web技術(shù)發(fā)展，b/s結(jié)構(gòu)越來(lái)越受到系統(tǒng)開發(fā)商的青睞。與c/s結(jié)構(gòu)比較，b/s結(jié)構(gòu)具有系統(tǒng)維護(hù)方便、支持廣泛、跨平臺(tái)的優(yōu)點(diǎn)，所以b/s三層結(jié)構(gòu)大有取代c/s兩層結(jié)構(gòu)之趨勢(shì)。
雖然很多開發(fā)商開始傾向于開發(fā)b/s結(jié)構(gòu)的系統(tǒng)，但b/s結(jié)構(gòu)也存在自身弱點(diǎn)，即b/s結(jié)構(gòu)采用的html語(yǔ)言表現(xiàn)能力和交互能力太弱，除了文本輸入框、選擇框、按鈕之外，幾乎就沒(méi)有其他的任何控件了。b/s結(jié)構(gòu)的這個(gè)特點(diǎn)讓那些曾經(jīng)使用c/s系統(tǒng)的用戶難以適應(yīng)，所以目前c/s仍然無(wú)法被b/s完全替代。因此如果能夠結(jié)合c/s和b/s兩種模式的特點(diǎn)，在信息系統(tǒng)開發(fā)中引入一個(gè)混合型模式似乎更能滿足企業(yè)和用戶的要求。
b/s結(jié)構(gòu)的系統(tǒng)與用戶之間是一個(gè)同步交互的過(guò)程。在客戶端，用戶通過(guò)瀏覽器（browser）進(jìn)行操作，向服務(wù)器發(fā)送一個(gè)http請(qǐng)求；服務(wù)器（server）端接收到用戶的請(qǐng)求后，執(zhí)行相應(yīng)的操作，然后向客戶端的用戶返回響應(yīng)結(jié)果，即一個(gè)html頁(yè)面。這個(gè)過(guò)程是一種不連貫的用戶體驗(yàn)，即在服務(wù)器處理用戶請(qǐng)求的時(shí)候，用戶大多數(shù)時(shí)間都處于等待的狀態(tài)，瀏覽器上大多是一片空白。
當(dāng)服務(wù)器負(fù)載比較小時(shí)，該種交互過(guò)程并無(wú)不妥?？墒钱?dāng)服務(wù)器負(fù)載較大時(shí)，服務(wù)器響應(yīng)用戶的請(qǐng)求時(shí)間可能會(huì)大于1分鐘甚至幾分鐘，這樣長(zhǎng)時(shí)間的等待服務(wù)器響應(yīng)對(duì)于用戶來(lái)說(shuō)是難以接受的。甚至有時(shí)候用戶長(zhǎng)時(shí)間等待的卻是服務(wù)器返回的一個(gè)服務(wù)超時(shí)的錯(cuò)誤消息。另一方面，某些時(shí)候用戶只是想改變頁(yè)面中一小部分的數(shù)據(jù)，而在傳統(tǒng)的b/s模式中實(shí)現(xiàn)時(shí)，瀏覽器仍然需要重新加載整個(gè)頁(yè)面的數(shù)據(jù)。目前，軟件設(shè)計(jì)越來(lái)越講究人性化，上述不友好的用戶體驗(yàn)與人性化的原則背道而馳。如果能夠減少用戶等待服務(wù)器響應(yīng)的時(shí)間，就可以提高用戶體驗(yàn)。目前，除了程序設(shè)計(jì)、編碼優(yōu)化和服務(wù)器調(diào)優(yōu)等措施可以縮短用戶的等待時(shí)間之外，還可以采用ajax技術(shù)。隨著gmail、google-maps的推出，ajax正逐漸吸引全世界開發(fā)者的目光。
在2005年的2月，jesse james garrett發(fā)表了一篇 《ajax: a new approach to web applications》的文章，在該篇文章中ajax概念第一次被提出來(lái)（asynchronous javascript and xml，異步j(luò)avascript和xml），之后，關(guān)于ajax技術(shù)的研究鋪天蓋地蔓延開來(lái)。盡管目前該技術(shù)還不是很完善，但是它已被大多數(shù)開發(fā)者認(rèn)為是目前開發(fā)b/s系統(tǒng)客戶端的最好的解決方案之一，而現(xiàn)在已經(jīng)涌現(xiàn)出大量基于ajax的應(yīng)用系統(tǒng)。
在ajax技術(shù)的研發(fā)方面，google當(dāng)仁不讓是表率。gmail、google groups、google maps、google suggest都應(yīng)用了ajax技術(shù)。在javaone 2006上，google發(fā)布了google web toolkit（簡(jiǎn)稱gwt），它是一個(gè)基于java的ajax應(yīng)用開發(fā)框架，可以用java開發(fā)前端應(yīng)用并將其轉(zhuǎn)換為使用ajax實(shí)現(xiàn)的javascript/html應(yīng)用。業(yè)界正在猜測(cè)google下一步即將推出基于ajax技術(shù)的網(wǎng)絡(luò)辦公套件，屆時(shí)，用戶只需打開瀏覽器，就可以使用像微軟的諸如word、excel、powerpoint之類office工具了。
作為google的對(duì)手，微軟也在積極開發(fā)更為完善的ajax應(yīng)用：它即將正式推出代號(hào)為atlas的ajax工具。atlas的功能超越了ajax本身，包括整合visual studio的調(diào)試功能。另外，新的asp.net控件將使客戶端控件與服務(wù)器端代碼的捆綁更為簡(jiǎn)便。atlas客戶腳本框架（atlas client script framework）也使與網(wǎng)頁(yè)及相關(guān)項(xiàng)目的交互更為便利。
基于ajax的開發(fā)框架，國(guó)內(nèi)外開發(fā)了許多優(yōu)秀的商業(yè)和開源的產(chǎn)品。
1. bindows
bindows 是一個(gè)處于web應(yīng)用程序中表示層的“胖客戶”圖形用戶界面工具，擁有與現(xiàn)代桌面應(yīng)用程序相同的外觀、感覺(jué)和事件。是一個(gè)輕量級(jí)的b/s應(yīng)用程序開發(fā)框架。該框架已經(jīng)將javascript的oop和基于ie6.0的dhtml發(fā)揮到極點(diǎn)， 其中javascript用于客戶端界面的顯示和處理，xmlhttp用于客戶端與服務(wù)器的信息傳輸。bindows提供了一個(gè)封裝好的可以直接利用的js類庫(kù)，使得開發(fā)過(guò)程變得十分快捷。web系統(tǒng)原有的界面交互性差、頁(yè)面刷新等問(wèn)題都可以很好地解決。
然而bindows并非完美，它封裝了太多的原本html就提供的控件、事件和方法，使得類庫(kù)過(guò)于龐大并且內(nèi)部藕合性太強(qiáng)，而一次性加載類庫(kù)也導(dǎo)致了bindows窗口初始化的時(shí)間過(guò)長(zhǎng)。同時(shí)，bindows大量運(yùn)用了ie6.0的技術(shù)，限制了bindows進(jìn)行跨瀏覽器和跨平臺(tái)的運(yùn)用。
2. dorado
dorado是由上海銳道信息技術(shù)有限公司開發(fā)的一套基于j2ee的web開發(fā)框架構(gòu)件，它的前身是extra。該開發(fā)平臺(tái)是一款用于快速開發(fā)rich-client的web開發(fā)平臺(tái)，它由一個(gè)框架和眾多的基礎(chǔ)構(gòu)件組成。dorado構(gòu)件開發(fā)平臺(tái)解決了長(zhǎng)期困擾軟件開發(fā)人員的關(guān)于web表現(xiàn)層開發(fā)的兩大難題：快速開發(fā)和實(shí)現(xiàn)復(fù)雜交互界面，充分滿足用戶體驗(yàn)。dorado在web頁(yè)面上實(shí)現(xiàn)了大部分c/s系統(tǒng)中的控件，不過(guò)當(dāng)前版本不支持ie以外的其他瀏覽器。
其他還有如dwr（direct web remoting）、ajaxanywhere、ajax-jsf framework 等許多優(yōu)秀的ajax開發(fā)框架。
[color=#ff6600][b]二、ajax概述[/b][/color]
ajax（asynchronous javascript and xml，異步j(luò)avascript和xml），不是一門新的語(yǔ)言或技術(shù)，它實(shí)際上是幾項(xiàng)技術(shù)按一定的方式組合在一起，在共同的協(xié)作中發(fā)揮各自的作用。這些技術(shù)包括javascript、xhtml、css、dom、xml、xstl及xmlhttprequest，在ajax中，各種技術(shù)各司其職：
使用xhtml和css進(jìn)行數(shù)據(jù)的標(biāo)準(zhǔn)化呈現(xiàn)；使用dom實(shí)現(xiàn)動(dòng)態(tài)顯示和交互；使用xml和xstl進(jìn)行數(shù)據(jù)交換與處理；使用xmlhttprequest對(duì)象進(jìn)行異步數(shù)據(jù)讀??；使用javascript綁定和處理所有數(shù)據(jù)；
[img]http://lurenjia.net/tech/images/ajax1.jpg[/img]
圖2.1 傳統(tǒng)模式（左）與ajax模式（右）體系結(jié)構(gòu)
在ajax提出之前，對(duì)于上述技術(shù)都只是單獨(dú)使用，或是小范圍地組合使用，沒(méi)有真正意義上綜合應(yīng)用。
ajax的工作原理相當(dāng)于在用戶和服務(wù)器之間加了一個(gè)中間層，稱為ajax引擎，該引擎使用戶操作與服務(wù)器響應(yīng)異步化。在這種模式下，用戶請(qǐng)求不是全部都提交給服務(wù)器，部分請(qǐng)求，如一些數(shù)據(jù)驗(yàn)證和簡(jiǎn)單的數(shù)據(jù)處理請(qǐng)求等就交給ajax引擎完成，只有那些確實(shí)需要由服務(wù)器來(lái)完成的請(qǐng)求，才由ajax引擎代為向服務(wù)器提交，ajax模式與傳統(tǒng)模式體系結(jié)構(gòu)的區(qū)別如圖2.1所示。
在傳統(tǒng)的交互方式中，由用戶觸發(fā)一個(gè)http請(qǐng)求到服務(wù)器，服務(wù)器對(duì)其進(jìn)行處理后再返回一個(gè)新的html頁(yè)面給客戶端。每當(dāng)服務(wù)器處理客戶端提交的請(qǐng)求時(shí)，用戶都只能空閑等待，并且哪怕只是一次很小的交互，只需從服務(wù)器端得到很簡(jiǎn)單的一個(gè)數(shù)據(jù)，服務(wù)器都要返回一個(gè)完整的html頁(yè)作為響應(yīng)結(jié)果，而用戶每次都要浪費(fèi)時(shí)間和帶寬去重新讀取整個(gè)頁(yè)面。使用ajax之后用戶感覺(jué)所有的操作幾乎都會(huì)很快得到響應(yīng)，不用等待頁(yè)面重載（白屏），就像使用桌面客戶端程序一樣的效果。兩種交互方式區(qū)別如圖2.2所示。
[img]http://lurenjia.net/tech/images/ajax2.jpg[/img]
圖2.2 傳統(tǒng)模式下同步交互（上）和ajax模式下異步交互（下）比較
[b]2.1 ajax引擎[/b]
ajax引擎有狹義和廣義之分，廣義的ajax引擎，包括了狹義的ajax引擎和一些由javascript寫成的業(yè)務(wù)邏輯模塊。而狹義的ajax引擎，只是一些與xmlhttprequest相關(guān)，用來(lái)與完成與服務(wù)器交互的模塊，本節(jié)所闡述的是狹義的ajax引擎。
狹義的ajax引擎的主要功能包括：捕獲瀏覽器事件，初始化xmlhttprequest對(duì)象，向服務(wù)器發(fā)送請(qǐng)求，接收服務(wù)器響應(yīng)，更新客戶端頁(yè)面內(nèi)容。這也正是ajax程序與服務(wù)器交互的過(guò)程。從這個(gè)過(guò)程可以看出ajax實(shí)質(zhì)上也是遵循request/response模式，只不過(guò)這個(gè)過(guò)程是異步的。
1. 捕獲瀏覽器事件
當(dāng)瀏覽器中的文檔或它的某些元素發(fā)生了某些事情時(shí)，web瀏覽器就產(chǎn)生一個(gè)事件（event）。例如，瀏覽器裝載完一個(gè)文檔，就產(chǎn)生了一個(gè)onload事件；鼠標(biāo)點(diǎn)擊層，就產(chǎn)生了一個(gè)onclick事件；鍵盤按一個(gè)鍵，就會(huì)產(chǎn)生一個(gè)keydown事件。要捕獲瀏覽器的事件，就是為某個(gè)事件注冊(cè)一個(gè)處理函數(shù)。如，，這里就為一個(gè)表單按鈕注冊(cè)了一個(gè)鼠標(biāo)單擊的處理函數(shù)uploadphoto()，當(dāng)鼠標(biāo)單擊這個(gè)按鈕時(shí)，就會(huì)執(zhí)行uploadphoto()這個(gè)函數(shù)。
2. 初始化xmlhttprequest對(duì)象
在捕獲了用戶的交互事件之后，如果需要與服務(wù)器交互，就要使用xmlhttprequest。但是，瀏覽器不同或者版本不同，這個(gè)xmlhttprequest的實(shí)例化過(guò)程實(shí)現(xiàn)方式也不同。ie以activex控件的形式提供，而mozilla等瀏覽器則以xmlhttprequest類的形式提供，所以需要保證程序兼容性，實(shí)現(xiàn)跨瀏覽器運(yùn)行。
3. 向服務(wù)器發(fā)送請(qǐng)求
在得到一個(gè)實(shí)例化了的xmlhttprequest對(duì)象之后，就可以向服務(wù)器發(fā)送一個(gè)http的請(qǐng)求了。在發(fā)送之前需要指定響應(yīng)處理函數(shù)，即服務(wù)器響應(yīng)之后的回調(diào)函數(shù)（callback），將xmlhttprequest對(duì)象的onreadystatechange屬性指定為回調(diào)函數(shù)。名即可，比如： xmlhttprequestobject.onreadystatechange = callbackhandler。 指定響應(yīng)處理函數(shù)之后，調(diào)用xmlhttprequest對(duì)象的open和send方法后，就向服務(wù)器發(fā)送了一個(gè)http的請(qǐng)求了。
4. 接收服務(wù)器響應(yīng)
在發(fā)送http請(qǐng)求之前通過(guò)onreadystatechange屬性指定了響應(yīng)處理函數(shù)。這個(gè)響應(yīng)處理函數(shù)要做的第一步，它需要檢查xmlhttprequest對(duì)象的readystate值，判斷請(qǐng)求目前的狀態(tài)。當(dāng)readystate值為4的時(shí)，表示服務(wù)器已經(jīng)傳回所有的信息。服務(wù)器返回信息后，還需要判斷返回的http狀態(tài)碼，以確定返回的頁(yè)面沒(méi)有錯(cuò)誤。所有的狀態(tài)碼都可以在w3c的官方網(wǎng)站上查到。其中，200代表頁(yè)面正常。接下來(lái)就可以對(duì)返回的數(shù)據(jù)進(jìn)行處理了。
5. 更新客戶端頁(yè)面內(nèi)容
xmlhttprequest對(duì)成功返回的信息有兩種處理方式： [br] responsetext：將傳回的信息當(dāng)字符串使用。一些狀態(tài)信息等非結(jié)構(gòu)化的數(shù)據(jù)，如刪除成功之之類的可以用這種方式處理； responsexml：將傳回的信息當(dāng)xml文檔使用，用dom解析處理。一些結(jié)構(gòu)化的數(shù)據(jù)，如20條學(xué)生的記錄，要填入到一個(gè)表格中，可以使用該方式。
[b]2.2 ajax 相關(guān)技術(shù)[/b]
1. xmlhttprequest
ajax最大的特點(diǎn)是無(wú)需刷新頁(yè)面便可向服務(wù)器傳輸或讀寫數(shù)據(jù)，即無(wú)刷新更新頁(yè)面，這一特點(diǎn)主要得益于xmlhttp組件xmlhttprequest對(duì)象。這樣就可以像桌面應(yīng)用程序一樣，只同服務(wù)器進(jìn)行數(shù)據(jù)層面的交換，而不用每次都刷新界面，也不用每次將數(shù)據(jù)處理的工作提交給服務(wù)器來(lái)做，這樣即減輕了服務(wù)器的負(fù)擔(dān)又加快了響應(yīng)速度，縮短了用戶等候時(shí)間。
2. javascript
javascript是一種基于對(duì)象和事件驅(qū)動(dòng)具有較高安全性能的基于客戶端瀏覽器的腳本語(yǔ)言。使用javascript的目的是與html超文本標(biāo)識(shí)語(yǔ)言、css一起在網(wǎng)頁(yè)上實(shí)現(xiàn)與網(wǎng)絡(luò)用戶更加復(fù)雜的交互，從而適合開發(fā)客戶端的應(yīng)用程序。它通過(guò)在標(biāo)準(zhǔn)的html語(yǔ)言中嵌入或調(diào)入實(shí)現(xiàn)功能。
簡(jiǎn)單地說(shuō)，javascript是一種基于對(duì)象的、簡(jiǎn)單的、安全的、跨平臺(tái)的腳本語(yǔ)言。所以，javascript最大的特點(diǎn)在于能夠在客戶端瀏覽器運(yùn)行，可以充分利用客戶端的運(yùn)算能力，來(lái)減輕服務(wù)器負(fù)載和網(wǎng)絡(luò)的流量。
3. dom（document object model）
dom（document object model，文檔對(duì)象模型）是w3c組織的推薦標(biāo)準(zhǔn)，用于操作 html 和 xml 文件使用的一組api。它提供了文件的樹狀結(jié)構(gòu)表述，讓你可以改變其中的內(nèi)容及表現(xiàn)方式，其本質(zhì)是建立網(wǎng)頁(yè)與腳本或程序語(yǔ)言溝通的橋梁。[br] 一個(gè)用html或xhtml構(gòu)建的網(wǎng)頁(yè)可以看作是一組結(jié)構(gòu)化的數(shù)據(jù)，這些數(shù)據(jù)被封在dom中，dom提供了網(wǎng)頁(yè)中各個(gè)對(duì)象的讀寫支持。[br] ajax引擎捕獲用戶交互事件如鼠標(biāo)點(diǎn)擊、下拉滾動(dòng)條等，并相應(yīng)地更改dom，這使網(wǎng)頁(yè)能無(wú)縫化重構(gòu)，也就是在頁(yè)面已經(jīng)下載完畢后改變頁(yè)面內(nèi)容，從而響應(yīng)用戶的請(qǐng)求。
4. xml（extensible markup language）
xml是具有一種開放的、可擴(kuò)展的、可自描述的語(yǔ)言結(jié)構(gòu)，它已經(jīng)成為網(wǎng)上數(shù)據(jù)和文檔傳輸?shù)臉?biāo)準(zhǔn)。它是用來(lái)描述數(shù)據(jù)結(jié)構(gòu)的一種語(yǔ)言，正如它的名字一樣，它使對(duì)某些結(jié)構(gòu)化數(shù)據(jù)的定義更加容易，并且可以通過(guò)它和其它應(yīng)用程序交換數(shù)據(jù)。
目前，xml已經(jīng)成為最普遍的數(shù)據(jù)操縱和數(shù)據(jù)傳輸?shù)姆绞健Ｔ诨赼jax技術(shù)的b/s中，大部分結(jié)構(gòu)化的數(shù)據(jù)就是通過(guò)xml的來(lái)傳輸和交換的。但是并不是所有的數(shù)據(jù)都適合以xml格式來(lái)傳輸，因?yàn)閿?shù)據(jù)量大到一定程度的時(shí)候，將數(shù)據(jù)序列化成xml以及解析這些xml將變得非常困難，需要消耗巨大的系統(tǒng)資源以及時(shí)間。另外，有些信息根本沒(méi)有必要序列化成xml，比如返回一個(gè)刪除成功的消息。[br][br][color=#ff6600][b]三、基于ajax的信息系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)[/b][/color]
為了與傳統(tǒng)的b/s結(jié)構(gòu)的信息系統(tǒng)進(jìn)行對(duì)比，在研究過(guò)程中，本文在研究過(guò)程中開發(fā)了一個(gè)基于ajax的信息系統(tǒng)。系統(tǒng)以學(xué)生成績(jī)管理為核心，實(shí)現(xiàn)一些日常教務(wù)的網(wǎng)絡(luò)化管理。 系統(tǒng)數(shù)據(jù)庫(kù)采用sql server 2000數(shù)據(jù)庫(kù)，java環(huán)境采用jdk 1.5.0_05版，應(yīng)用服務(wù)器使用tomcat 5.5。系統(tǒng)總體上分為3層：數(shù)據(jù)層、中間層、客戶層。系統(tǒng)體系結(jié)構(gòu)如圖3.1所示。
[img]http://lurenjia.net/tech/images/ajax3.jpg[/img]
圖3.1 系統(tǒng)體系結(jié)構(gòu)圖
系統(tǒng)中間層使用hibernate作為持久層，負(fù)責(zé)java對(duì)象與數(shù)據(jù)庫(kù)表之間映射；使用javabean完成服務(wù)器端的數(shù)據(jù)處理，利用dom4j實(shí)現(xiàn)java對(duì)象的序列化以及解析從客戶端接收到的xml數(shù)據(jù)流；在中間層的最上面，使用java servlet來(lái)負(fù)責(zé)響應(yīng)來(lái)自瀏覽器的請(qǐng)求并把數(shù)據(jù)處理的結(jié)果返回給瀏覽器。
在系統(tǒng)的客戶層，負(fù)責(zé)與服務(wù)器交互的是ajax引擎；下面的javascript就負(fù)責(zé)數(shù)據(jù)處理和響應(yīng)瀏覽器事件。dom負(fù)責(zé)讀取和更新html文檔，而html、css則負(fù)責(zé)數(shù)據(jù)的表現(xiàn)。而在傳統(tǒng)的b/s應(yīng)用中，客戶端的表現(xiàn)層往往只有最下面的html、css，或只有少量的javascript來(lái)做諸如數(shù)據(jù)驗(yàn)證之類的事，以至于客戶端僅僅用來(lái)表現(xiàn)而已，它的交互能力太弱，需要大量的刷新。
系統(tǒng)所有功能模塊中的交互如添加、刪除、修改等，均不需要刷新頁(yè)面，這與傳統(tǒng)模式的b/s系統(tǒng)有著明顯的區(qū)別。從系統(tǒng)界面上看，它象一個(gè)用delphi或是vb編寫的c/s系統(tǒng) ，但實(shí)際上它是用html編寫的在瀏覽器中運(yùn)行的b/s系統(tǒng)。在開發(fā)過(guò)程中，本系統(tǒng)實(shí)現(xiàn)了如auto-complete、treeview、datagrid等無(wú)刷新的數(shù)據(jù)控件，與asp.net或jsf中已經(jīng)存在的類似控件相比，本系統(tǒng)的控件在響應(yīng)交互時(shí)，不需要刷新。系統(tǒng)運(yùn)行效果如圖3.2所示。
[img]http://lurenjia.net/tech/images/ajax4.jpg[/img]
圖3.2 系統(tǒng)運(yùn)行效果
以下結(jié)合系統(tǒng)自動(dòng)完成控件(auto-complete)，說(shuō)明在ajax模式下客戶端與服務(wù)器交互的實(shí)際過(guò)程。
自動(dòng)完成功能是一個(gè)為用戶提供提示的功能，可以減少用戶的輸入量，從而提高用戶體驗(yàn)。在學(xué)生查找姓名框中只要輸入一個(gè)姓，如輸入“張”；系統(tǒng)就會(huì)自動(dòng)把數(shù)據(jù)庫(kù)中所有姓“張”的學(xué)生全部找出來(lái)，供用戶選擇，用戶只要用鼠標(biāo)點(diǎn)擊或使用方向鍵即可完成輸入。使用效果如圖3.3所示。
當(dāng)用戶輸入“張”時(shí)，系統(tǒng)捕獲到輸入框的一個(gè)keyup事件，調(diào)用事先為keyup事件注冊(cè)的javascript函數(shù)，生成一個(gè)xml字符流：
[br] [br] 張[br] getautolist[br]
這個(gè)字符流通過(guò)sendxml()函數(shù)發(fā)送給服務(wù)器端studentservlet，servlet接收到xml數(shù)據(jù)流后使用dom4j解析，得到action節(jié)點(diǎn)的值為getautolist,然后調(diào)用studentbean中的getautolist方法，查找所有姓張的學(xué)生用戶，序列化成xml流后再由servlet返回給客戶端。返回給客戶端的也是xml數(shù)據(jù)流：

[br] [br] [br] [br] [br] [br] [br]
[img]http://lurenjia.net/tech/images/ajax5.jpg[/img]
圖3.3 自動(dòng)完成功能中客戶端與服務(wù)器交互的過(guò)程
在這里，由于返回的是一組結(jié)構(gòu)化的數(shù)據(jù)，使用responsexml，將傳回的數(shù)據(jù)流轉(zhuǎn)化為xml文檔，用dom解析之后，將學(xué)生信息添加到自動(dòng)完成的提示層中，達(dá)到圖中效果，這樣就完成了整個(gè)交互過(guò)程。系統(tǒng)中其他模塊實(shí)現(xiàn)過(guò)程也類似。
[color=#ff6600][b]四、ajax模式與傳統(tǒng)模式的b/s系統(tǒng)的對(duì)比分析[/b][/color]
為了體現(xiàn)ajax相對(duì)于傳統(tǒng)b/s模式的優(yōu)勢(shì)，將基于ajax技術(shù)的b/s系統(tǒng)和基于傳統(tǒng)b/s模式的相同功能的系統(tǒng)進(jìn)行對(duì)比。
[b]4.1 服務(wù)器負(fù)荷對(duì)比[/b]
進(jìn)行服務(wù)器負(fù)荷的對(duì)比時(shí)使用的監(jiān)測(cè)工具是p6spy和sql profiler。p6spy和sql profiler通過(guò)記錄系統(tǒng)數(shù)據(jù)庫(kù)操作相關(guān)信息，如查詢（query）、statement對(duì)象、結(jié)果集（resultset）以及查詢的流量等，來(lái)間接反應(yīng)服務(wù)器的負(fù)荷。很明顯，上訴指標(biāo)與服務(wù)器負(fù)荷是成正比的，指標(biāo)值越大，也就意味著服務(wù)器負(fù)荷越高。
分別在傳統(tǒng)b/s模式系統(tǒng)和ajax模式系統(tǒng)下，大約每隔5秒添加一條學(xué)生信息，一共添加10條。sql profiler監(jiān)測(cè)結(jié)果如圖4.1所示。
[img]http://lurenjia.net/tech/images/ajax6.jpg[/img] [img]http://lurenjia.net/tech/images/ajax7.jpg[/img]
圖4.1傳統(tǒng)b/s模式(左)和ajax(右)系統(tǒng)下，sql profiler監(jiān)測(cè)結(jié)果
圖中縱坐標(biāo)表示指標(biāo)值，橫坐標(biāo)表示時(shí)間，單位毫秒，其中折線圖表示queries、statements、result set、select statements這些指標(biāo)的值隨時(shí)間推移發(fā)生的變化。下半部分圖縱坐標(biāo)表示流量，單位byte，橫坐標(biāo)表示時(shí)間，單位毫秒。
通過(guò)對(duì)比，很容易看出，由于傳統(tǒng)模式下提交表單之后，頁(yè)面需要刷新，故除了執(zhí)行insert語(yǔ)句插入記錄之外，還需要執(zhí)行select語(yǔ)句，以重新生成頁(yè)面，這就增加了服務(wù)器的處理量。而使用了ajax之后，由于頁(yè)面沒(méi)有刷新（也沒(méi)有必要刷新），系統(tǒng)將新增學(xué)生的信息以xml流在后臺(tái)傳給服務(wù)器，服務(wù)器只進(jìn)行一次insert操作，將操作成功信息傳給客戶端，客戶端通過(guò)dom直接在頁(yè)面上添加新增學(xué)生信息。
從兩個(gè)圖對(duì)比可以看出，使用ajax之后可以減少一半以上的服務(wù)器開銷，而且隨著并發(fā)訪問(wèn)量的增加，這個(gè)差距將進(jìn)一步擴(kuò)大。當(dāng)并發(fā)訪問(wèn)量大于某一闋值，傳統(tǒng)模式的b/s系統(tǒng)的服務(wù)器有可能因?yàn)榇笠?guī)模訪問(wèn)而死機(jī)，但是相同條件下，使用ajax技術(shù)的系統(tǒng)卻可以運(yùn)行良好。
[b]4.2 網(wǎng)絡(luò)流量對(duì)比[/b]
通過(guò)使用netlimiter，監(jiān)測(cè)ie瀏覽器的流量，對(duì)兩種模式系統(tǒng)中完成同樣操作的網(wǎng)絡(luò)流量進(jìn)行對(duì)比。
系統(tǒng)啟動(dòng)之后，在兩個(gè)系統(tǒng)中，分別添加10條學(xué)生信息。得到監(jiān)測(cè)結(jié)果分別如圖4.2所示。圖中左邊是流量的具體數(shù)據(jù)，右上方的圖是發(fā)送數(shù)據(jù)流量隨時(shí)間變化的圖示，右下方的圖是接受到的數(shù)據(jù)流量隨時(shí)間變化的圖示。
[img]http://lurenjia.net/tech/images/ajax8.jpg[/img] [img]http://lurenjia.net/tech/images/ajax9.jpg[/img]
圖4.2傳統(tǒng)b/s模式(左)和ajax(右)系統(tǒng)下，netlimiter監(jiān)測(cè)結(jié)果
流量監(jiān)測(cè)的對(duì)比結(jié)果似乎更加明顯，使用ajax技術(shù)的系統(tǒng)只是在一開始系統(tǒng)載入時(shí)，流量比較大，因?yàn)樗d入大量的js類庫(kù)，但是在之后添加10條記錄的過(guò)程中，每次發(fā)送的數(shù)據(jù)量都在1kb左右，而接收到的流量小得甚至無(wú)法直接從圖中看到。但是沒(méi)有使用ajax技術(shù)的系統(tǒng)，第一次載入和之后的每次添加，接收和發(fā)送的數(shù)據(jù)量都差不多，兩者相加之和每次都在100kb以上。整個(gè)過(guò)程的流量之和分別為1,248,510byte（傳統(tǒng)模式下）和299,435byte（ajax模式下），前者居然是后者的4.1倍。換句話說(shuō)，使用ajax之后大約可以降低76%的網(wǎng)絡(luò)流量。而且隨著添加記錄的數(shù)量的增加，流量差距進(jìn)一步拉大。如表4.1所示。
表4.1 同樣的操作兩個(gè)系統(tǒng)流量比較結(jié)果



添加10條記錄
添加20條記錄
添加30條記錄

傳統(tǒng)模式
1,248,510byte
2,195,370 byte
3,268,735 byte

ajax模式
299,435byte
326,150 byte
360,530 byte

倍數(shù)
4.1倍
6.7倍
9.0倍

[b]4.3 結(jié)果分析[/b]
不管是服務(wù)器負(fù)荷的測(cè)試，還是網(wǎng)絡(luò)流量的測(cè)試，除去測(cè)試的誤差和偶然因素，基于 ajax技術(shù)的b/s系統(tǒng)相比于傳統(tǒng)的b/s模式的系統(tǒng)具有以下優(yōu)勢(shì)。
1. 減輕服務(wù)器的負(fù)擔(dān)和網(wǎng)絡(luò)流量
在前兩節(jié)與傳統(tǒng)b/s模式系統(tǒng)進(jìn)行服務(wù)器負(fù)荷和網(wǎng)絡(luò)流量的對(duì)比中，這點(diǎn)體現(xiàn)的淋漓盡致。ajax的原則是“按需取數(shù)據(jù)”，可以最大程度地減少冗余請(qǐng)求，減少響應(yīng)對(duì)服務(wù)器造成的負(fù)擔(dān)。ajax根據(jù)實(shí)際需要向服務(wù)器端發(fā)送請(qǐng)求，用什么就取什么、用多少就取多少，就不會(huì)有數(shù)據(jù)的冗余和浪費(fèi)，減少了數(shù)據(jù)下載總量，而且更新頁(yè)面時(shí)不用重載全部?jī)?nèi)容，只更新需要更新的那部分，既縮短了用戶等待時(shí)間，也減少了資源的浪費(fèi)。還可以把服務(wù)器負(fù)荷轉(zhuǎn)嫁到客戶端，利于客戶端閑置的處理能力來(lái)處理，如表單驗(yàn)證、客戶端數(shù)據(jù)網(wǎng)格排序、生成圖表等。
2. 帶來(lái)更好的用戶體驗(yàn)
ajax使用xmlhttprequest對(duì)象發(fā)送請(qǐng)求并得到服務(wù)器響應(yīng)，在不重新載入整個(gè)頁(yè)面的情況下用javascript操作dom最終更新頁(yè)面。所以在讀取數(shù)據(jù)的過(guò)程中，用戶所面對(duì)的不是白屏，是原來(lái)的頁(yè)面內(nèi)容（也可以加一個(gè)loading的提示框讓用戶知道處于讀取數(shù)據(jù)過(guò)程），只有當(dāng)數(shù)據(jù)接收完畢之后才更新相應(yīng)部分的內(nèi)容。這種更新瞬間完成，用戶幾乎感覺(jué)不到，這種體驗(yàn)是十分美妙的。在本系統(tǒng)中，利用css，模仿了c/s應(yīng)用程序的菜單、面板等，讓用戶擁有更好的使用體驗(yàn)，感覺(jué)就像在使用一個(gè)c/s程序一樣。
3. 進(jìn)一步促進(jìn)頁(yè)面呈現(xiàn)和數(shù)據(jù)的分離
在b/s模式的系統(tǒng)中，頁(yè)面呈現(xiàn)和數(shù)據(jù)本身沒(méi)有清晰的界限，數(shù)據(jù)和數(shù)據(jù)表現(xiàn)的格式混雜在一起，而基于 ajax技術(shù)的b/s系統(tǒng)采用xml作為數(shù)據(jù)的載體，數(shù)據(jù)通過(guò)dom解析之后表現(xiàn)出來(lái)，能夠做到數(shù)據(jù)與數(shù)據(jù)表現(xiàn)的徹底分離，有利于分工合作、減少頁(yè)面的修改引起的web應(yīng)用程序錯(cuò)誤，提高效率、更加適用目前的系統(tǒng)要求。
4. 降低系統(tǒng)維護(hù)成本
c/s結(jié)構(gòu)的系統(tǒng)在部署時(shí)，系統(tǒng)支持工程師需要為每個(gè)用戶安裝客戶端，在系統(tǒng)日常運(yùn)行時(shí)，支持工程師也需要在現(xiàn)場(chǎng)進(jìn)行維護(hù)和更新。對(duì)于系統(tǒng)開發(fā)商來(lái)說(shuō)，c/s結(jié)構(gòu)的系統(tǒng)部署和維護(hù)成本相對(duì)較高；而經(jīng)常性的進(jìn)行本地系統(tǒng)維護(hù)和升級(jí)給用戶也帶來(lái)很大的不便。
相對(duì)而言，基于ajax技術(shù)的系統(tǒng)，系統(tǒng)開發(fā)商要做的就是讓工程師在服務(wù)器端完成系統(tǒng)的調(diào)試、部署、維護(hù)、更新，基本上無(wú)須在用戶操作現(xiàn)場(chǎng)實(shí)施。這就很大程度上地降低了系統(tǒng)的后期維護(hù)成本，而用戶也不必?fù)?dān)心程序是否會(huì)發(fā)生錯(cuò)誤，只需打開瀏覽器即可。
目前，ajax雖然得到廣大廠商和開發(fā)者的追捧，但它還只是一個(gè)新生事物，并不是十分完美成熟的技術(shù)，所以還是存在一定的不足。
1. 程序兼容性問(wèn)題
ajax大量使用了javascript和xmlhttprequest，它們需要瀏覽器的支持，但是只有ie5.0及以上版本、mozilla1.0、netscape7及以上版本的瀏覽器才完全支持javascript和xmlhttprequest。mozilla雖然也支持xmlhttprequest，但是在mozilla中xmlhttprequest的使用方式有所不同，需要在開發(fā)過(guò)程中，注意保證程序的兼容性。除此之外，有時(shí)候，相同javascript和css的效果在不同的瀏覽器中也存在一些差異。
另外，一些手持移動(dòng)設(shè)備（如手機(jī)、pda等）目前還不能很好的支持ajax。
本系統(tǒng)中，由于需要實(shí)現(xiàn)某些效果，使用了一些ie瀏覽器的特性，使得系統(tǒng)在firefox等其他瀏覽器中一些功能無(wú)法正常使用，沒(méi)有很好的做到跨瀏覽器。
2. 部分瀏覽器功能失效
ajax更新頁(yè)面內(nèi)容的時(shí)候并沒(méi)有刷新整個(gè)頁(yè)面，因此，網(wǎng)頁(yè)的后退功能是失效的。同樣，瀏覽器的“添加到收藏夾”功能也是無(wú)法正常使用，添加到收藏夾的url通常不能跳轉(zhuǎn)到當(dāng)時(shí)的狀態(tài)。為了解決這些問(wèn)題，一些ajax的程序往往屏蔽了瀏覽器的這些功能按鈕和快捷鍵。
在本系統(tǒng)中，使用了ie瀏覽器支持的showmodaldialog方法打開應(yīng)用程序，隱藏了瀏覽器的工具欄和菜單，從而避免用戶使用后退、刷新等功能。遺憾的是，在其他瀏覽器中，并不支持showmodaldialog方法。
目前，ajax受到了全世界開發(fā)者的熱切關(guān)注，基于ajax技術(shù)的b/s系統(tǒng)也漸漸在實(shí)際應(yīng)用中變得越來(lái)越多。相信在不久的將來(lái)，隨著不同瀏覽器之間兼容性的不斷提高，ajax將會(huì)成為信息系統(tǒng)開發(fā)領(lǐng)域中主要的開發(fā)模式。
本文在研究過(guò)程中，對(duì)ajax技術(shù)進(jìn)行了初步嘗試，一些問(wèn)題沒(méi)有很好的解決，如瀏覽器的兼容性問(wèn)題，為了實(shí)現(xiàn)一些效果，運(yùn)用了一些ie6.0瀏覽器才支持的特性，以致于在firefox等其他瀏覽器，或者ie的早期版本中，一些功能無(wú)法正常使用。這需要在今后的開發(fā)中，繼續(xù)改進(jìn)。