我的DWR学习总结-CSDN博客

DWR的简介，我在此就不多介绍了！下面主要介绍一下我对DWR的一些应用总结。
1. 下载一个dwr.jar 或者dwr2.jar , 然后拷贝到WEB-INF/lib文件夹下！！
2. 在web.xml中添加下面的一个DwrServlet配置
<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>
<init-param>
<param-name>crossDomainSessionSecurity</param-name>
<param-value>false</param-value>
</init-param>
</servlet>
<servlet-mapping>
<servlet-name>dwr-invoker</servlet-name>
<url-pattern>/dwr/*</url-pattern>
</servlet-mapping>
3. 在web.xml同目录下，建立一个dwr.xml文件，其中的配置如下，具体说明，你可以自己查看相关的文档或者博客。
<?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>
<create creator="new" javascript="Hello">
<param name="class" value="com.hanchao.test.Hello"/>
</create>
<create creator="new" javascript="TestOne">
<param name="class" value="com.hanchao.test.TestOne"/>
</create>
<create creator="new" javascript="TestTwo">
<param name="class" value="com.hanchao.test.TestTwo"/>
<include method="method2"/>
</create>
<create creator="new" javascript="TestThree">
<param name="class" value="com.hanchao.test.TestThree"/>
<include method="method3"/>
</create>
<create creator="new" javascript="TestFour">
<param name="class" value="com.hanchao.test.TestFour"/>
<include method="method4"/>
<include method="method41"/>
</create>
<!—注意当有多个方法时，我们可以用多个include!!-- >
<create creator="new" javascript="TestFive">
<param name="class" value="com.hanchao.test.TestFive"/>
<include method="method5"/>
<include method="method51"/>
</create>
<create creator="new" javascript="TestSix">
<param name="class" value="com.hanchao.test.TestSix"/>
<include method="method6"/>
</create>
<convert converter="bean" match="com.hanchao.entity.User">
<param name="include" value="username,password"/>
</convert>
</allow>
</dwr>
4. 我们以一个例子来解释一下。
首先，写一个java类，和以前没有区别！
/**
* 测试DWR
* @author hanlw
* 2012-02-09
*/
public class Hello {
public String hello(String name) {
return "哈罗 "+name + ",你是第一个DWR demo!";
}
}
其次，将该类配置在dwr.xml中，见上面！
再次，在jsp中调用该类，以及相应的方法！
<head>
<title>DWR-Practice第一个示例</title>
<script type="text/javascript" src="dwr/interface/Hello.js"></script>
<script type="text/javascript" src="dwr/engine.js"></script>
<script type="text/javascript" src="dwr/util.js"></script>
<script type="text/javascript" src="script/jquery1.5.js"></script>
<script type="text/javascript">
//以下是用DWR做的一个例子
function hello() {
var user = $("#user").val();
/*Hello对象调用com.hanchao.test.Hello类中的hello方法
user表示传进去该方法的参数;
当hello()方法返回结果时，会呼叫callback函数！
*/
Hello.hello(user,callback);
}
//回调函数把类Hello.hello()方法的返回值赋值给id="result"的一个div
function callback(msg) {
DWRUtil.setValue('result',msg);
//貌似用下面这种方法给div赋值时是走不通的！！
//$("#result").val(msg);
}
</script>
</head>
<body>
This is practice of DWR.<br/><br/>
<a href="dwr.jspx?_m=success">→</a><br/>
<hr/>
DWR的第一个例子：<br/>
<input id="user" type="text"/>
<input type="button" value="哈罗" οnclick="hello()"/>
<div id="result"></div>
</body>
这样你点击“哈罗”按钮时，就是可以使用DWR进行无刷新的AJAX了！
-------------------------------------------------------------------------------------------------------
此处我就不多说了！具体的例子我会上传到下载中，你可以下载下来，部署到你的myeclipse中，
然后具体的去研究。下面我只说一些常用的方法！！
1. 当你想一进入某个JSP页面就调用某个DWR:
(1.) 用 window.onload = function() {
Option.getOptions(populate);
}
(2.) 对下拉框的操作：返回的是一个数组或者集合时！
function populate(list) {
DWRUtil.removeAllOptions("opts");
DWRUtil.addOptions("opts",list);
}
（3.）一个下拉框联动的例子：
/**
* 下拉框联动的DWR例子
* @author hanlw
* 2012-02-09
*/
public class Bikes {
private Map<String, String[]> bikes;
public Bikes() {
bikes = new HashMap<String,String[]>();
bikes.put("2000", new String[]{"2000 T1","2000 T2","2000 T3"});
bikes.put("2001", new String[]{"2001 A1","2001 A2"});
bikes.put("2002", new String[]{"2002 BW1","2002 BM2"});
bikes.put("2003", new String[]{"2003 DB1","2003 DB2"});
}
public String[] getYear() {
//声明一个数组，大小和bikes相同
String[] keys = new String[bikes.size()];
int i = 0;
for(String key : bikes.keySet()) {
keys[i++] = key;
}
return keys;
}
public String[] getBikes(String year) {
return bikes.get(year);
}
}
***************************************************************
<html>
<head>
<title>DWR-下拉框联动的例子</title>
<script type="text/javascript" src="dwr/interface/Bikes.js"></script>
<script type="text/javascript" src="dwr/engine.js"></script>
<script type="text/javascript" src="dwr/util.js"></script>
<script type="text/javascript">
function refreshYearList() {
Bikes.getYear(populateYearList);
}
/*
注意：此处可以换成window.onload = function(){
Bikes.getYear(populateYearList);
};
*/
function populateYearList(list) {
DWRUtil.removeAllOptions("years");
DWRUtil.addOptions("years",list);
refreshBikeList();
}
function refreshBikeList() {
var year = $("years").value;
Bikes.getBikes(year,populateBikeList);
}
function populateBikeList(list) {
DWRUtil.removeAllOptions("bikes");
DWRUtil.addOptions("bikes",list)
}
</script>
</head>
<body οnlοad="refreshYearList()">
年份：<select id="years" οnchange="refreshBikeList()"></select><br/><br/>
型号：<select id="bikes"></select>
</body>
</html>
*************************************************************************
(4.) 户的保存
//用户的保存
function save() {
//下面的红字是关键哦！！
var userMap = {};
userMap.username = $("#name").val();
userMap.password = $("#pwd").val();
UserTest.save(userMap,populateSave);
}
//保存用户时的回调函数
function populateSave(data) {
if(data) {
alert("保存成功！");
} else {
alert("用户名已经存在！");
$("#name").val("");
$("#pwd").val("");
}
}
******************************************
--------------------------------------------
1. 调用有返回值的java方法
//调用有返回值的java方法
window.onload = function() {
TestOne.method1(callback);
}
//处理返回值的回调函数
function callback(data) {
DWRUtil.setValue('content',data);
}
2. 调用含有参数的java方法
//以下是一个DWR的例子
function hell() {
var value = document.getElementById("one").value;
//alert(value);
Hello.hello(value,callback);
}
//回调函数，处理从java类返回的值
function callback(msg) {
DWRUtil.setValue('content',msg);
}
3．调用返回javabean的方法
function myMethod() {
//当点击按钮时，我们要调用DWR
TestTwo.method2(callback);
}
//处理返回值的回调函数
function callback(data) {
//关于回调函数返回值处理方法，好像还有一种方法。
//下面的红字是关键！！
var name = data.username;
var pwd = data.password;
DWRUtil.setValue('content1',name);
DWRUtil.setValue('content2',pwd);
}
3. 调用含有javebean参数的方法
//调用含有javabean参数的java方法
function clickme() {
//下面的红色部分是重点哦
var user ;
user = {username:"aa",password:"bb"};
TestThree.method3(user,callback);
}
//处理回调函数的返回值
function callback(data) {
DWRUtil.setValue('content',data);
}
4. 调用返回list/set集合的方法
//调用返回list,set,map集合的java方法
function clickme() {
TestFour.method4(callback);
}
//处理回调函数的返回值
function callback(data) {
for(var i = 0; i <　data.length;i++) {
//下面的红色字体是关键哦
var name = data[i].username;
var pwd = data[i].password;
DWRUtil.setValue("content",name);
DWRUtil.setValue("content1",pwd);
}
}
5. 调用含有list/set参数的集合的方法
//调用含有list，set集合作为参数的集合的方法
function clickme() {
//下面的红色字体多注意哦
var data;
data = [
{
username:"aa",
password:"bb"
},
{
username:"cc",
password:"dd"
},
{
username:"ee",
password:"ff"
}
];
TestFive.method5(data,callback);
}
//处理返回值的回调函数
function callback(da) {
DWRUtil.setValue('content',da);
}
6. 调用参数为map集合的方法（这个注意下，因为我的demo，效果不是我想要的！！）
//当参数为map集合时
function ok() {
var data;
data = {
"key1":{
username:"nam1",
password:"pwd1"
},
"key2":{
username:"nam2",
password:"pwd2"
}
};
TestFive.method51(data,callback1);
}
//处理返回值的回调函数
function callback1(da) {
DWRUtil.setValue('content',da);
}
7. 当返回值为map集合时
//调用返回值为map的集合的 java方法
function clickme() {
TestSix.method6(callback);
}
//处理返回值的回调函数
function callback(data) {
//注意下面的红色字体
for(var property in data) {
var bean = data[property];
alert(bean.username);
alert(bean.password);
}
}
**********************************************************************
----------------------------------------------------------------------
下面是Util.js中的一些方法：
1. DWRUtil.getValue(“param”)
注意：该函数只能用于有value属性的元素。
Param 只能是id或者name的属性值！
但是有时候name的属性值貌似取不到值！我也不知道为什么！
//3.getValue()的学习
function three() {
//来通过getValue（）方法拿值试试哈
var value = DWRUtil.getValue("myvalue");
Hello.hello(value,callback3);
}
function callback3(data) {
DWRUtil.setValue("content2",data);
}
2. DWRUtil.getValues();(提示：这个方法，我没有试验成功！！)
功能:获得一组指定元素的value值;
参数:id或name构成的数组对象
//4.getValues()的学习
function four() {
Hello.hello("tom",callback4);
}
function callback4(data) {
var arr = DWRUtil.getValues({"name1":null,"name2":null});
alert(arr.length);
for(var i=0; i<arr.length;i++) {
alert(arr[i]);
}
}
3. DWRUitl.setValues() 方法的应用。
功能:设置一组指定元素的值
参数: id或name构成的数组对象
function five() {
Hello.hello("tom",callback5);
}
function callback5(data) {
//注意下面的语句
DWRUtil.setValues({"name1":"setValue","name2":"setValues"});
}
4.DWRUtil.getText()方法的应用
功能:获得select元素的文本值
参数: id或name属性值
实际应用中：用id属性取到值了！而用name属性没有取到值！
//6.getText()的学习
function six() {
Hello.hello("jerry",callback6);
}
function callback6(data) {
var value1 = DWRUtil.getText("mySelect");
//注意一下：getValue()取到的是value的值哦！你懂的哦！！
var value2 = DWRUtil.getValue("mySelect");
alert(value1+"---------"+value2);
}
4. addRows()方法的应用
//下面是html内容
<input type="button" value="触发" οnclick="seven()"/>
<table bgcolor="#fe8400" cellspacing="1" width="70%" style="margin-left:auto;margin-right:auto">
<thead>
<tr bgcolor="#fffff">
<th>用户名</th>
<th>密码</th>
</tr>
</thead>
<tbody id="myTable" bgcolor="#ffffff" style="text-align:center"></tbody>
</table>
//下面是我们JS代码
//7.addRows（）的用法
function seven() {
Hello.hello("jerry",callback7);
}
function callback7(data) {
//下面的代码请注意下！
var items = [{"name":"王二","password":"123456"}];
DWRUtil.addRows("myTable",items,[
function(item) {return item.name},
function(item) {return item.password}
]);
}
5. addRows()方法应用二：
//下面是我们的html代码
<input type="button" value="触发" οnclick="eight()"/>
<table bgcolor="#000000" cellspacing="1" width="70%" style="margin-left:auto;margin-right:auto">
<thead>
<tr bgcolor="#fffff">
<th>用户名</th>
<th>密码</th>
<th>操作</th>
<th>操作二</th>
<th>操作三</th>
</tr>
</thead>
<tbody id="myTable2" bgcolor="#ffffff" style="text-align:center"></tbody>
</table>
//下面是我们的JS代码
//8.addRows()方法使用二(从数据库里查出来的！)
function eight() {
TestFour.method4(callback8);
}
function callback8(data) {
/*
首先，可以肯定的是下面这个方法可以添加表格的行成功！
DWRUtil.addRows("myTable",data,[
//注意：下面两行中的data也可以换成其他的，比如，你写成item,或者xx,等都可以出来效果！
function(data) {return data.username},
function(data) {return data.password}
]);
*/
/*
下面我们换种方法！分开写。（注意下！！）
*/
var cellfuncs = [
//把两个数据写在一列中！！
function(data) {return (data.username+" "+data.password)},
function(data) {return data.password},
//下面的一段代码是添加一个删除按钮！注意
function(data) {
//注意，此处的id应该是数据库中id
var id = data.username;
//创建一个input标签
var delButton = document.createElement("input");
//给input标签添加属性
delButton.setAttribute("type","button");
delButton.setAttribute("onclick","delUser("+id+")");
delButton.setAttribute("class","delete");
delButton.setAttribute("value","删除");
return delButton;
},
//在此再加一个超链吧！！
function(data) {
var idd = data.username;
var editButton = document.createElement("a");
editButton.setAttribute("href","javascript:void(0)");
/*************重要****************/
//创建一个包含静态文本的节点
var text = document.createTextNode("编辑");
//将静态文本的节点加入到a标签中
editButton.appendChild(text);
/**************重要*******************/
editButton.setAttribute("value","edit");
editButton.setAttribute("id",idd);
return editButton;
},
//再加一个按钮吧--2012-02-15
function(data) {
var idd = data.username;
var watchButton = document.createElement("input");
watchButton.setAttribute("type","button");
watchButton.setAttribute("onclick",'watchUser('+idd+')');
watchButton.setAttribute("id","watch");
watchButton.setAttribute("value","查看");
return watchButton;
}
];
/*
下面我们要把内容添加到表格中去了！！
*/
DWRUtil.addRows("myTable2",data,cellfuncs);