DWR讓AJAX如此簡單

作者:Cloves Carneiro

譯者:simmone

版權聲明:任何獲得Matrix授權的網站,轉載時請務必以超鏈接形式標明文章原始出處和作者信息及本聲明

作者:Cloves Carneiro;simmone

原文地址:http://www.javaworld.com/javaworld/jw-06-2005/jw-0620-dwr.html

中文地址:http://www.matrix.org.cn/resource/article/43/43926_DWR_AJAX.html

關鍵詞: DWR javascript:void(0);">AJAX

概述

這篇文章闡述了使用開源項目DWR(直接Web遠程控制)和javascript:void(0);">AJAX(異步JavaScript和XML)的概念來提高Web應用的可用性。作者一步步來展示DWR如何使得javascript:void(0);">AJAX的應用既簡單又快捷。(1600字;2005年6月20日)

javascript:void(0);">AJAX,或者說是異步JavaScript和XML,描述了一種使用混合了HTML(或XHTML)和層疊樣式表作爲表達信息,來創建交互式的Web應用的開發技術;文檔對象模型(DOM),JavaScript,動態地顯示和與表達信息進行交互;並且,XMLHttpRequest對象與Web服務器異步地交換和處理數據。

因特網上許多例子展示了在一個HTML文件內部使用XMLHttpRequest與服務器端進行交互的必要的步驟。當手工地編寫和維護XMLHttpRequest代碼時,開發者必須處理許多潛在的問題,特別是類似于跨浏覽器的DOM實現的兼容性這樣的問題。這將會導致在編碼和調試Javascript代碼上面花費數不清的時間,這顯然對開發者來說很不友好。

DWR(直接Web遠程控制)項目是在Apache許可下的一個開源的解決方案,它供給那些想要以一種簡單的方式使用javascript:void(0);">AJAX和XMLHttpRequest的開發者。它具有一套Javascript功能集,它們把從HTML頁面調用應用服務器上的Java對象的方法簡化了。它操控不同類型的參數,並同時保持了HTML代碼的可讀性。

DWR不是對一個設計的插入,也不強迫對象使用任何種類的繼承結構。它和servlet框架內的應用配合的很好。對缺少DHTML編程經驗的開發者來說,DWR也提供了一個JavaScript庫包含了經常使用的DHTML任務,如組裝表,用item填充select下拉框,改變HTML元素的內容,如<div>和<span>

DWR網站是詳盡的並且有大量的文檔,這也是這篇文章的基礎。一些例子用來展示DWR如何使用和用它的庫可以完成什麽樣的工作

這篇文章讓讀者看到了一個使用了DWR的Web應用是如何一步步建立的。我會展示創建這個簡單的示例應用的必要的細節,這個應用是可下載的並且可以在你的環境中布署來看看DWR如何工作。

注意:找到有關javascript:void(0);">AJAX的信息並不困難;網頁上有幾篇文章和博客的條目涵蓋了這個主題,每一個都試圖指出和評論這個概念的不同的方面。在資源部分,你會找到一些有趣的指向示例和文章的鏈接,來學習javascript:void(0);">AJAX的更多的內容。

示例應用

這篇文章使用的示例應用模擬了多倫多的一個公寓出租搜索引擎。用戶可以在搜索前選擇一組搜索標准。爲了提高交互性,javascript:void(0);">AJAX中以下兩種情況下使用:

·應用通告用戶配合他的選擇會返回多少搜索結果。這個數字是實時更新的-使用javascript:void(0);">AJAX-當用戶選擇的臥室和浴室的數量,或者價格範圍變化時。當符合標准的搜索結果沒有或太多時,用戶就沒有必要點擊搜索按紐。

·數據庫查詢並取回結果是由javascript:void(0);">AJAX完成的。當用戶按下顯示結果按鈕時,數據庫執行搜索。這樣,應用看起來更具響應了,而整個頁面不需要重載來顯示結果。

數據庫

我們使用的數據庫是HSQL,它是一種占用資源很小的Java SQL數據庫引擎,可以不需要安裝和配置的與Web應用捆綁在一起。一個SQL文件被用來在Web應用的上下文啓動時創建一個內存中的表並添加一些記錄。

Java類

應用包含了兩個主要的類叫Apartment和ApartmentDAO。Apartment.java類是一個有著屬性和getter/setter方法的簡單的Java類。ApartmentDAO.java是數據訪問類,用來查詢數據庫並基于用戶的搜索標准來返回信息。ApartmentDAO類的實現的直接了當的;它直接使用了Java數據庫聯接調用來得到公寓的總數和符合用戶請求的可用公寓的列表。

DWR配置和使用

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

<servlet>

<servlet-name>dwr-invoker</servlet-name>

<display-name>DWR Servlet</display-name>

<description>Direct Web Remoter Servlet</description>

<servlet-class>uk.ltd.getahead.dwr.DWRServlet</servlet-class>

<init-param>

<param-name>debug</param-name>

<param-value>true</param-value>

</init-param>

</servlet>

