基于DWR框架快速開發(fā)AJAX應(yīng)用程序

摘要：AJAX，一個異步JavaScript和XML的縮略詞，是當(dāng)今快速發(fā)展的Web開發(fā)界中十分熱門的技術(shù)。本文首先分析了傳統(tǒng)Web技術(shù)目前所遇到的一些問題，然后介紹了AJAX的基本概念、相關(guān)技術(shù)和優(yōu)點，最后介紹如何利用一個AJAX框架（DWR）快速構(gòu)造一個AJAX應(yīng)用程序。

關(guān)鍵詞：AJAX

1 概述

近年來隨著Internet的迅速發(fā)展，基于各種技術(shù)的網(wǎng)絡(luò)應(yīng)用程序廣泛應(yīng)用于人們的生活中。B/S架構(gòu)由于零部署，易升級，操作簡單等巨大優(yōu)勢，迅速成為企業(yè)應(yīng)用軟件系統(tǒng)架構(gòu)的主流。然而在過去幾年中，人們在服務(wù)器端的開發(fā)投入了大量的精力，各種成熟的開發(fā)框架以及開發(fā)技術(shù)的不斷出現(xiàn)，使得Web應(yīng)用程序在性能等方面有了很大的提高。然而Web用戶界面對響應(yīng)靈敏方面卻投入不足。在傳統(tǒng)的Web應(yīng)用采用同步交互過程中，用戶首先向HTTP服務(wù)器發(fā)送一個請求。然后服務(wù)器執(zhí)行某些任務(wù)，再向發(fā)出請求的用戶返回一個HTML頁面。這是一種不連貫的用戶體驗，服務(wù)器在處理請求的時候，用戶多數(shù)時間處于等待的狀態(tài)。當(dāng)軟件設(shè)計越來越講究人性化的時候，這種用戶體驗簡直與這種原則背道而馳。隨著AJAX技術(shù)的出現(xiàn)，使得Web應(yīng)用可以為用戶提供更加自然、靈敏的瀏覽體驗。

2 AJAX技術(shù)體系

2.1 AJAX的相關(guān)概念

AJAX這個概念的最早提出者Jesse James Garrett認(rèn)為：AJAX是Asynchronous JavaScript and XML（異步JavaScript和XML）的縮寫[1]。其中異步意味著你可以經(jīng)由HTTP協(xié)議向一個服務(wù)器發(fā)出請求并且在等待該響應(yīng)時繼續(xù)處理另外的數(shù)據(jù)。AJAX并不是一門新的語言或技術(shù)，它實際上是幾項技術(shù)按一定的方式組合，在共同的協(xié)作中發(fā)揮各自的作用。它包括以下技術(shù)：JavaScript、XHTML和CSS、DOM、XML和XSLT、XMLHttpRequest。其中：使用XHTML和CSS標(biāo)準(zhǔn)化呈現(xiàn)，使用DOM實現(xiàn)動態(tài)顯示和交互，使用XML和XSLT進(jìn)行數(shù)據(jù)交換與處理，使用XMLHttpRequest對象同服務(wù)器進(jìn)行異步數(shù)據(jù)讀取，最后用JavaScript綁定和處理所有數(shù)據(jù)[2]。下圖1為AJAX Web應(yīng)用模型。

2.2 AJAX的交互過程

與傳統(tǒng)的Web應(yīng)用不同，AJAX采用異步交互過程，使用戶從請求/響應(yīng)的循環(huán)中解脫出來。AJAX的工作原理相當(dāng)于在用戶和服務(wù)器之間加了中間層即AJAX引擎，使用戶操作與服務(wù)器響應(yīng)異步化。從而消除了網(wǎng)絡(luò)交互過程中的處理－等待－處理缺點。用戶的瀏覽器在執(zhí)行任務(wù)時即裝載了AJAX引擎。AJAX引擎，實際上是一個比較復(fù)雜的JavaScript應(yīng)用程序，它負(fù)責(zé)編譯用戶界面及與服務(wù)器之間的交互。AJAX引擎允許用戶與應(yīng)用軟件之間的交互過程異步進(jìn)行，獨立于用戶與網(wǎng)絡(luò)服務(wù)器間的交流?，F(xiàn)在可以用JavaScript調(diào)用AJAX引擎來代替產(chǎn)生一個HTTP的用戶動作，內(nèi)存中的數(shù)據(jù)編輯、頁面導(dǎo)航、數(shù)據(jù)校驗這些不需要重新載入整個頁面的需求可以交給AJAX來執(zhí)行[3]。

