郭瑾，高偉，劉德山

0 引言

在傳統(tǒng)的瀏覽器與服務器的交互方式中，當用戶觸發(fā)一個HTTP請求到服務器，服務器對其進行處理后，再返回一個新的Web頁到瀏覽器，每當服務器處理瀏覽器提交的請求時，用戶總是被強制進入提交→等待→重新顯示模式，這不僅效率低，而且大大減弱了用戶體驗。同時，刷新時造成的數(shù)據(jù)重復請求也加大了服務器的負擔。

Ajax提供與服務器異步通信的能力，可以在瀏覽器快速無刷新的顯示信息，它可以使得系統(tǒng)響應更敏捷、交互性更強、用戶體驗更豐富。

1 Ajax簡介

Ajax是于2005年由Jesse James Garrett 最先提出的[1]。Ajax（Asynchronous JavaScript and XML）自從產(chǎn)生以來，催生了一系列基于Web的新的服務方式，其核心是利用Ajax的異步交互，減輕服務器負擔，提高應用操作的執(zhí)行效率。異步是指客戶端的請求/響應和用戶的動作是異步進行的，客戶端在等待服務器響應時不必阻塞用戶，用戶可以繼續(xù)進行其他的行為。

Ajax使用XHTML和CSS標準化呈現(xiàn)，使用DOM實現(xiàn)動態(tài)顯示和交互，使用XML和XSTL進行數(shù)據(jù)交換與處理，使用XMLHttpRequest對象進行異步數(shù)據(jù)讀取，使用JavaScript綁定和處理所有數(shù)據(jù)。

Ajax應用程序在用戶和服務器之間引入了一個中間層：Ajax引擎，使用戶操作與服務器響應異步化，改變了使用頁面重載的響應方式。當用戶提交請求時，使用JavaScript和XML立即跟新UI（User Inte-

Face），并向服務器發(fā)出異步請求；當請求返回時，使用JavaScript和CSS來相應地更新UI。用戶端完全沒有被中斷的感覺。傳統(tǒng)的Web應用交互模式是同步的，而基于Ajax技術(shù)的Web應用交互模式是異步的，如圖1所示[1]。因此Ajax應用與傳統(tǒng)的Web應用的區(qū)別主要在3個方面：

（1）不刷新整個頁面，在頁面內(nèi)與服務器通信；

（2）使用異步方式與服務器通信，不需要打斷用戶的操作，具有更加迅速的響應能力；

（3）應用僅有少量頁面組成，大部分交互在頁面內(nèi)完成，不需要切換整個頁面。

圖1 兩種Web應用模型交互模式的對比

由此可見，Ajax使得Web應用更加動態(tài)，并且提供了表現(xiàn)能力豐富的Ajax UI組件。

Ajax技術(shù)當中，最核心的技術(shù)就是XMLHttpRequest對象，它是Ajax技術(shù)與眾不同的地方。Ajax的無刷新更新頁面的效果，就是由XMLHttpRequest對象實現(xiàn)的。

XMLHttpRequest對象在IE5中首次出現(xiàn)，負責在客戶端異步向服務器發(fā)送請求和處理響應。XML-HttpRequest使用戶使用JavaScript向服務器提出請求并處理響應，同時不阻塞用戶[2]。

XMLHttpRequest對象提供了一系列屬性和方法來向服務器發(fā)送異步的Http請求。在服務器處理用戶請求的過程中，XMLHttpRequest監(jiān)聽服務器的狀態(tài)，并根據(jù)這些狀態(tài)指示JavaScript做相應的處理。當服務器順利完成響應用戶行為的動作、并將響應數(shù)據(jù)返回時，XMLHttpRequest對象能夠回調(diào)響應的處理函數(shù)；通過XMLHttpRequest提供的response系列方法，可以將這些響應數(shù)據(jù)由JavaScript操縱的DOM更新Web頁面內(nèi)容。

