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