Dwr入門操作手冊
DWR配置和使用
設(shè)置DWR的使用是簡單的:將DWR的jar文件拷入Web應(yīng)用的WEB-INF/lib目錄中，在web.xml中增加一個servlet聲明，并創(chuàng)建DWR的配置文件。
DWR的分發(fā)中需要使用一個單獨的jar文件。你必須將DWR servlet加到應(yīng)用的WEB-INF/web.xml中布署描述段中去。
<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>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>dwr-invoker</servlet-name>
<url-pattern>/dwr/*</url-pattern>
</servlet-mapping>
一個可選的步驟是設(shè)置DWR為調(diào)試模式—象上面的例子那樣—在servlet描述段中將debug參數(shù)設(shè)為true。當(dāng)DWR在調(diào)試模式時，你可以從HTMl網(wǎng)頁中看到所有的可訪問的Java對象。包含了可用對象列表的網(wǎng)頁會出現(xiàn)在/WEBAPP/dwr這個url上，它顯示了對象的公共方法。所列方法可以從頁面中調(diào)用，允許你，第一次，運行服務(wù)器上的對象的方法。下圖顯示了調(diào)試頁的樣子:
調(diào)試頁
現(xiàn)在你必須讓DWR知道通過XMLHttpRequest對象，什么對象將會接收請求。這個任務(wù)由叫做dwr.xml的配置文件來完成。在配置文件中，定義了DWR允許你從網(wǎng)頁中調(diào)用的對象。從設(shè)計上講，DWR允許訪問所有公布類的公共方法，但在我們的例子中，我們只允許訪問幾個方法。下面是我們示例的配置文件:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN" "http://www.getahead.ltd.uk/dwr/dwr20.dtd">
<dwr>
<allow>
<!-- javascript的對象是TestDWR,create="new"是DWR自己創(chuàng)建類,通過new關(guān)鍵字創(chuàng)建java類的實例 -->
<create creator="new" javascript="TestDWR">
<param name="class" value="com.yd.colbean.TestDWR"></param>
<!-- include表示客戶端通過TestDWR可以調(diào)用服務(wù)器對象的那些方法
如果不寫則代表可以調(diào)用該類的所有公有(public)方法
-->
<include method="getHello"/>
</create>
</allow>
</dwr>
上面的文件實現(xiàn)了我們例子中的兩個目標(biāo)。首先，<convert>標(biāo)記告訴DWR將com.yd.pojos.Userss對象的類型轉(zhuǎn)換為聯(lián)合數(shù)組，因為，出于安全的原因，DWR默認的不會轉(zhuǎn)換普通bean。第二，<create>標(biāo)記讓DWR暴露出com.yd.imp.UserCol類給JavaScript調(diào)用;我們在頁面中使用JavaScript文件被javascript屬性定義。我們必須注意<include>標(biāo)記，它指明了com.yd.imp.UserCol類的哪些方法可用。
1: 基本的客戶端發(fā)送值和接受值
過程：
1：導(dǎo)入包dwr.jar
2: 修改web。Xml文檔
3：編寫java處理類（代碼從簡）
package com.yd.colbean;
public class TestDWR {
public String getHello(String name){
return "你好: "+name;
}
}
4：編寫Dwr.xml，在其中暴露可以腳本中間調(diào)用的方法。其中javascript="TestDWR"指在 客戶端腳本中調(diào)用的名字。<include method="getHello"/> 暴露的方法
<dwr>
<allow>
<create creator="new" javascript="TestDWR">
<param name="class" value="com.yd.colbean.TestDWR"/>
<include method="getHello"/>
</create>
</allow>
</dwr>
5：下面編寫Test1.jsp
先在jsp頁面中間增加下面的代碼。這個可以在上面提到的測試頁面中間找到，復(fù)制過來即可
<script type='text/javascript' src='/TestDWR1/dwr/interface/TestDWR.js'></script>
<script type='text/javascript' src='/TestDWR1/dwr/engine.js'></script>
<script type='text/javascript' src='/TestDWR1/dwr/util.js'></script>
<!--這里的代碼是從前面的調(diào)試頁面復(fù)制過來的。à
<!—下面的代碼自己編寫，進行業(yè)務(wù)處理-->
<SCRIPT type='text/javascript'>
function test1(){
//通過方法得到值
var s=DWRUtil.getValue("username"); //使用getvalue方法得到id為username的值
TestDWR.getHello(s,del)//調(diào)用getHello方法，第一個參數(shù)為傳遞的值，最后一個參數(shù)為回調(diào)程序
}
//回調(diào)程序，參數(shù)為返回的結(jié)果
function del(data){
//將值保存在頁面的變量中間
DWRUtil.setValue("a",data); //調(diào)用setValue方法來設(shè)置值
DWRUtil.setValue("rst",data);
}
</SCRIPT>
使用DWRUtil必須注意的事項：必須在web.xml中配置DWR Servlet在web服務(wù)器啟動時就加載實例化即 配置
<load-on-startup>1</load-on-startup>
</head>
<body>
<INPUT type="text" id="username">
<INPUT type="button" value="提交" onclick="test1()">
<INPUT type="text" id="rst">
<div id="a">
</div>
下面點擊按鈕就可以通過ajax向服務(wù)器發(fā)請求。
2: 對表格數(shù)據(jù)進行操作
剛才我們在客戶端使用文本框和div塊來輸入數(shù)據(jù)可接受數(shù)據(jù)，在這個中間可以使用下面的方法來處理數(shù)據(jù)。
DWRUtil.getValue(“username”); //這個方法得到頁面中間id為username的值
DWRUtil.setValue(“rst”,”你好”); //這個方法設(shè)置頁面中間id為username的值
在客戶端顯示數(shù)據(jù)還有其他的方式，其中使用比較多的有表格顯示數(shù)據(jù)集合，下拉框顯示多條數(shù)據(jù)。
在dwr中間可以使用方法來比較方便的再客戶端操作顯示數(shù)據(jù)
先看基本的方法
DWRUtil.removeAllOptions('rst');//刪除列表中的所有option
DWRUtil.addOptions('rst', goods,"id","msg");
//添加option對象，goods是對象數(shù)組，其屬性id作為option的value值。其屬性msg作為option的text的值
DWRUtil.removeAllRows("rst");//刪除tbody中間所有的行
DWRUtil.addRows("rst", goods,[getid, getmsg]);//添加表的行，goods數(shù)組
下面例子說明：
先看后臺bean：
Message.java封裝基本的消息
package com.yd.colbean;
public class Message {
private Integer id;
private String msg;
public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id = id;
}
public String getMsg() {
return msg;
}
public void setMsg(String msg) {
this.msg = msg;
}
}
控制類
package com.yd.colbean;
import java.util.ArrayList;
import java.util.List;
public class UserCol {
private static List ls=new ArrayList();
//模擬得到所有的的消息集合,
public List getUserMessage(){
if(ls.size()<2){//如果消息數(shù)量太少，就刪除，另外增加，在實際中應(yīng)該從數(shù)據(jù)庫中取值
ls.clear();
for(int i=0;i<6;i++){
Message msg=new Message();
msg.setId(new Integer(i));
msg.setMsg("消息內(nèi)容"+i);
ls.add(msg);
}
}
return ls;
}
}
配置文件
Web.xml同上
dwr.xml
<dwr>
<allow>
<!-- convert將Message的集合變成javascript中間的對象數(shù)組-->
<convert converter="bean" match="com.yd.colbean.Message"/>
<create creator="new" javascript="userAction" scope="session">
<param name="class" value="com.yd.colbean.UserCol"></param>
<include method="getUserMessage" />
</create>
</allow>
</dwr>
注意在服務(wù)器返回集合到客戶端時，需要進行轉(zhuǎn)換位javascript的對象。需要定義convert
下面是
Test1.jsp
同樣需要復(fù)制
<script type='text/javascript' src='/TestDWR2/dwr/interface/userAction.js'/>
<script type='text/javascript' src='/TestDWR2/dwr/engine.js'></script>
<script type='text/javascript' src='/TestDWR2/dwr/util.js'></script>
到頁面中間
<SCRIPT type='text/javascript'>
//這個函數(shù)在點擊按鈕的時候調(diào)用。首先刪除rst這個tbody中間的內(nèi)容。然后請求服務(wù)器的方法
function test1() {
DWRUtil.removeAllRows("rst");
userAction.getUserMessage(fillTable);
}
//這里定義對數(shù)據(jù)的轉(zhuǎn)化規(guī)則，轉(zhuǎn)換規(guī)則是用對象數(shù)據(jù)中的每一個對象來進行轉(zhuǎn)換，返回一個字符串或其他對象，顯示在表格的td中間
var getid = function(unit) {
if (unit.id % 2 == 0)
return "<font color=red>"+unit.id+"</font>";
else
return "<font color=green>"+unit.id+"</font>";
};
var getmsg = function(unit) { return unit.msg};
var bt=function(unit) {
return "<input type='button' value='delete' onclick='alert(\""+unit.id+"\");'/>";
};
//回調(diào)函數(shù) ，在這里會對返回的goods對象集合，循環(huán)調(diào)用對應(yīng)的轉(zhuǎn)化規(guī)則來得到?jīng)]一行的內(nèi)容來顯示
function fillTable(goods) {
//對于dwr2，我們需要增加下面這個語句
//這個方法用來設(shè)置dwr是不是轉(zhuǎn)化對應(yīng)的html標(biāo)簽
DWRUtil.setEscapeHtml(false);
DWRUtil.addRows("rst", goods,[getid, getmsg,bt]);
}
</SCRIPT>
</head>
<body>
<INPUT type="button" value="得到消息" onclick="test1()">
<table>
<thead> <!—這個是表格的頭 -->
<th>id</th>
<th>msg</th>
<th>aa</th>
</thead>
<tbody id="rst"> <!—這個是表格的主體，使用ajax來動態(tài)的修改 -->
</tbody>
</table>
</body>
最后顯示結(jié)果
點擊按鈕