2 基于Ajax的網(wǎng)絡答疑系統(tǒng)框架

網(wǎng)絡答疑系統(tǒng)是基于J2EE和MVC開發(fā)模式，技術(shù)上采用Struts+Spring+Hibernate 3層開發(fā)模式。

MVC設計模式由控制器（Controller）、模型（Model）、視圖（View）3部分組成[3]。模型表示應用程序的業(yè)務邏輯，獲取業(yè)務數(shù)據(jù)并按照業(yè)務規(guī)則處理業(yè)務數(shù)據(jù)，所有的業(yè)務操作都在該層，是應用程序的核心。視圖是整個應用程序的外在表現(xiàn)，主要功能是模塊的顯示以及根據(jù)業(yè)務處理結(jié)果，生成返回至客戶端的頁面。控制器主要功能是將模型和視圖聯(lián)系在一起，是一個分發(fā)器，不做任何數(shù)據(jù)處理。MVC模式實現(xiàn)了數(shù)據(jù)層、顯示層和業(yè)務層的分離，提高了系統(tǒng)的可維護性、可擴展性和可重用性。

網(wǎng)絡答疑系統(tǒng)由五層組成，如圖2：

圖2 基于Struts、Spring和Hibernate的Web開發(fā)框架

這5層分別是：

客戶層：客戶端使用瀏覽器進入系統(tǒng)訪問，與服務器端軟件進行交互；

表示層即Web層：使用Struts框架，處理用戶的請求并做出相應的響應，處理應用程序的異常，在表單提交時進行數(shù)據(jù)校驗，負責數(shù)據(jù)顯示和用戶交互；

業(yè)務邏輯層：使用Spring框架通過IoC（反轉(zhuǎn)控制）機制進行業(yè)務邏輯的調(diào)用[4]，包括：處理應用程序的業(yè)務邏輯和業(yè)務校驗、數(shù)據(jù)庫的事務管理、數(shù)據(jù)訪問層的連接管理等；

數(shù)據(jù)持久層：使用Hibernate框架從數(shù)據(jù)源中獲取數(shù)據(jù)，實現(xiàn)數(shù)據(jù)的查詢、更新和刪除；

數(shù)據(jù)源層：數(shù)據(jù)庫系統(tǒng)負責管理、存儲、組織和分析系統(tǒng)的相關業(yè)務數(shù)據(jù)和用戶相關數(shù)據(jù)。

以上框架充分利用了3種開源框架各自的優(yōu)勢，Struts引入MVC模式實現(xiàn)了視圖、模型和控制互相分離，實現(xiàn)了表示邏輯和業(yè)務邏輯的解藕；Hibernate完成對象和關系數(shù)據(jù)庫之間的映射，并提供高效的數(shù)據(jù)存儲和獲取能力[5]；Spring提供了IoC容器，完成持久訪問對象的注入和業(yè)務邏輯的事務管理，關聯(lián)Web層和數(shù)據(jù)持久層。采用多層體系結(jié)構(gòu)，不僅實現(xiàn)了層間的松散耦合，提高了代碼的可重用性及開發(fā)效率，并且便于維護。

在網(wǎng)絡答疑系統(tǒng)中采用基于MVC模式的SSH 3層框架結(jié)構(gòu)，該結(jié)構(gòu)在服務器端提高了系統(tǒng)的靈活性，擴展性大大加強，便于調(diào)試，降低了維護成本。但客戶端只是采用傳統(tǒng)的瀏覽器與服務器的交互方式，這使得Struts在一些交互性強的頁面應用不理想，導致刷新頁面頻繁，用戶等待時間長。在網(wǎng)絡答疑系統(tǒng)中，頁面交互頻繁，這樣不僅導致系統(tǒng)效率低，而且造成時間和網(wǎng)絡資源的浪費。

