首页 > 代码库 > dwr使用步骤
dwr使用步骤
一:基本步骤:
1.为工程添加jar包:dwr.jar common-logging.jar
如果本工程使用struts,则struts内置了common-logging.jar,不需要重复引入
2.web.xml部分,添加dwr的servlet配置
<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>
</servlet>
<servlet-mapping>
<servlet-name>dwr-invoker</servlet-name>
<url-pattern>/dwr/*</url-pattern>
</servlet-mapping>
注意:
<init-param>
<param-name>debug</param-name>
<param-value>true</param-value>
</init-param>
该配置项是开启dwr控制台的开关,如果该项为false,则dwr控制台失效.
3.在/WEB-INF下建立dwr.xml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN" "http://getahead.ltd.uk/dwr/dwr20.dtd">
<dwr>
<allow>
<create creator="new" javascript="test">
<param name="class" value="http://www.mamicode.com/test.TestDao" />
</create>
<!-- 如果需要实体类,则需要配置为如下 match:类路径 converter="bean":固定参数 -->
<convert match="bean.*" converter="bean"></convert>
</allow>
</dwr>
注意:creator="new" 代表本类的创建方式
javascript="test" 代表本类在javascript中的名称
name="class" 代表把某个类配置到dwr中 value="":代表类路径
4.建立相关的类:
package test;
public class TestDao {
public void hello(){
System.out.println("Hello JavaScript . . .");
}
public void sayHello(String name){
System.out.println("Hello " + name);
}
public int add(int a , int b){
return a+b;
}
}
5.把工程部署到tomcat中,通过下列地址测试dwr环境是否完成:
http://ip:port/appName/dwr
如果看到控制台,点击进入,测试方法是否可以正常运行
6.在需要调用dwr相关资源的页面中,按照控制台的提示cope资源:
<script type=‘text/javascript‘ src=http://www.mamicode.com/‘${pageContext.request.contextPath }/dwr/interface/test.js‘></script>
<script type=‘text/javascript‘ src=http://www.mamicode.com/‘${pageContext.request.contextPath }/dwr/engine.js‘></script>
7.调用dwr资源的脚本写法:
dwr名称.方法名称(参数... ,{
callback:function(返回值){
处理返回的逻辑块
}
})
例如:
test.hello();
test.sayHello("诡异小孩");
test.add(10,10,{
callback:function(data){
alert(data);
}
});
test.add(10,10,callback);
function callback(data){
alert(data);
}
二:基本应用:
返回数据解析:
1.简单对象:
test.getTest({
callback:function(data){
alert(data.id+":"+data.name+":"+data.age+":"+data.sex+":"+data.birthday);
}
});
2.简单列表:
test.queryForList({
callback:function(data){
for(var i=0;i<data.length;i++){
alert(data[i]);
}
}
});
3.对象列表:
test.queryAll({
callback:function(data){
for(var i=0;i<data.length;i++){
alert(data[i].id+":"+data[i].name+":"+data[i].age+":"+data[i].sex+":"+data[i].birthday);
}
}
});
4.向后台传对象:
var myObject={‘id‘:108,‘name‘:‘小
白‘,‘age‘:24,‘sex‘:‘女‘,‘birthday‘:‘1989-11-01‘};
test.setObject(myObject);
参数解析:
preHook:交互结束之前执行
callback:交互结束之后返回
postHook:在返回结束之后执行
timeout:设置响应超时时间
errorHandler:设置异常捕获
test.query({
callback:function(data){alert("处理返回"+data);},
preHook:function(){alert("返回之前...");},
timeout:4000,
errorHandler:function(msg){alert("如果响应时间超过timeout的值,则服务器超时...");}
});