DWR(Direct Web Remoting)是一個WEB遠程調用架構.利用這個架構可以讓AJAX開發變得很簡單.利用DWR可以在用戶端利用JavaScript直接調用服務端的Java方法並傳回值給JavaScript就好像直接本地用戶端調用一樣(DWR根據Java類來動態產生JavaScrip代碼).它的最新版本DWR0.6添加許多特性如:支援Dom Trees的自動設定,支援Spring(JavaScript遠程調用spring bean),更好瀏覽器支援,還支援一個可選的commons-logging日記操作.
廢話少說,現在就搞起,
請先到 http://getahead.ltd.uk/dwr/ 下載 dwr.jar ,放到 WEB-INF/lib 下 …
負責處理用戶端請求,並呼叫 Java 對象的是 DWRServlet , DWR 其實也有些 Model 2 的味道,只是 View 的這一層比較弱,因為放到用戶端的 JavaScript 應用程式中 …
在 web.xml 中加入 DWRServlet…
<?xml version="1.0" encoding="UTF-8"?><br /><web-app id="WebApp_ID" version="2.4"<br /> xmlns="http://java.sun.com/xml/ns/j2ee"<br /> xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"<br /> xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd"><br /> <display-name>dwrtest</display-name> </p><p> <servlet><br /> <servlet-name>dwr-invoker</servlet-name> </p><p> <servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class><br /> <init-param><br /> <param-name>debug</param-name><br /> <param-value>true</param-value><br /> </init-param><br /> </servlet> </p><p> <servlet-mapping><br /> <servlet-name>dwr-invoker</servlet-name><br /> <url-pattern>/dwr/*</url-pattern><br /> </servlet-mapping> </p><p></web-app><br />
接下來寫個簡單的 Hello 吧!
package com.dwr; </p><p>public class HelloWorld {<br /> private String name;<br /> public HelloWorld(){ </p><p> }<br /> public String getName() {<br /> return name;<br /> }<br /> public void setName(String name) {<br /> this.name = name;<br /> }<br /> public String sayHello(String name) {<br /> return "Hello, " + name;<br /> } </p><p>}<br />
用戶端要呼叫這個 Java 對象,傳給它參數,而後傳回一個字串,用戶端再顯示這個字串,神奇?其實是要告訴 DWRServlet 這件事,這需要一個 dwr.xml,在WEB-INF目錄下建立這個這個檔案:
<!DOCTYPE dwr PUBLIC<br /> "-//GetAhead Limited//DTD Direct Web Remoting 1.0//EN"<br /> "http://www.getahead.ltd.uk/dwr/dwr10.dtd"> </p><p><dwr><br /> <allow><br /> <create creator="new" javascript="JDate"><br /> <param name="class" value="java.util.Date"/><br /> </create><br /> <create creator="new" javascript="Hello"><br /> <param name="class" value="com.dwr.HelloWorld"/><br /> </create><br /> </allow><br /></dwr><br />
creator 設定為 new ,表示使用 Hello 的無參數建構子來產生對象, javascript 設定為 Hello ,表示用戶端 JavaScript 程式可以使用 Hello 來呼叫對應的 onlyfun.caterpillar.Hello 物件。
來寫個用戶端的網頁,當中有一個輸入欄位,這裡我們建立一個index.html,內容如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><br /><html><br /><head><br /><meta http-equiv="Content-Type" content="text/html; charset=GB18030"><br /><title>DWR's HelloWorld</title><br /><mce:script type='text/javascript' src="dwr/interface/Hello.js" mce_src="dwr/interface/Hello.js"></mce:script><br /><mce:script type='text/javascript' src="dwr/engine.js" mce_src="dwr/engine.js"></mce:script><br /><mce:script type='text/javascript' src="dwr/util.js" mce_src="dwr/util.js"></mce:script><br /><mce:script type='text/javascript' src="hello.js" mce_src="hello.js"></mce:script><br /></head><br /><body><br /><input id="user" type="text" /><input type='button' value='哈羅' onclick='hello();' /> <div id="result"></div><br /></body><br /></html><br />
dwr/interface/Hello.js 是由 DWRServlet 根據 dwr.xml 中的設定產生的, engine.js 負責用戶端伺服端溝通, util.js 是一些好用的 JavaScript 程式,可以讓您少寫很多 JavaScript 。
hello.js 是我們自訂的函式,按下按鈕後,會呼叫當中的 hello() 函式,因而 需要在當前檔案夾下建立一個hello.js:
function hello(){<br /> var user = $('user').value;<br /> Hello.sayHello(user,callback);<br />}<br />function callback(msg){<br /> DWRUtil.setValue('result',msg);<br />}<br />
${'user'} 取得輸入欄位的 DOM 對象, value 取得當中的域值,而後呼叫 Hello.hello() ,並將 value 當作參數傳送 … 結果是呼叫 Server 端的 Hello Java 對象,當結果傳回後,會呼叫 JavaScript 的 callback 函式, DWRUtil 的 setValue() 方法會將傳回的 msg 設定給指定 id 的 DOM ,結果就是 … 啥! AJAX 的功能在哪 … 就這個而言就是發出非同步請求,而響應不用 Refresh 頁面啦!