DWR讓AJAX如此簡單
日期:2008-07-17 作者:喜騰小二 來源:PHPChina
作者：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元素的內容，如
和
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中佈署描述段中去。
dwr-invoker
DWR Servlet
Direct Web Remoter Servlet
uk.ltd.getahead.dwr.DWRServlet
debug
true
dwr-invoker
/dwr/*
一個可選的步驟是設定DWR為偵錯模式—象上麵的例子那樣—在servlet描述段中將debug參數設為true。當DWR在偵錯模式時，妳可以從HTMl網頁中看到所有的可訪問的Java物件。包含了可用物件清單的網頁會出現在/WEBAPP/dwr這個url上，它顯示了物件的公共方法。所列方法可以從页面中調用，允許妳，第一次，執行伺服器上的物件的方法。下圖顯示了偵錯頁的樣子:
偵錯頁
現在妳必須讓DWR知道透過XMLHttpRequest物件，什麼物件將會接收請求。這個工作由叫做dwr.xml的配置檔案來完成。在配置檔案中，定義了DWR允許妳從網頁中調用的物件。從設計上講，DWR允許訪問所有公佈類的公共方法，但在我們的例子中，我們隻允許訪問幾個方法。下麵是我們範例的配置檔案:
標記告訴DWR將dwr.sample.Apartment物件的類型轉換為聯合陣列，因為，出於安全的原因，DWR預設的不會轉換普通bean。第二，標記讓DWR暴露出dwr.sample.ApartmentDAO類給JavaScript調用;我們在页面中使用JavaScript檔案被javascript內容定義。我們必須注意標記，它指明瞭dwr.sample.ApartmentDAO類的哪些方法可用。
HTML/JSP程式碼
配置完成後，妳就可以啓動妳的Web應用了，這時DWR會為從妳的HTML或Java伺服器端页面(JSP)上調用所需方法作好準備，並不需要妳建立JavaScript檔案。在search.jsp檔案中， 我們必須增加由DWR提供的JavaScript介麵，還有DWR引擎，加入以下三行到我們的程式碼中：
我們注意到當使用者改變搜尋標準時，這是javascript:void(0);">AJAX在示常式式中的首次應用;正如他所看到的，當標準改變時，可用的公寓數量被更新了。我建立了兩個JavaScript函式：當某一個選擇下拉式方塊中的值變化時被調用。ApartmentDAO.countApartments()函式是最重要的部分。最有趣的是第一個參數, loadTotal()函式，它指明瞭當接收到服務端的返回時DWR將會調用的JavaScript方法。loadTotal於是被調用來在HTML页面的
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中佈署描述段中去。
一個可選的步驟是設定DWR為偵錯模式—象上麵的例子那樣—在servlet描述段中將debug參數設為true。當DWR在偵錯模式時，妳可以從HTMl網頁中看到所有的可訪問的Java物件。包含了可用物件清單的網頁會出現在/WEBAPP/dwr這個url上，它顯示了物件的公共方法。所列方法可以從页面中調用，允許妳，第一次，執行伺服器上的物件的方法。下圖顯示了偵錯頁的樣子:
偵錯頁
現在妳必須讓DWR知道透過XMLHttpRequest物件，什麼物件將會接收請求。這個工作由叫做dwr.xml的配置檔案來完成。在配置檔案中，定義了DWR允許妳從網頁中調用的物件。從設計上講，DWR允許訪問所有公佈類的公共方法，但在我們的例子中，我們隻允許訪問幾個方法。下麵是我們範例的配置檔案:
HTML/JSP程式碼
配置完成後，妳就可以啓動妳的Web應用了，這時DWR會為從妳的HTML或Java伺服器端页面(JSP)上調用所需方法作好準備，並不需要妳建立JavaScript檔案。在search.jsp檔案中， 我們必須增加由DWR提供的JavaScript介麵，還有DWR引擎，加入以下三行到我們的程式碼中：
我們注意到當使用者改變搜尋標準時，這是javascript:void(0);">AJAX在示常式式中的首次應用;正如他所看到的，當標準改變時，可用的公寓數量被更新了。我建立了兩個JavaScript函式：當某一個選擇下拉式方塊中的值變化時被調用。ApartmentDAO.countApartments()函式是最重要的部分。最有趣的是第一個參數, loadTotal()函式，它指明瞭當接收到服務端的返回時DWR將會調用的JavaScript方法。loadTotal於是被調用來在HTML页面的
中顯示結果。下麵是在這個互動場景中所使用到的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/
$("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/
Copyright 2004 - 2009 SYSTN.COM