在上一篇中DWR3 学习笔记 - 第一个DWR3程序(扩展),介绍了第一个DWR的例子扩展,这篇介绍一下DWR中是如何传输对象的。
在DWR3的架构中,对象传输(将一个对象序列化成可以在网络上传输的字节流)是一个必不可少的过程,看看下面DWR3的对象传输有多简单。
为了简单,我只添加了两个成员属性,name和age
package com.test.bean;
public class User {
@Override
public String toString() {
return "User [name=" + name + ", age=" + age + "]";
}
private String name;
private int age;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public int getAge() {
return age;
}
public void setAge(int age) {
this.age = age;
}
}
第二步,修改dwr.xml,因为dwr不会自动传输对象,因此我们需要在xml中进行声明:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE dwr PUBLIC
"-//GetAhead Limited//DTD Direct Web Remoting 3.0//EN"
"http://directwebremoting.org/schema/dwr30.dtd">
<dwr>
<allow>
<create creator="new" javascript="dwrtest">
<param name="class" value="com.test.service.Dwrtest"></param>
</create>
<convert match="com.test.bean.User" converter="bean" />
</allow>
</dwr>
第三步,增加一个Service类来测试对象上传和下载,为了简单,只是将对象名字修改了一下,然后原封不动传回给客户端
package com.test.service;
import com.test.bean.User;
public class Dwrtest {
public User send(User user)
{
System.out.println(user.toString());
user.setName(user.getName() + "(from Server)"); //做个标记,标明这个对象从Server上下载
return user;
}
}
第四步,写Client端的Jsp测试页面 test1.jsp:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<base href="<%=basePath%>">
<title>Insert title here</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type='text/javascript' src='/dwr3test/dwr/engine.js'></script>
<script type='text/javascript' src='/dwr3test/dwr/util.js'></script>
<script type='text/javascript' src='/dwr3test/dwr/interface/dwrtest.js'></script>
<script type="text/javascript">
function sendUser()
{
dwrtest.send(
{ name:dwr.util.getValue("username"),
age: dwr.util.getValue("age")
},
function(data)
{
dwr.util.setValue("receiveUser","username:" + data.name + " age:" + data.age);
}
);
}
function User(name, age)
{
this.name=name;
this.age = age;
}
</script>
</head>
<body>
<p>对象传输测试:</p>
<p>用户名:<input type="text" id="username" size="20" value=""/></p>
<p>年龄: <input type="text" id="age" size="20" value="" /></p>
<p> <input type="button" value="对象测试" onclick ="sendUser()"> </p>
<p>接收对象</p>
<div id="receiveUser" />
</body>
</html>
注意事项:
- eclipse和tomcat7配合好像总会偶尔有问题出现,刚开始的时候连DwrServlet都无法加载,查了老半天没发觉web.xml有什么问题,最后直接将另外一个可以使用的web.xml复制过来,奇迹般的可以了。
- Javascript的对象处理有多种方法,你可以先定义一个对象(在js中可以用function定义),然后赋值,也可以直接用{property:value, property:value}直接传送对象,我这里用的是第二种。
- 千万要小心dwr.util.addOptions这个方法,我之前视图用这个方法来保存返回的User对象,结果老是报:dwrutil.addOptions can only create select lists from objects....查了老半天,才发觉Server的返回类型必须是Array of Object....我的返回类型直接是User,结果就悲剧了。这里为了简单,直接用setValue来保存单个值
- 源代码我打包上传了,下载地址:点击打开链接