基于Struts在客戶端的表現(xiàn)不足以及Ajax在客戶端的特點，在網(wǎng)絡答疑系統(tǒng)中將Ajax和MVC模式相結(jié)合，充分發(fā)揮Ajax在客戶端的異步交互能力和MVC的可擴展行。加入Ajax后，網(wǎng)絡答疑系統(tǒng)在原來的MVC 3層架構(gòu)的基礎上形成了Ajax引擎、Struts層、Spring層和Hibernate層4層架構(gòu)，客戶端表現(xiàn)出優(yōu)秀的動態(tài)顯示和交互能力。新的架構(gòu)見圖3：

圖3 Ajax在網(wǎng)絡答疑系統(tǒng)中的架構(gòu)圖

通過在網(wǎng)絡答疑系統(tǒng)的客戶端增加一個Ajax引擎，負責在客戶端和用戶之間交互，實現(xiàn)Ajax的功能。

當用戶打開一個Web頁面時，就載入了Ajax引擎。Ajax引擎初始化后，就開始初始化XMLHttpRequest對象，捕捉用戶的行為，開始與用戶的交互。當用戶的某些請求觸發(fā)Ajax時，Ajax在后臺將用戶的數(shù)據(jù)異步請求送到Struts框架中的控制器ActionServlet處理，ActionServlet找到對應的Action和ActionForm，在進行Form驗證，驗證通過則調(diào)用Action的Execute方法。在方法體內(nèi)，調(diào)用業(yè)務邏輯模塊，由Hibernate在“幕后”完成與數(shù)據(jù)庫的交互。即業(yè)務邏輯類里通過HQL語句操作業(yè)務對象，Hibernate把HQL轉(zhuǎn)換成SQL，通過O/R映射文件實現(xiàn)具體對數(shù)據(jù)源的操作，即穿過持久層映射到具體的數(shù)據(jù)庫表。ActionServlet接受Execute方法返回的ActionForward對象，轉(zhuǎn)發(fā)到ActionForward指定的另一個Action，Action層再將數(shù)據(jù)封裝成XML格式返回給Ajax引擎。Ajax引擎解析服務器傳遞過來的數(shù)據(jù)，并借助于DOM、DHTML更新頁面，顯示數(shù)據(jù)，完成一次請求響應。具體的應用流程框圖如圖4：

Ajax的所有動作都是在后臺進行的，這樣就不會阻塞用戶的行為，也避免了用戶的等待時間。同時由于Ajax傳輸和接受的數(shù)據(jù)量相對都較小，因此頁面更新速度快，用戶有一種實時響應的體驗。另外，添加Ajax引擎后，使客戶端承擔部分服務器端邏輯，減輕了服務器的負擔，同時從服務器端剝離了與業(yè)務無關的頁面交互邏輯，優(yōu)化了代碼結(jié)構(gòu)。

圖4 一次請求響應的應用流程框圖

3 Ajax技術(shù)在網(wǎng)絡答疑系統(tǒng)中的應用示例

在網(wǎng)絡答疑系統(tǒng)中，Ajax主要用于頁面交互和顯示。在答疑系統(tǒng)中，按照章節(jié)進行問題的提出和答案的顯示，學生在提問之前，可以先按章節(jié)進行瀏覽查找問題是否已經(jīng)存在以及是否已經(jīng)給出答案，這樣按照章節(jié)逐層細化，呈現(xiàn)在用戶面前的是一個井井有條、層次感十分鮮明、簡單易用的網(wǎng)絡答疑系統(tǒng)軟件。因此，在該系統(tǒng)中使用了樹形目錄來實現(xiàn)，并采用Ajax技術(shù)實現(xiàn)樹形目錄的動態(tài)顯示。

根據(jù)網(wǎng)絡答疑系統(tǒng)的多層架構(gòu)體系的構(gòu)造。在具體實現(xiàn)時，表示層專注于樹的外觀顯示，業(yè)務邏輯層完成處理樹的生成、變化。下面分別介紹：

3.1 表示層

