DWR讓AJAX如此簡單

作者：Cloves Carneiro

譯者:simmone

作者: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/

< <script type="text/javascript"> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script> <script type="text/javascript"> </script><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>

DWR讓AJAX如此簡單

繼續閱讀

MySQL的4種隔離級别？出現問題

tab滑鼠經過菜單切換

XX系統實施過程問題總結

vue （vue2.0）使用總結(從大體結構總結)

無元件上傳圖檔到資料庫中，最完整解決方案

vue搭建過程及出現問題

【MySQL資料庫】資料庫索引事務1.索引2.事務

/\B(?=(?:\d{3})+$)/g 一條令人費解的正規表達式

neo4j之cypher使用文檔

适用于JavaScript的ECMAScript 2020規範向前發展

NOSQL安全攻擊

mybatis_入門程式Mybatis入門

JS生成uuid的四種方法

登入plsql 報錯 the account is locked --使用者被鎖

SequoiaDB巨杉資料庫C++驅動概述

layui多任務上傳添加進度條