|
概述
這篇文章闡述了使用開源項目DWR(直接Web遠程控制)和AJAX(異步JavaScript和XML)的概念來提高Web應用的可用性。作者一步步來展示DWR如何使得AJAX的應用既簡單又快捷,。（1600字;2005年6月20日）
AJAX，或者說是異步JavaScript和XML,，描述了一種使用混合了HTML(或XHTML)和層疊樣式表作為表達信息,來創(chuàng)建交互式的Web應用的開發(fā)技術;文檔對象模型（DOM）,，JavaScript,動態(tài)地顯示和與表達信息進行交互;并且，XMLHttpRequest對象與Web服務器異步地交換和處理數(shù)據(jù),。
因特網(wǎng)上許多例子展示了在一個HTML文件內(nèi)部使用XMLHttpRequest與服務器端進行交互的必要的步驟,。當手工地編寫和維護XMLHttpRequest代碼時,，開發(fā)者必須處理許多潛在的問題，特別是類似于跨瀏覽器的DOM實現(xiàn)的兼容性這樣的問題,。這將會導致在編碼和調(diào)試Javascript代碼上面花費數(shù)不清的時間,，這顯然對開發(fā)者來說很不友好。
DWR(直接Web遠程控制)項目是在Apache許可下的一個開源的解決方案,，它供給那些想要以一種簡單的方式使用AJAX和XMLHttpRequest的開發(fā)者,。它具有一套Javascript功能集，它們把從HTML頁面調(diào)用應用服務器上的Java對象的方法簡化了,。它操控不同類型的參數(shù),，并同時保持了HTML代碼的可讀性。
DWR不是對一個設計的插入,，也不強迫對象使用任何種類的繼承結構,。它和servlet框架內(nèi)的應用配合的很好。對缺少DHTML編程經(jīng)驗的開發(fā)者來說,，DWR也提供了一個JavaScript庫包含了經(jīng)常使用的DHTML任務,，如組裝表，用item填充select下拉框,，改變HTML元素的內(nèi)容,，如<div>和<span>
DWR網(wǎng)站是詳盡的并且有大量的文檔，這也是這篇文章的基礎,。一些例子用來展示DWR如何使用和用它的庫可以完成什么樣的工作,。
這篇文章讓讀者看到了一個使用了DWR的Web應用是如何一步步建立的。我會展示創(chuàng)建這個簡單的示例應用的必要的細節(jié),，這個應用是可下載的并且可以在你的環(huán)境中布署來看看DWR如何工作,。
注意：找到有關AJAX的信息并不困難;網(wǎng)頁上有幾篇文章和博客的條目涵蓋了這個主題，每一個都試圖指出和評論這個概念的不同的方面,。在資源部分,，你會找到一些有趣的指向示例和文章的鏈接，來學習AJAX的更多的內(nèi)容,。
示例應用
這篇文章使用的示例應用模擬了多倫多的一個公寓出租搜索引擎,。用戶可以在搜索前選擇一組搜索標準。為了提高交互性,，AJAX中以下兩種情況下使用：
·應用通告用戶配合他的選擇會返回多少搜索結果,。這個數(shù)字是實時更新的-使用AJAX-當用戶選擇的臥室和浴室的數(shù)量，或者價格范圍變化時,。當符合標準的搜索結果沒有或太多時,，用戶就沒有必要點擊搜索按紐。
·數(shù)據(jù)庫查詢并取回結果是由AJAX完成的,。當用戶按下顯示結果按鈕時,，數(shù)據(jù)庫執(zhí)行搜索,。這樣，應用看起來更具響應了,，而整個頁面不需要重載來顯示結果,。
數(shù)據(jù)庫
我們使用的數(shù)據(jù)庫是HSQL，它是一種占用資源很小的Java SQL數(shù)據(jù)庫引擎,，可以不需要安裝和配置的與Web應用捆綁在一起,。一個SQL文件被用來在Web應用的上下文啟動時創(chuàng)建一個內(nèi)存中的表并添加一些記錄。
Java類
應用包含了兩個主要的類叫Apartment和ApartmentDAO,。Apartment.java類是一個有著屬性和getter/setter方法的簡單的Java類,。ApartmentDAO.java是數(shù)據(jù)訪問類，用來查詢數(shù)據(jù)庫并基于用戶的搜索標準來返回信息,。ApartmentDAO類的實現(xiàn)的直接了當?shù)?/span>;它直接使用了Java數(shù)據(jù)庫聯(lián)接調(diào)用來得到公寓的總數(shù)和符合用戶請求的可用公寓的列表,。
DWR配置和使用
設置DWR的使用是簡單的：將DWR的jar文件拷入Web應用的WEB-INF/lib目錄中，在web.xml中增加一個servlet聲明,，并創(chuàng)建DWR的配置文件,。DWR的分發(fā)中需要使用一個單獨的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為調(diào)試模式—象上面的例子那樣—在servlet描述段中將debug參數(shù)設為true,。當DWR在調(diào)試模式時，你可以從HTMl網(wǎng)頁中看到所有的可訪問的Java對象,。包含了可用對象列表的網(wǎng)頁會出現(xiàn)在/WEBAPP/dwr這個url上,，它顯示了對象的公共方法。所列方法可以從頁面中調(diào)用,，允許你,，第一次，運行服務器上的對象的方法,。
現(xiàn)在你必須讓DWR知道通過XMLHttpRequest對象,，什么對象將會接收請求。這個任務由叫做dwr.xml的配置文件來完成,。在配置文件中,，定義了DWR允許你從網(wǎng)頁中調(diào)用的對象。從設計上講,，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>
上面的文件實現(xiàn)了我們例子中的兩個目標。首先,，<convert>標記告訴DWR將dwr.sample.Apartment對象的類型轉換為聯(lián)合數(shù)組,，因為,，出于安全的原因，DWR默認的不會轉換普通bean,。第二,，<create>標記讓DWR暴露出dwr.sample.ApartmentDAO類給JavaScript調(diào)用;我們在頁面中使用JavaScript文件被javascript屬性定義。我們必須注意<include>標記,，它指明了dwr.sample.ApartmentDAO類的哪些方法可用,。
HTML/JSP代碼
配置完成后，你就可以啟動你的Web應用了,，這時DWR會為從你的HTML或Java服務器端頁面(JSP)上調(diào)用所需方法作好準備,，并不需要你創(chuàng)建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>
我們注意到當用戶改變搜索標準時,，這是AJAX在示例程序中的首次應用;正如他所看到的,，當標準改變時，可用的公寓數(shù)量被更新了,。我創(chuàng)建了兩個JavaScript函數(shù)：當某一個選擇下拉框中的值變化時被調(diào)用,。ApartmentDAO.countApartments()函數(shù)是最重要的部分。最有趣的是第一個參數(shù), loadTotal()函數(shù),，它指明了當接收到服務端的返回時DWR將會調(diào)用的JavaScript方法,。loadTotal于是被調(diào)用來在HTML頁面的<div>中顯示結果。下面是在這個交互場景中所使用到的JavaScript函數(shù):
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;}
很明顯,，用戶想看到符合他的搜索條件的公寓列表,。那么，當用戶對他的搜索標準感到滿意,，并且總數(shù)也是有效的話,，他會按下顯示結果的按紐，這將會調(diào)用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()方法清空了存放搜索返回結果的表域,，從用戶界面上獲取所需參數(shù),，并且將這些參數(shù)傳給DWR創(chuàng)建的ApartmentDAO對象。然后數(shù)據(jù)庫查詢將被執(zhí)行,，fillTable()將會被調(diào)用,，它解析了DWR返回的對象(apartment)，然后將其顯示到頁面中(apartmentsbody),。
安全因素
為了保持示例的簡要,，ApartmentDAO類盡可能的保持簡單，但這樣的一個類通常有一組設置方法來操作數(shù)據(jù),，如insert(), update()和delete(),。DWR暴露了所有公共方法給所有的HTML頁面調(diào)用,。出于安全的原因，像這樣暴露你的數(shù)據(jù)訪問層是不明智的,。開發(fā)者可以創(chuàng)建一個門面來集中所有JavaScript函數(shù)與底層業(yè)務組件之間的通信,，這樣就限制了過多暴露的功能。
|