<servlet-mapping>

<servlet-name>dwr-invoker</servlet-name>

<url-pattern>/dwr/*</url-pattern>

</servlet-mapping>

一個可選的步驟是設置DWR爲調試模式—象上面的例子那樣—在servlet描述段中將debug參數設爲true。當DWR在調試模式時,你可以從HTMl網頁中看到所有的可訪問的Java對象。包含了可用對象列表的網頁會出現在/WEBAPP/dwr這個url上,它顯示了對象的公共方法。所列方法可以從頁面中調用,允許你,第一次,運行服務器上的對象的方法。下圖顯示了調試頁的樣子:

調試頁

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

<dwr>

<allow>

<convert converter="bean" match="dwr.sample.Apartment"/>

<create creator="new" javascript="ApartmentDAO" class="dwr.sample.ApartmentDAO">

<include method="findApartments"/>

<include method="countApartments"/>

</create>

</allow>

</dwr>

上面的文件實現了我們例子中的兩個目標。首先,<convert>標記告訴DWR將dwr.sample.Apartment對象的類型轉換爲聯合數組,因爲,出于安全的原因,DWR默認的不會轉換普通bean。第二,<create>標記讓DWR暴露出dwr.sample.ApartmentDAO類給JavaScript調用;我們在頁面中使用JavaScript文件被javascript屬性定義。我們必須注意<include>標記,它指明了dwr.sample.ApartmentDAO類的哪些方法可用。

HTML/JSP代碼

配置完成後,你就可以啓動你的Web應用了,這時DWR會爲從你的HTML或Java服務器端頁面(JSP)上調用所需方法作好准備,並不需要你創建JavaScript文件。在search.jsp文件中, 我們必須增加由DWR提供的JavaScript接口,還有DWR引擎,加入以下三行到我們的代碼中:

<script src='dwr/interface/ApartmentDAO.js'></script>

<script src='dwr/engine.js'></script>

<script src='dwr/util.js'></script>

我們注意到當用戶改變搜索標准時,這是javascript:void(0);">AJAX在示例程序中的首次應用;正如他所看到的,當標准改變時,可用的公寓數量被更新了。我創建了兩個JavaScript函數:當某一個選擇下拉框中的值變化時被調用。ApartmentDAO.countApartments()函數是最重要的部分。最有趣的是第一個參數, loadTotal()函數,它指明了當接收到服務端的返回時DWR將會調用的JavaScript方法。loadTotal于是被調用來在HTML頁面的<div>中顯示結果。下面是在這個交互場景中所使用到的JavaScript函數:

function updateTotal() {

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

var bedrooms = document.getElementById("bedrooms").value;

var bathrooms = document.getElementById("bathrooms").value;

var price = document.getElementById("price").value;

ApartmentDAO.countApartments(loadTotal, bedrooms, bathrooms, price);

}

function loadTotal(data) {

document.getElementById("totalRecords").innerHTML = data;

}

很明顯,用戶想看到符合他的搜索條件的公寓列表。那麽,當用戶對他的搜索標准感到滿意,並且總數也是有效的話,他會按下顯示結果的按紐,這將會調用updateResults() JavaScript方法:

function updateResults() {

DWRUtil.removeAllRows("apartmentsbody");

var bedrooms = document.getElementById("bedrooms").value;

var bathrooms = document.getElementById("bathrooms").value;

var price = document.getElementById("price").value;

ApartmentDAO.findApartments(fillTable, bedrooms, bathrooms, price);

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

}

function fillTable(apartment) {

DWRUtil.addRows("apartmentsbody", apartment, [ getId, getAddress, getBedrooms, getBathrooms, getPrice ]);

}

updateResults()方法清空了存放搜索返回結果的表域,從用戶界面上獲取所需參數,並且將這些參數傳給DWR創建的ApartmentDAO對象。然後數據庫查詢將被執行,fillTable()將會被調用,它解析了DWR返回的對象(apartment),然後將其顯示到頁面中(apartmentsbody)。

安全因素

爲了保持示例的簡要,ApartmentDAO類盡可能的保持簡單,但這樣的一個類通常有一組設置方法來操作數據,如insert(), update()和delete()。DWR暴露了所有公共方法給所有的HTML頁面調用。出于安全的原因,像這樣暴露你的數據訪問層是不明智的。開發者可以創建一個門面來集中所有JavaScript函數與底層業務組件之間的通信,這樣就限制了過多暴露的功能。

結論

這篇文章僅僅讓你在你的項目中使用由DWR支持的javascript:void(0);">AJAX開了個頭。DWR讓你集中注意力在如何提高你的應用的交互模型上面,消除了編寫和調試JavaScript代碼的負擔。使用javascript:void(0);">AJAX最有趣的挑戰是定義在哪裏和如何提高可用性。DWR負責了操作Web頁面與你的Java對象之間的通信,這樣就幫助你完全集中注意力在如何讓你的應用的用戶界面更加友好,

我想感謝Mircea Oancea和Marcos Pereira,他們閱讀了這篇文章並給予了非常有價值的返匮。

資源

·javaworld.com:javaworld.com

·Matrix-Java開發者社區:http://www.matrix.org.cn/

·onjava.com:onjava.com

·下載示例程序的全部源碼:http://www.javaworld.com/javaworld/jw-06-2005/dwr/jw-0620-dwr.war

·DWR: http://www.getahead.ltd.uk/dwr/index.html

·HSQL:http://hsqldb.sourceforge.net/

·javascript:void(0);">AJAX的定義:http://en.wikipedia.org/wiki/javascript:void(0);">AJAX

· “javascript:void(0);">AJAX:通向Web應用的新途徑": Jesse James Garrett (Adaptive Path, 2005.2): http://www.adaptivepath.com/publications/essays/archives/000385.php

· “非常動態的Web界面” Drew McLellan (xml.com, 2005.2): http://www.xml.com/pub/a/2005/02/09/xml-http-request.html

·XMLHttpRequest & javascript:void(0);">AJAX 工作範例: http://www.fiftyfoureleven.com/resources/programming/xmlhttprequest/examples

· “可用的XMLHttpRequest實踐” Thomas Baekdal (Baekdal.com, 2005.3): http://www.baekdal.com/articles/Usability/usable-XMLHttpRequest/

·"XMLHttpRequest使用導引" Thomas Baekdal (Baekdal.com, 2005.2):http://www.baekdal.com/articles/Usability/XMLHttpRequest-guidelines/

J2EE下開發Ajax程序開發-DWR的介紹
DWR()的作者Joe walker 在與其他Ajax做比較的時候時候寫到:- DWR的遠程進入是安全,許多人認爲遠程進入就意味著是不安全的,但是DWR的遠程進入是安全的;可以放心的使用命名空間,類名,方法名來訪.DWR能在服務器端配置安...查看完整版>>J2EE下開發Ajax程序開發-DWR的介紹
 
Ajax簡單客戶登陸驗證
服務器端操作方便之處我就不吹了,地球人都知道,它最煩莫過于頁面刷新,頭都被刷暈了,而且他在刷新的時候,還觸發服務器端的事件(解決方案:),現在Ajax的出現,他們的結合是發展的必然! 一、介紹一下Ajax在As...查看完整版>>Ajax簡單客戶登陸驗證
 
打造Ajax簡單相冊
AJAX(Asynchronous JavaScript And XML)是一種運用JavaScript和可擴展標記語言(XML),在網絡浏覽器和服務器之間傳送或接受數據的技術。主要應用于Ria(Rich internet applications)的開發上。xml問題終于在今天還是解...查看完整版>>打造Ajax簡單相冊
 
strcpy和strcat爲何寫的如此簡單?
//未經許可請勿轉載char * strcat (char * dst, char * src){ char * cp = dst; while( *cp ) ++cp; /* Find end of dst */ while( *cp++ = *src++ ) ...查看完整版>>strcpy和strcat爲何寫的如此簡單?
 
