1.前言
什麼是DWR?DWR是一個Java EE領域的Ajax框架,通過DWR的幫助,可以讓開發者更簡單地開發出Ajax應用。通過DR的幫助,開發者可以在瀏覽器的JavaScript代碼中調用遠程的Java方法,就像這些Java方法就是在客戶端定義一樣。
DWR框架允許客戶端JavaScript代碼直接調用遠程的Java方法,這種調用非常類似於WebService技術的RPC(RemoteProcedure Call,遠程過程調用)調用,因此,DWR也被稱爲RPC風格的Ajax框架。
DWR框架主要包括如下兩個部分。
1) 客戶端有JavaScipt,這部分代碼使客戶端JavaScript可以直接調用遠程服務器的Java方法。除此之外,DWR還提供了一些方便的工具函數來簡化DOM操作。
2) 服務器上運行的Servlet負責處理用戶請求,並將用戶請求委託到實際Java對象進行處理,並負責把處理結果返回客戶端。
基本原理是:當開發者直接調用遠程Java方法時,DWR會負責將這種調用轉換成對應的Ajax請求,並使用XMLHttpRequest將請求發送到遠程服務端。當服務器處理完成後,DWR負責數據的傳遞和轉換。
2.下載DWR文件
1) 登錄http://directwebremoting.org/dwr/downloads站點,下載DWR文件。
1) 將上面解壓路徑中的WEB-INF\lib目錄下的dwr.jar文件監製到Web應用的WEB-INF\lib下。
3.配置web.xml
成功安裝DWR需要先修改web.xml文件,修改web.xml文件能保證特定請求被轉發DWR的核心Servlet處理,而dwr.xml文件則負責定義Java類和JavaScript對象之間的對應關係。
- <?xml version="1.0" encoding="GBK"?>
- <web-app xmlns="http://java.sun.com/xml/ns/javaee"
- xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
- xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
- http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" version="2.5">
- <!-- 配置DWR的核心Servlet -->
- <servlet>
- <!-- 指定DWR核心Servlet的名字 -->
- <servlet-name>dwr-invoker</servlet-name>
- <!-- 指定DWR核心Servlet的實現類 -->
- <servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class>
- <!-- 指定DWR核心Servlet處於調試狀態 -->
- <init-param>
- <param-name>debug</param-name>
- <param-value>true</param-value>
- </init-param>
- </servlet>
- <!-- 指定核心Servlet的URL映射 -->
- <servlet-mapping>
- <servlet-name>dwr-invoker</servlet-name>
- <!-- 指定核心Servlet映射的URL -->
- <url-pattern>/leedwr/*</url-pattern>
- </servlet-mapping>
- </web-app>
4.添加dwr.xml文件
1) 除此之外,還必須增加一個dwr.xml,該文件負責定義Java類和JavaScript對象之間對應關係。
- <?xml version="1.0" encoding="GBK"?>
- <!-- 指定DWR配置文件的DTD等信息 -->
- <!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 3.0//EN"
- "http://getahead.org/dwr/dwr30.dtd">
- <!-- DWR配置文件的根元素是dwr -->
- <dwr>
- <allow>
- <!-- 使用new關鍵資創建一個Java實例
- 指定創建的JavaScript對象名爲hello-->
- <create creator="new" javascript="hello">
- <!-- 使用class屬性指定創建該Java實例的實現類 -->
- <param name="class" value="com.owen.dwr.HelloDwr"/>
- </create>
- <!-- 對com.owen.dwr.domain.Person類使用Bean轉換器 -->
- <convert converter="bean" match="com.owen.dwr.domain.Person"/>
- <!-- 對com.owen.dwr.domain.Cat使用Object轉換器 -->
- <convert converter="object" match="com.owen.dwr.domain.Cat">
- <!-- 指定force="true"強制使用反射訪問私有屬性 -->
- <param name="force" value="true"/>
- </convert>
- </allow>
- <signatures>
- <![CDATA[
- import java.util.List;
- import com.owen.dwr.HelloDwr;
- import com.owen.dwr.domain.Person;
- HelloDwr.sendListNoGeneric(List<Person>);
- ]]>
- </signatures>
- </dwr>
2) dwr.xml文件說明
a) 在上面的配置文件,最重要的元素就是<allow…/>元素,如果一個dwr.xml文件沒有定義<allow…/>元素,或者<allow…/>元素爲空,則DWR將什麼都幹不了。<allow…/>元素裏常用的元素是<create…/>和<conert…/>,其中<create…/>用於定義如何將一個Java類轉換成一個JavaScript對象,而<convert…/>定義如何完成Java對象和JavaScript對象之間的轉換。
b) DWR使用反射來確定Java實例和JavaScript對象之間的轉換。在時候,參數類型信息並不十分明確,或者參數是一個集合對象,而且沒有使用泛型來限制集合元素的類型,這就需要在dwr.xml文件的<signatures…/>元素中明確指定這些類型。
5.創建對應的類
在dwr.xml的文件中,我們添加了幾個類,所以這個時候,我們需要提供這些類。
1) Cat.java
- /**
- *實體Cat
- * @author OwenWilliam 2016-5-8
- * @version 1.0
- */
- public class Cat
- {
- //Cat類的私有屬性
- private String name;
- //構造器
- public Cat(String name)
- {
- this.name = name;
- }
- }
2) Person.java
- package com.owen.dwr.domain;
- /**
- *實體Person
- * @author OwenWilliam 2016-5-8
- * @version 1.0
- */
- public class Person
- {
- // 私有Field
- private String name;
- // 無參數的構造器
- public Person() {}
- // 初始化全部成員變量的構造器
- public Person(String name)
- {
- this.name = name;
- }
- // name的setter和getter方法
- public void setName(String name)
- {
- this.name = name;
- }
- public String getName()
- {
- return this.name;
- }
- }
3) HelloDwr.java
- package com.owen.dwr;
- import java.util.*;
- import com.owen.dwr.domain.*;
- /**
- * @author OwenWilliam 2016-5-8
- * @version 1.0
- */
- public class HelloDwr
- {
- // 第一個簡單的hello方法
- public String hello(String name)
- {
- return name + ",您好!您已經開始了DWR的學習之旅,祝您學得開心...";
- }
- // 使用一個JavaBean作爲參數的方法
- public String sendObj(Person p )
- {
- return p.getName() + ",您好!您已經學會了使用JavaBean參數...";
- }
- // 返回JavaBean實例的方法
- public Person getBean (String name)
- {
- return new Person(name);
- }
- // 返回一個普通的Java對象,Cat對象爲其屬性提供setter和getter方法
- public Cat getObject(String name)
- {
- return new Cat("服務器端" + name);
- }
- // 返回一個集合對象
- public List<Person> getPersonList()
- {
- List<Person> result = new ArrayList<Person>();
- result.add(new Person("集合aaaa"));
- result.add(new Person("集合bbbb"));
- result.add(new Person("集合cccc"));
- return result;
- }
- // 返回一個數組對象
- public Person[] getPersonArray()
- {
- Person[] result = new Person[3];
- result[0] = new Person("數組aaaa");
- result[1] = new Person("數組bbbb");
- result[2] = new Person("數組cccc");
- return result;
- }
- // 返回一個Map對象
- public Map<String, Person> getPersonMap()
- {
- // 創建一個Map對象
- Map<String, Person> result = new HashMap<String, Person>();
- // 填充Map對象的內容
- result.put("first" , new Person("Map aaaa"));
- result.put("second" , new Person("Map bbb"));
- result.put("third" , new Person("Map cccc"));
- // 返回Map
- return result;
- }
- // 遠程方法的參數是集合
- public String sendList(List<Person> pl)
- {
- String result = "";
- for (Person p : pl)
- {
- result += p.getName() + "<br />";
- }
- return result;
- }
- // 遠程方法的參數是不帶泛型的集合
- public String sendListNoGeneric(List pl)
- {
- String result = "";
- for (Object p : pl)
- {
- result += ((Person)p).getName() + "<br />";
- }
- return result;
- }
- // 遠程方法的參數是集合
- public String sendMap(Map<String , Person> pmap)
- {
- String result = "";
- for (String key : pmap.keySet())
- {
- result += "鍵" + key + " 其值爲:" +
- pmap.get(key).getName() + "<br />";
- }
- return result;
- }
- }
6.創建JS文件
創建個js文件名字叫hellodwr.js,這個文件可以直接調用java類中的方法。像hello.hello(name, cb)調用就是直接調用。
- // -------------發送簡單字符串參數,返回普通字符串--------------
- function sendMessage()
- {
- // 獲取頁面中name元素的值
- var name = document.getElementById("name").value;
- // 調用遠程方法,cb是回調函數
- hello.hello(name , cb)
- }
- function cb(data)
- {
- document.getElementById("show").innerHTML = data;
- }
- // -----------發送一個JavaBean對象作爲參數,返回普通字符串------------
- function sendObject()
- {
- var nameValue = document.getElementById("name").value;
- // 調用遠程方法,使用JavaScript對象作爲參數
- hello.sendObj({name:nameValue} , cb);
- }
- // ----------------調用返回JavaBean方法-----------------
- function getBean()
- {
- var name = document.getElementById("name").value;
- // 調用遠程方法,beanCb是回調函數
- hello.getBean(name , beanCb)
- }
- function beanCb(data)
- {
- // 服務器方法返回JavaBean對象,客戶端的data是JavaScript對象
- document.getElementById("show").innerHTML =
- data.name + ",您好,您已經學會了使用JavaBean返回值";
- }
- // ----------------調用返回getObject方法---------------
- function getObject()
- {
- var name = document.getElementById("name").value;
- // 調用遠程方法,objCb是回調函數
- hello.getObject(name , objCb)
- }
- function objCb(data)
- {
- // 服務器方法返回非JavaBean式的對象,客戶端的data是JavaScript對象
- document.getElementById("show").innerHTML =
- data.name + ",是從服務器返回的貓的名字";
- }
- // ---------------調用返回集合的方法--------------
- function getBeanList()
- {
- // 調用遠程方法,listCb返回回調函數
- hello.getPersonList(listCb);
- }
- // 遠程Java方法返回List對象,集合元素是JavaBean式的對象
- // 此處的data是JavaScript對象數組
- function listCb(data)
- {
- var result='';
- // 遍歷每個數組元素
- for (var i = 0 ; i < data.length ; i ++)
- {
- result += data[i].name + "<br />";
- }
- document.getElementById("show").innerHTML = result;
- }
- // ---------------調用返回數組的方法--------------
- function getBeanArray()
- {
- hello.getPersonArray(arrayCb);
- }
- function arrayCb(data)
- {
- var result = "";
- // 下面的data是遠程Java方法的返回值,
- // data是個數組,遍歷數組。
- for (var i = 0 ; i < data.length ; i ++)
- {
- //依次訪問數組元素,數組元素是JSON格式的對象,訪問其name屬性
- result += data[i].name + "<br />";
- }
- document.getElementById("show").innerHTML = result;
- }
- // ---------------調用返回Map對象的方法-------------
- function getBeanMap()
- {
- hello.getPersonMap(mapCb);
- }
- // 遠程Java方法返回Map對象,集合元素是JavaBean式的對象
- // 此處的data是JavaScript對象,且每個屬性值都是JavaScript對象
- function mapCb(data)
- {
- var result='';
- for (var key in data)
- {
- result += "鍵爲" + key + ",其值爲:" + data[key].name + "<br />";
- }
- document.getElementById("show").innerHTML = result;
- }
- // ---------------調用發送集合的方法-------------------
- function sendBeanList()
- {
- // 創建JavaScript數組
- var args = [
- {name:"客戶端aaa"},
- {name:"客戶端bbb"},
- {name:"客戶端ccc"}
- ];
- // Java方法需要List參數,以JavaScript數組作爲參數調用遠程方法
- hello.sendList(args , sendListCb);
- }
- function sendListCb(data)
- {
- document.getElementById("show").innerHTML = data;
- }
- // ---------------調用發送無泛型限制的集合--------------------
- function sendBeanListNoGeneric()
- {
- // 創建JavaScript數組
- var args = [
- {name:"客戶端aaa"},
- {name:"客戶端bbb"},
- {name:"客戶端ccc"}
- ];
- // Java方法需要List參數,以JavaScript數組作爲參數調用遠程方法
- hello.sendListNoGeneric(args , sendListCb);
- }
- // ---------------調用發送Map的方法-------------------------
- function sendBeanMap()
- {
- // 創建JavaScript對象
- var args = {
- first:{name:"客戶端aaa"},
- second:{name:"客戶端bbb"},
- third:{name:"客戶端ccc"}
- };
- // Java方法需要Map參數,以JavaScript對象作爲參數調用遠程方法
- hello.sendMap(args , sendMapCb);
- }
- function sendMapCb(data)
- {
- document.getElementById("show").innerHTML = data;
- }
7.創建前端html的文件
html的文件就是要調用hellodwr.js中的方法。
- <!DOCTYPE html>
- <html>
- <head>
- <meta name="author" content="OwenWilliam" />
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title> DWR入門 </title>
- <!-- 導入DWR引擎的核心JavaScript代碼庫 -->
- <script type='text/javascript' src='leedwr/engine.js'></script>
- <!-- 導入開發者爲本應用編寫的JavaScript代碼庫 -->
- <script type='text/javascript' src='hellodwr.js'></script>
- <!-- 導入DWR爲hello對象動態生成的JavaScript代碼庫 -->
- <script type='text/javascript' src='leedwr/interface/hello.js'>
- </script>
- </head>
- <body>
- <h3>DWR入門</h3>
- 請輸入您的名字<input id="name" name="name" type="text"/><br />
- <input type="button" value="發送簡單請求" onclick="sendMessage();"/>
- <input type="button" value="發送對象參數" onclick="sendObject();"/>
- <input type="button" value="返回JavaBean" onclick="getBean();"/><br />
- <input type="button" value="返回Object" onclick="getObject();"/>
- <input type="button" value="返回Bean集合" onclick="getBeanList();"/>
- <input type="button" value="返回Bean數組" onclick="getBeanArray();"/><br />
- <input type="button" value="返回Bean Map" onclick="getBeanMap();"/>
- <input type="button" value="發送Bean集合" onclick="sendBeanList();"/>
- <input type="button" value="發送不帶泛型限制的Bean集合"
- onclick="sendBeanListNoGeneric();"/><br />
- <input type="button" value="發送Bean Map" onclick="sendBeanMap();"/>
- <hr />
- 下面是服務器的迴應:<br />
- <div id= "show"></div>
- </body>
- </html>