DWR实例教程开发步骤及注意事项
1.新建web项目:dwr_example;
2.将dwr.jar以及依赖包commons-logging.jar添加到项目中;
3.编写dwr组件(相当于业务层逻辑):
public class CustomInterface {
private PersonDao personDao = new PersonDao();
public boolean savePerson(Person person){
return personDao.save(person);
}
public Person getPerson(String idStr){
return personDao.get(idStr);
}
}
4.编写dwr组件的实现(模拟数据持久层):
public class PersonDao {
private static Map personMap = new HashMap();
public boolean save(Person person){
if(personMap.containsKey(person.getId())) return false;
System.out.println("保存用户开始.");
System.out.println("id:" + person.getId());
System.out.println("name:" + person.getName());
System.out.println("age:" + person.getAge());
System.out.println("birthday:" + person.getBirthday());
personMap.put(person.getId(), person);
System.out.println("保存用户结束.");
return true;
}
public Person get(String idStr){
return (Person)personMap.get(idStr);
}
}
新建数据实体Person类:封装id, name, age, birthday属性;
5.添加dwr.xml配置到项目的WEB_INF目录下,用于配置自定义组件及类型转换器等:
<?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>
<create creator="new" javascript="CustomInterface">
<param name="class" value="component.CustomInterface"/>
</create>
<convert match="entity.Person" converter="bean"/>
</allow>
</dwr>
6.在web.xml中配置请求映射到DWR的核心servlet处理:
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.4"
xmlns="http://java.sun.com/xml/ns/j2ee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee
http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
<!-- 配置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>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
</web-app>
7.编写客户端js调用dwr组件:
<script type="text/javascript" src="<%=basePath%>/dwr/engine.js"></script>
<script type="text/javascript" src="<%=basePath%>/dwr/interface/CustomInterface.js"></script>
<script type="text/javascript">
function save(){
var id = document.getElementById("idTxt").value;
var name = document.getElementById("nameTxt").value;
var age = document.getElementById("ageTxt").value;
var birthday = document.getElementById("birthdayTxt").value;
var param = {
id: id,
name: name,
age: age,
birthday: Date.parse(birthday)
};
CustomInterface.savePerson(param, {
callback: function(retVal){
if(retVal){
alert("保存成功.");
}else{
alert("该用户编号已经存在.");
}
},
timeout: 5000, //设置超时
errorHandler: function(err){ //错误处理
alert(err);
}
});
}
function get(){
var id = document.getElementById("idTxt").value;
CustomInterface.getPerson(id, function(retVal){
if(retVal != null){
var birthday = retVal.birthday;
if(birthday != undefined && birthday != "undefined"){
birthday = new Date(birthday);
birthday = birthday.getFullYear() + "-" + (birthday.getMonth()+1) + "-" + birthday.getDate();
}
alert("编号:" + retVal.id + "\n昵称:" + retVal.name + "\n年龄:" + retVal.age + "\n生日:" + birthday);
}else{
alert("未找到该用户.");
}
}
);
}
</script>
需要自行补充余下的HTML表单,用户获取用户的输入。注意事项:
1.dwr.xml的convert元素只需要配置自定义数据类型就好,其他常见的数据类型转换器DWR已经配置好了;
2.客户端js调用组件的参数如果只有一个字符串,就不需要写成对象的形式,不然到服务端就会解析出意想不到的结果(形如:reference: c1-c2);
3.不要忘了客户端需要添加DWR提供的engine.js。