1.安装配置
1.1拷贝dwr文件包到lib目录下
1.2编辑web.xml文件,加入如下代码:
<listener>
<listener-class>org.directwebremoting.servlet.DwrListener</listener-class>
</listener>
<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>
1.3拷贝dwr.xml文件到web.xml文件的目录下:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 3.0//EN" "http://getahead.org/dwr/dwr30.dtd">
<dwr>
<allow>
<!--
<filter class="com.example.dwr.monitor.MonitoringAjaxFilter"/>
<filter class="org.directwebremoting.filter.ExtraLatencyAjaxFilter">
<param name="delay" value="200"/>
</filter>
-->
<!-- intro - for the test on index.html -->
<create creator="new">
<param name="class" value="org.konghao.dwr.model.MyDwr"/>
</create>
<convert converter="bean" match="org.konghao.dwr.model.User"/>
<convert converter="bean" match="org.konghao.dwr.model.Group"/>
<convert match="java.lang.Exception" converter="exception"/>
<convert converter="bean" match="java.lang.StackTraceElement"/>
</allow>
</dwr>
1.4在需要使用的页面中引入js文件(第二个是自己定义的java文件的名字)
<script type="text/javascript" src="<%=request.getContextPath()%>/dwr/engine.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/dwr/interface/MyDwr.js"></script>
2.dwr的应用(以下几个类是下面的一些操作需要用到的测试类,可以自行修改)
MyDwr.java
package org.konghao.dwr.model;
import java.io.File;
import java.io.IOException;
import java.io.InputStream;
import java.util.ArrayList;
import java.util.List;
import javax.servlet.http.HttpServletRequest;
import org.apache.commons.io.FileUtils;
import org.apache.commons.io.FilenameUtils;
import org.directwebremoting.WebContext;
import org.directwebremoting.WebContextFactory;
public class MyDwr {
public String hello(String world) {
System.out.println("hello "+world);
return "hello "+world;
}
public User load() {
User u = new User(1,"张三",new Group(1,"财务处"));
return u;
}
public List<User> list() {
List<User> users = new ArrayList<User>();
users.add(new User(1,"张三",new Group(1,"财务处")));
users.add(new User(2,"李四",new Group(2,"科技处")));
users.add(new User(3,"王五",new Group(3,"宣传部")));
return users;
}
public void add(User user) {
System.out.println(user);
}
public void deleteUser() {
throw new MyException("在删除用户的时候有错");
}
public int add(int a,int b) {
return a+b;
}
public String upload(InputStream is,String filename) throws IOException {
//WebContext可以获取HttpServlet的对象
WebContext wc = WebContextFactory.get();
HttpServletRequest req = wc.getHttpServletRequest();
String realpath = req.getSession().getServletContext().getRealPath("upload");
String fn = FilenameUtils.getName(filename);
String filepath = realpath+"/"+fn;
FileUtils.copyInputStreamToFile(is, new File(filepath));
return filepath;
}
}
User.java
package org.konghao.dwr.model;
public class User {
private int id;
private String username;
private Group group;
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getUsername() {
return username;
}
public void setUsername(String username) {
this.username = username;
}
public Group getGroup() {
return group;
}
public void setGroup(Group group) {
this.group = group;
}
public User(int id, String username, Group group) {
super();
this.id = id;
this.username = username;
this.group = group;
}
public User() {
super();
}
@Override
public String toString() {
return "User [id=" + id + ", username=" + username + ", group=" + group
+ "]";
}
}
Group.java
package org.konghao.dwr.model;
public class Group {
private int id;
private String name;
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public Group(int id, String name) {
super();
this.id = id;
this.name = name;
}
public Group() {
super();
}
@Override
public String toString() {
return "Group [id=" + id + ", name=" + name + "]";
}
}
MyException.java
package org.konghao.dwr.model;
public class MyException extends RuntimeException {
public MyException() {
super();
// TODO Auto-generated constructor stub
}
public MyException(String message, Throwable cause) {
super(message, cause);
// TODO Auto-generated constructor stub
}
public MyException(String message) {
super(message);
// TODO Auto-generated constructor stub
}
public MyException(Throwable cause) {
super(cause);
// TODO Auto-generated constructor stub
}
}
3.dwr的初步使用:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="<%=request.getContextPath()%>/dwr/engine.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/dwr/interface/MyDwr.js"></script>
<script type="text/javascript">
MyDwr.hello("世界",function(data){
alert(data);
});
</script>
</head>
<body>
</body>
</html>
4.dwr调用方法,并使用对象转换功能,进行对象的属性访问
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="<%=request.getContextPath()%>/dwr/engine.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/dwr/interface/MyDwr.js"></script>
<script type="text/javascript">
MyDwr.load(loadUser);
function loadUser(user) {
alert(user.id+","+user.username+","+user.group.name);
}
</script>
</head>
<body>
</body>
</html>
5.dwr调用list方法,并循环输出对应的属性
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="<%=request.getContextPath()%>/dwr/engine.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/dwr/interface/MyDwr.js"></script>
<script type="text/javascript">
MyDwr.list(listUser);
function listUser(users) {
for(var i=0;i<users.length;i++) {
alert(users[i].username+","+users[i].group.name);
}
}
</script>
</head>
<body>
</body>
</html>
6.dwr使用json数据格式进行对象的添加操作
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="<%=request.getContextPath()%>/dwr/engine.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/dwr/interface/MyDwr.js"></script>
<script type="text/javascript">
var user = {id:1,username:"李四",group:{id:2,name:"网络中心"}};
MyDwr.add(user);
</script>
</head>
<body>
</body>
</html>
7.dwr中异常的转换后,进行处理的操作(可以具体查看dwr官方文档中的exception处理)
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="<%=request.getContextPath()%>/dwr/engine.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/dwr/util.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/dwr/interface/MyDwr.js"></script>
<script type="text/javascript">
MyDwr.deleteUser({
callback:deleteUser,
errorHandler:function(msg,exception) {
alert(msg);
/*for(var ea in exception) {
alert(ea);
}
alert(exception.stackTrace);*/
alert(dwr.util.toDescriptiveString(exception,1));
}
});
function deleteUser(data) {
}
</script>
</head>
<body>
</body>
</html>
8.dwr的无刷新操作,添加选项操作,添加表格数据
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="<%=request.getContextPath()%>/dwr/engine.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/dwr/util.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/dwr/interface/MyDwr.js"></script>
<script type="text/javascript">
function calAdd() {
var a = dwr.util.getValue("a");
var b = dwr.util.getValue("b");
MyDwr.add(parseInt(a),parseInt(b),function(data){
alert(data);
});
}
function addAddress() {
var a = dwr.util.getValue("addressName");
var data = [{id:a,name:a}];
dwr.util.addOptions("address",data,"id","name");
}
function initAddress() {
dwr.util.removeAllOptions();
var data = [{id:1,name:"北京"},{id:2,name:"天津"},{id:3,name:"上海"}];
dwr.util.addOptions("address",data,"id","name");
}
function initUser() {
MyDwr.list(function(data){
dwr.util.addRows("user",data,cellFuncs,{ escapeHtml:false });
});
}
var cellFuncs=[
function(data){return data.id},
function(data){return data.username},
function(data){return data.group.name}
];
</script>
</head>
<body>
<input type="text" id="a"/>+<input type="text" id="b"/><input type="button" value="获取" onclick="calAdd()">
<br/>
<select id="address">
</select>
<input type="button" value="初始化地址" onclick="initAddress()"/>
<input type="text" id="addressName"/><input type="button" value="添加" onclick="addAddress()"/>
<table width="600" border="1">
<thead>
<tr>
<td>ID</td>
<td>username</td>
<td>groupName</td>
</tr>
</thead>
<tbody id="user">
</tbody>
</table>
<input type="button" value="初始化用户" onclick="initUser()"/>
</body>
</html>
9.dwr实现的无刷新文件上传功能
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="<%=request.getContextPath()%>/dwr/engine.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/dwr/util.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/dwr/interface/MyDwr.js"></script>
<script type="text/javascript">
function upload() {
var file = dwr.util.getValue("myfile");
alert(file.value);
alert(file);
MyDwr.upload(file,file.value,function(data){
alert(data);
});
}
</script>
</head>
<body>
<input type="file" id="myfile"/>
<input type="button" value="上传文件" onclick="upload()"/>
</body>
</html>
10.dwr与spring的整合:
1、获取ServletAPI
2、debug
如果在web.xml中开启了debug
在页面中可以直接使用
xxx/dwr/index.html查询公布出来的接口
但是该功能在运行时一定要关闭