DWR, Direct Web Remoting 研究與實作教學文件

14 年前

DWR 簡介

DWR 主要提供一個 Framework 於介於 Java 與 JavaScript 之間採用 Http 非同步溝通，可以使開發者在瀏覽器中的 JavaScript 語法中直接呼叫 Server 端的 Java 的函示。此 Framework 會在 Browser 與 Server 之間互相傳遞參數，除了基本資料型態(i.e., String, int, double, char...etc)之外，當然也包括了 List 與 Map。DWR 核心由 Servlet 進行實作，目前發展到 2.0，使用方法相當簡單，採用 DWR 來打造 JavaScript API 將會是個不錯的選擇。

DWR 具有以下特點

DWR可以透過客戶端的JavaScript 輕鬆與伺服器端的Java Function做溝通，是個輕量級卻功能完整的RPC Library。
就像SOAP與RMI等RPC機制一樣都是從Java到JavaScript的運作方式，但是使用DWR並不需要再使用額外的流覽器外掛程式而DWR程式開發主要的取向是可以讓開發者不用寫太多繁雜的程式來實作依照 Ajax。
依照Ajax原則透過Servlet取得相關得資料，並使用非同步的機制來達成使用者流覽網站時送出的指令與即時傳回的資訊,這對於友善的使用者環境介面是一個重要的環節。

DWR 運作機制

下圖說明瀏覽器選擇下拉式選單的項目後直接執行 Server 端的 Java 程式。

上述的動作需要撰寫的 JavaScript 非常的少，確實有效增進的開發速度，在我自己的實際使用下配合 jQuery 更能得心應手。未來要是需要開發像是 Google API 這種雲端運算技術，簡易的包裝式很重要的，DWR 只需要載入幾隻 js 檔即可運作，非常方便。除了 Java EE 之外，其他的 Server 語言也有類似的實作可以參考。

DWR 透過 AJAX 將參數傳送至後端的 Server 執行，並且回傳執行結果，如此的動作搭配 Browser JavaScript 的執行，用起來的感覺就像是呼叫一般的 JavaScript Method 而完全不用考慮與設計底層的 AJAX 運作。對於網頁開發者來說是一大福音，下圖說明在網頁中呼叫 Server 端的 Java 來產生下拉式選單。

使用教學

下載 DWR Library 放入 /WEB-INF/lib 資料夾中
官方網址：http://directwebremoting.org/dwr/download.html

編輯 web.xml 加入 DwrServlet

<!-- DWR -->
<servlet>
    <servlet-name>dwr-invoker</servlet-name>
    <servlet-class>org.directwebremoting.servlet.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>

建立一支可被呼叫 (Invoke) 的 Java Class

package test.dwr;

import javax.servlet.http.HttpServletRequest;

public class API {

    /**
     * 加法器
     */
    public int sum(int a, int b) {
        return a + b;
    }

    /**
     * 顯示連線 IP
     */
    public String showIpAddress(HttpServletRequest request) {
        return request.getRemoteAddr();
    }

}

建立 /WEB-INF/dwr.xml 設定提供呼叫的 class 與 method

<!DOCTYPE dwr PUBLIC
"-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN"
"http://getahead.org/dwr/dwr20.dtd">

<dwr>
    <allow>
        <create creator="new" javascript="API">
            <param name="class" value="test.dwr.API"/>
        </create>
    </allow>
</dwr>

在網頁中加入 DWR Enging 與準備呼叫的，第一項 js 檔為 DWR Engine 負責底層核心的溝通呼叫，第二項 js 檔為上述在 dwr.xml 中定義的 javascript 名稱。
```
<script src="dwr/engine.js" type="text/javascript" charset="utf-8"></script>
<script type='text/javascript' src='dwr/interface/API.js'></script>
```

使用 JavaScript 直接呼叫函式

API.sum(2,4,function callback(data) {
    alert('2+4='+data);
});

API.showIpAddress(function callback(data) {
    alert('Your IP='+data);
});

執行結果

參考資料

DRW 官方網站