AJAX實質(zhì)上也是遵循Request/Server模式，所以基本上的流程是：對象初始化，發(fā)送請求，服務(wù)器接收，服務(wù)器返回，客戶端接收，修改客戶端頁面內(nèi)容。只不過這個過程是異步的，下圖2為AJAX異步交互過程。

2.3 AJAX技術(shù)的優(yōu)點

AJAX的出現(xiàn)，揭開了無刷新更新頁面時代的序幕，實現(xiàn)了Web瀏覽器技術(shù)中大量的尚未實現(xiàn)的潛力。AJAX尤其適用于交互較多，頻繁讀數(shù)據(jù)，數(shù)據(jù)分類良好的Web應(yīng)用。它在應(yīng)用中主要具有以下優(yōu)點：

①AJAX的原則是“按需取數(shù)據(jù)”，所以減少了冗余數(shù)據(jù)請求和響應(yīng)對服務(wù)器造成的負(fù)擔(dān)。

②無刷新更新頁面，減少用戶實際和心理等待時間。

③AJAX使Web中的界面與應(yīng)用分離，這樣有利于頁面的開發(fā)和維護(hù)。

④使用AJAX可以把以前的一些服務(wù)器負(fù)擔(dān)的工作轉(zhuǎn)嫁到客戶端，利于客戶端閑置的處理能力來處理，減輕服務(wù)器和帶寬的負(fù)擔(dān)，節(jié)約空間和帶寬租用成本。

⑤AJAX具有更好的用戶體驗，也可以調(diào)用外部數(shù)據(jù)。

⑥基于標(biāo)準(zhǔn)化的并被廣泛支持和技術(shù)，并且不需要插件或下載小程序。

3 結(jié)合DWR開發(fā)AJAX程序

3.1 DWR基本概念

DWR(Direct Web Remoting)項目是Apache的一個開源的解決方案，它包含服務(wù)器端Java庫、一個DWR servlet以及JavaScript庫。DWR是一個引擎，可以把服務(wù)器端Java對象的方法公開給JavaScript代碼。使用DWR可以有效地從應(yīng)用程序代碼中把AJAX的全部請求-響應(yīng)循環(huán)消除掉。這意味著客戶端代碼再也不需要直接處理XMLHttpRequest對象或者服務(wù)器的響應(yīng)，不再需要編寫對象的序列化代碼或者使用第三方工具才能把對象變成XML，甚至不再需要編寫servlet代碼把AJAX請求調(diào)整成對Java對象的調(diào)用。

DWR是作為Web應(yīng)用程序中的servlet部署的。這個servlet有兩個主要作用：首先，對于公開的每個類，DWR動態(tài)地生成包含在Web頁面中的JavaScript。生成的JavaScript 包含存根函數(shù)，代表Java類上的對應(yīng)方法，并在幕后執(zhí)行XMLHttpRequest。這些請求被發(fā)送給DWR，這時它的第二個作用就是把請求翻譯成服務(wù)器端Java對象上的方法調(diào)用并把方法的返回值放在servlet響應(yīng)中發(fā)送回客戶端，編碼成JavaScript。DWR允許迅速而簡單地創(chuàng)建到服務(wù)器端對象的AJAX接口，而不需要編寫任何servlet 代碼、對象序列化代碼或客戶端XMLHttpRequest代碼。這種從Java到JavaScript調(diào)用機制類似于常規(guī)的RPC機制，或RMI或者SOAP.但是它運行在web上，不需要任何瀏覽器插件[4]。

3.2 基于DWR的AJAX開發(fā)

這里以在智能小區(qū)信息平臺中實現(xiàn)的部分AJAX為例，介紹基于DWR的AJAX開發(fā)全過程。本例中，用戶可以通過無刷新的頁面在不同時間段對不同的能耗類別進(jìn)行查詢和使用量統(tǒng)計。該例中包含了兩個主要的類分別是Energy.java和EnergyAccount.java。其中Energy.java類是一個有著屬性和getter/setter方法的簡單的Java類。EnergyAccount.java是數(shù)據(jù)訪問類，用來查詢數(shù)據(jù)庫并基于用戶的搜索標(biāo)準(zhǔn)來返回信息。