當點擊某節(jié)點前的“ + ”、“ - ”圖片時通過DIV 的style樣式的display 屬性控制子節(jié)點的展開和隱藏。部分代碼如下：

3.2 業(yè)務邏輯層

3.2.1 動態(tài)加載

如果一次性獲取完整的先序樹，構(gòu)造成XML提供給JavaScript解析，數(shù)據(jù)量越大，消耗的資源越多，客戶端響應延遲時間就越長，因此對于大數(shù)據(jù)量的樹，采用動態(tài)加載方式，即每次單擊“+”圖片時，判斷是否已加載子節(jié)點數(shù)據(jù)，如果未加載則通過Ajax的XMLHTTP組件XMLHttpRequest對象異步發(fā)送請求，連接服務器獲取節(jié)點數(shù)據(jù)。部分代碼如下：

3.2.1 樹形結(jié)構(gòu)的構(gòu)造

從數(shù)據(jù)庫中返回的是有序的先序樹，而XML是完整的樹型結(jié)構(gòu)文檔，所以將樹型數(shù)據(jù)構(gòu)造成預定義的XML格式，只需從根節(jié)點開始，遍歷一遍樹，即可將樹全部生成。部分代碼如下：

在初始化頁面時只讀出根節(jié)點的內(nèi)容并顯示，在用戶展開某一個根結(jié)點時，判斷是否已經(jīng)加載了子節(jié)點的數(shù)據(jù)，如果未加載調(diào)用Ajax引擎，通過XMLHtt- pRequest對象異步發(fā)出請求，連接到服務器，通過GET方法異步連接到URL加載數(shù)據(jù)。這樣，每次只取一個節(jié)點的子節(jié)點序列，按XML格式封裝成樹的文檔結(jié)構(gòu)，提供給JavaScript的dhtmlTreeObject.prototype.-insertItem()解析并組織好HTML輸出節(jié)點。

由于使用了異步交互方式，在與服務器交互的同時用戶仍然可以繼續(xù)頁面的其它操作，并且每次只是讀取子節(jié)點的數(shù)據(jù)，而不是加載所有的子節(jié)點和葉子節(jié)點的全部數(shù)據(jù)，這樣，所取即所用的方式不會產(chǎn)生數(shù)據(jù)的冗余和浪費，減少了數(shù)據(jù)下載量，避免了更新頁面時重載全部內(nèi)容，縮短了用戶等待時間。

4 結(jié)語

在網(wǎng)絡答疑系統(tǒng)中，采用了基于Ajax的Struts+Spring+Hibernate的架構(gòu)模式。此框架的應用一方面減少了用戶交互過程中的等待時間，提高了系統(tǒng)的響應速度，同時采用成熟的SSH框架，縮短開發(fā)時間，降低了開發(fā)成本，增強了系統(tǒng)的可維護性和可擴展性。Ajax引擎的應用彌補了SSH框架在客戶端的不足，實現(xiàn)了異步交互和動態(tài)刷新顯示的功能，也避免了刷新等待造成的時間和帶寬的浪費，提高了系統(tǒng)的資源利用率，比傳統(tǒng)的Web應用模式具有更強的交互性。

[1] Jesse James Garrett.Ajax: A new approach to web applications [EB/OL] .http://www.adaptivepath.com.

[2] Ryan Asleson,Nathaniel T. Schutta. Foundation of Ajax[M] .Apress,Oct 2005.

[3] Husted T, Dumoulin C, Franciscus G, et al. Struts in action[M] .Amercia:Manning Publications Co,2003:1-581.

[4] Johnson R, Hoeller J,Arendsen A. et al. Spring-Java/J2EE application framework reference documentation[EB/OL] .http://static.springframework.org/spring/docs/1.2.x/referen ce/index.html.

[5] King G. Hibernate reference [EB/OL] .http://www.hibernate.org/hib_docs/v3/reference/en/html/architecture.html.