Dwr入门操作手册
DWR配置和使用
设置DWR的使用是简单的:将DWR的jar文件拷入Web应用的WEB-INF/lib目录中,在web.xml中增加一个servlet声明,并创建DWR的配置文件。
DWR的分发中需要使用一个单独的jar文件。你必须将DWR servlet加到应用的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>
一个可选的步骤是设置DWR为调试模式—象上面的例子那样—在servlet描述段中将debug参数设为true。当DWR在调试模式时,你可以从HTMl网页中看到所有的可访问的Java对象。包含了可用对象列表的网页会出现在/WEBAPP/dwr这个url上,它显示了对象的公共方法。所列方法可以从页面中调用,允许你,第一次,运行服务器上的对象的方法。下图显示了调试页的样子:
调试页
现在你必须让DWR知道通过XMLHttpRequest对象,什么对象将会接收请求。这个任务由叫做dwr.xml的配置文件来完成。在配置文件中,定义了DWR允许你从网页中调用的对象。从设计上讲,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自己创建类,通过new关键字创建java类的实例 -->
<create creator="new" javascript="TestDWR">
<param name="class" value="com.yd.colbean.TestDWR"></param>
<!-- include表示客户端通过TestDWR可以调用服务器对象的那些方法
如果不写则代表可以调用该类的所有公有(public)方法
-->
<include method="getHello"/>
</create>
</allow>
</dwr>
上面的文件实现了我们例子中的两个目标。首先,<convert>标记告诉DWR将com.yd.pojos.Userss对象的类型转换为联合数组,因为,出于安全的原因,DWR默认的不会转换普通bean。第二,<create>标记让DWR暴露出com.yd.imp.UserCol类给JavaScript调用;我们在页面中使用JavaScript文件被javascript属性定义。我们必须注意<include>标记,它指明了com.yd.imp.UserCol类的哪些方法可用。
1: 基本的客户端发送值和接受值
过程:
1:导入包dwr.jar
2: 修改web。Xml文档
3:编写java处理类(代码从简)
package com.yd.colbean;
public class TestDWR {
public String getHello(String name){
return "你好: "+name;
}
}
4:编写Dwr.xml,在其中暴露可以脚本中间调用的方法。其中javascript="TestDWR"指在 客户端脚本中调用的名字。<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页面中间增加下面的代码。这个可以在上面提到的测试页面中间找到,复制过来即可
<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>
<!--这里的代码是从前面的调试页面复制过来的。à
<!—下面的代码自己编写,进行业务处理-->
<SCRIPT type='text/javascript'>
function test1(){
//通过方法得到值
var s=DWRUtil.getValue("username"); //使用getvalue方法得到id为username的值
TestDWR.getHello(s,del)//调用getHello方法,第一个参数为传递的值,最后一个参数为回调程序
}
//回调程序,参数为返回的结果
function del(data){
//将值保存在页面的变量中间
DWRUtil.setValue("a",data); //调用setValue方法来设置值
DWRUtil.setValue("rst",data);
}
</SCRIPT>
使用DWRUtil必须注意的事项:必须在web.xml中配置DWR Servlet在web服务器启动时就加载实例化即 配置
<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向服务器发请求。
2: 对表格数据进行操作
刚才我们在客户端使用文本框和div块来输入数据可接受数据,在这个中间可以使用下面的方法来处理数据。
DWRUtil.getValue(“username”); //这个方法得到页面中间id为username的值
DWRUtil.setValue(“rst”,”你好”); //这个方法设置页面中间id为username的值
在客户端显示数据还有其他的方式,其中使用比较多的有表格显示数据集合,下拉框显示多条数据。
在dwr中间可以使用方法来比较方便的再客户端操作显示数据
先看基本的方法
DWRUtil.removeAllOptions('rst');//删除列表中的所有option
DWRUtil.addOptions('rst', goods,"id","msg");
//添加option对象,goods是对象数组,其属性id作为option的value值。其属性msg作为option的text的值
DWRUtil.removeAllRows("rst");//删除tbody中间所有的行
DWRUtil.addRows("rst", goods,[getid, getmsg]);//添加表的行,goods数组
下面例子说明:
先看后台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){//如果消息数量太少,就删除,另外增加,在实际中应该从数据库中取值
ls.clear();
for(int i=0;i<6;i++){
Message msg=new Message();
msg.setId(new Integer(i));
msg.setMsg("消息内容"+i);
ls.add(msg);
}
}
return ls;
}
}
配置文件
Web.xml同上
dwr.xml
<dwr>
<allow>
<!-- convert将Message的集合变成javascript中间的对象数组-->
<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>
注意在服务器返回集合到客户端时,需要进行转换位javascript的对象。需要定义convert
下面是
Test1.jsp
同样需要复制
<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'>
//这个函数在点击按钮的时候调用。首先删除rst这个tbody中间的内容。然后请求服务器的方法
function test1() {
DWRUtil.removeAllRows("rst");
userAction.getUserMessage(fillTable);
}
//这里定义对数据的转化规则,转换规则是用对象数据中的每一个对象来进行转换,返回一个字符串或其他对象,显示在表格的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+"\");'/>";
};
//回调函数 ,在这里会对返回的goods对象集合,循环调用对应的转化规则来得到没一行的内容来显示
function fillTable(goods) {
//对于dwr2,我们需要增加下面这个语句
//这个方法用来设置dwr是不是转化对应的html标签
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来动态的修改 -->
</tbody>
</table>
</body>
最后显示结果
点击按钮