首先設(shè)置DWR的使用：將DWR的jar文件拷入Web應(yīng)用的WEB-INF/lib目錄中，在web.xml中增加一個servlet聲明，并創(chuàng)建DWR的配置文件。DWR的分發(fā)中需要使用一個單獨的jar文件。你必須將DWR servlet加到應(yīng)用的WEB-INF/web.xml中部署描述段中去。

dwr-invoker DWR Servlet

Direct Web Remoter Servlet

uk.ltd.getahead.dwr.DWRServlet

debugtrue

dwr-invoker/dwr/*

然后你必須讓DWR知道通過XMLHttpRequest對象，什么對象將會接收請求。這個任務(wù)由叫做dwr.xml的配置文件來完成。在配置文件中，定義了DWR允許你從網(wǎng)頁中調(diào)用的對象。從設(shè)計上講，DWR允許訪問所有公布類的公共方法，但在我們的例子中，我們只允許訪問幾個方法。下面是我們示例的配置文件：

dwr.xml 文檔的根元素是dwr。在這個元素內(nèi)是allow元素，它指定DWR進(jìn)行遠(yuǎn)程的類。allow的兩個子元素是create和convert。create元素告訴DWR應(yīng)當(dāng)公開給AJAX請求的服務(wù)器端類，并定義DWR應(yīng)當(dāng)如何獲得要進(jìn)行遠(yuǎn)程的類的實例。這里的creator屬性被設(shè)置為值new，這意味著DWR應(yīng)當(dāng)調(diào)用類的默認(rèn)構(gòu)造函數(shù)來獲得實例。convert則負(fù)責(zé)這些方法的參數(shù)和返回類型。convert元素的作用是告訴DWR在服務(wù)器端Java對象表示和序列化的JavaScript之間如何轉(zhuǎn)換數(shù)據(jù)類型。

配置完成后，你就可以啟動你的Web應(yīng)用了，這時DWR會為從你的HTML或JSP上調(diào)用所需方法作好準(zhǔn)備，并不需要你創(chuàng)建JavaScript文件。在energystatistic.jsp文件中，我們必須增加由DWR提供的JavaScript接口，還有DWR引擎，加入以下到我們的代碼中：

在energystatistic.jsp文件中創(chuàng)建了一個JavaScript函數(shù)：其中EnergyAccount.countEnergy ()函數(shù)是DWR動態(tài)地生成包含在Web頁面中的JavaScript。中display()函數(shù)，它指明了當(dāng)接收到服務(wù)端的返回時DWR將會調(diào)用的JavaScript方法。display于是被調(diào)用來在HTML頁面中顯示統(tǒng)計結(jié)果。下面是在這個交互場景中所使用到的JavaScript函數(shù):

function count() {

$(\"resultTable\").style.display = 'none';

var energyclass = document.getElementById(\"energyclass\").value;

var year = document.getElementById(\"year\").value;

EnergyAccount.countEnergy (display， energyclass， year);

}

function display (data) {

document.getElementById(\"month\").innerHTML = data;

…

}

4 結(jié)語

本文系統(tǒng)的介紹了AJAX技術(shù)體系，并展示了如何利用DWR框架開發(fā)AJAX應(yīng)用程序。通過AJAX技術(shù)，能夠大幅度提高Web應(yīng)用的性能，用戶的體驗可以得到大幅提升。然而盡管AJAX技術(shù)已經(jīng)取得了極大進(jìn)展，但它在對移動設(shè)備的支持上、流媒體的支持上、AJAX引擎的兼容性上仍有待進(jìn)一步研究。AJAX是一個快速發(fā)展的領(lǐng)域，不斷涌現(xiàn)的新技術(shù)必將快速推動Web應(yīng)用的發(fā)展。

參考文獻(xiàn)：

[1]Brett McLaughlin，Introduction to Ajax [EB/OL]，http://www-128.ibm.com/developerworks/xml/library/wa-ajaxintro1.html，2005.

[2]Jim Ley，Using the XML HTTP Request object [EB/OL]，http://www.jibbering.com/2002/4httprequest.html，2006.

[3]Jesse James Garrett，Ajax: A New Approach to Web Applications [EB/OL]，http://www.adaptivepath.com/publications/

essays/archives/000385.php，2005.

[4]Joe，DWR:Easy AJAX for JAVA [EB/OL]，http://getahead.ltd.uk/dwr/index，2005.