基于DWR框架快速開發AJAX應用程序

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

關鍵詞：AJAX

1 概述

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

2 AJAX技術體系

2.1 AJAX的相關概念

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

2.2 AJAX的交互過程

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

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

2.3 AJAX技術的優點

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

①AJAX的原則是“按需取數據”，所以減少了冗余數據請求和響應對服務器造成的負擔。

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

③AJAX使Web中的界面與應用分離，這樣有利于頁面的開發和維護。

④使用AJAX可以把以前的一些服務器負擔的工作轉嫁到客戶端，利于客戶端閑置的處理能力來處理，減輕服務器和帶寬的負擔，節約空間和帶寬租用成本。

⑤AJAX具有更好的用戶體驗，也可以調用外部數據。

⑥基于標準化的并被廣泛支持和技術，并且不需要插件或下載小程序。

3 結合DWR開發AJAX程序

3.1 DWR基本概念

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

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

3.2 基于DWR的AJAX開發

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

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

dwr-invoker DWR Servlet

Direct Web Remoter Servlet

uk.ltd.getahead.dwr.DWRServlet

debugtrue

dwr-invoker/dwr/*

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

dwr.xml 文檔的根元素是dwr。在這個元素內是allow元素，它指定DWR進行遠程的類。allow的兩個子元素是create和convert。create元素告訴DWR應當公開給AJAX請求的服務器端類，并定義DWR應當如何獲得要進行遠程的類的實例。這里的creator屬性被設置為值new，這意味著DWR應當調用類的默認構造函數來獲得實例。convert則負責這些方法的參數和返回類型。convert元素的作用是告訴DWR在服務器端Java對象表示和序列化的JavaScript之間如何轉換數據類型。

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

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

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 結語

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

參考文獻：

[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.