DWR实例教程开发步骤及注意事项

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。