123——給S68刷ELF如此簡單
123——給S68刷ELF如此簡單
今天晚上的星星很少,不知道它們跑那去了。赤裸裸的天空,星星多寂廖……哈哈,樓下有不少人在抓急了吧,都這會兒了,阿龍納斯還在慢條斯文的在哼小曲呢。 其實,不能太急的。作文如做人,關鍵在于態度。如果是認...查看完整版>>123——給S68刷ELF如此簡單
 
原來刷機如此簡單
原來刷機如此簡單
俺的V3是9CR的版本,幾個月來試遍了壇子裏各位高人提供的個種優化方法,且通過瘦身內存已經達到了8265kb,軟件運行也一直感覺比較穩定,于是從來沒有想過刷機的事,對關于刷機的帖子一概忽略不看。 偶然間看到兄弟...查看完整版>>原來刷機如此簡單
 
刷機如此簡單
在小C裏面呆了N久,自己刷了N次,我終于刷機成功了,對照各位高手的教程後發現其實他們都講的很籠統,我的刷機經驗如下: 一.備份 備份很重要,因爲你刷壞了,只有他可以救你,對C208備份過程如下: 1.將...查看完整版>>刷機如此簡單
 
商務如此簡單 CECT C6000僅售618元
  CECT公司出品的C6000是一款專爲商務人士打造的低端商務手機,該機內置了炒股軟件,並還是一款雙網雙待手機。近日,該機的價格再次出現下調,現在僅售618元。並可以參與加48元送藍牙耳機的活動。喜歡的就趕快聯系...查看完整版>>商務如此簡單 CECT C6000僅售618元
 
商務如此簡單 CECT C6000跌破700元
  CECT C6000是一款專門爲商務人士設計的手機産品,該機內置了炒股軟件,並還是一款雙網雙待手機。近日,該機的價格又再次出現下調,現在僅售699元,跌破700元。並可以參加10元購買靓號的活動。喜歡的就多多關注哦...查看完整版>>商務如此簡單 CECT C6000跌破700元
 
 
回到王朝網路移動版首頁