通过DWR简化AJAX开发

DWR（Direct Web Remoting）是一个WEB远程调用框架，采取了一个类似AJAX的新方法来动态生成基于JAVA类的JavaScript代码。这样WEB开发人员就可以在JavaScript里使用Java代码，就像它们是浏览器的本地代码(客户端代码)一样。

其开发过程如下：

拷贝dwr.jar文件
修改web.xml文件，添加dwr servlet配置
编写dwr组件，即提供给javascript访问的java类。
在web-inf下面添加dwr.xml文件，进行配置
创建jsp页面，需引入dwr的javascript文件，调用java类方法

下面以用户注册的例子，来说明其使用。

修改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>

引入第三方框架时，都需要做这两件事：加入第三方框架的配置信息（见下面的dwr.xml）和在web.xml中配置，引入该框架。

编写dwr组件，即提供给javascript访问的java类

public class User {
private String id;
private String name;
private String password;
        
//以下包含getXXX和setXXX方法
.......
  }
 
DWRUserAccess：
public class DWRUserAccess {
public boolean save(User user) {
System.out.println("id：" + user.getId());
System.out.println("password：" + user.getPassword());
System.out.println("name：" + user.getName());
return true;
}
 
public User find(String id) {
User user = new User();
user.setId(id);
user.setName("lisi");
user.setPassword("lisi");
return user;
}
}

csdn的代码格式化做的太次毛了，全部对齐了。

在web-inf下面添加dwr.xml文件，进行配置

< xml version="1.0" encoding="UTF-8" >
<!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 1.0//EN" "http://www.getahead.ltd.uk/dwr/dwr10.dtd">
 
<dwr>
  <allow>
<create creator="new" javascript="DWRUserAccess">
      <param name="class" value="test.DWRUserAccess"/>
</create>
<convert converter="bean" match="test.User"/>
  </allow>
</dwr>

创建jsp页面，需引入dwr的javascript文件，然后调用java类方法

<%@ page language="java" import="java.util.*" pageEncoding="GB18030"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Insert title here</title>
<script  type="text/javascript" src="dwr/engine.js"></script>
<script  type="text/javascript" src="dwr/util.js"></script>
<script  type="text/javascript" src="dwr/interface/DWRUserAccess.js"></script>
<SCRIPT LANGUAGE="JavaScript">
 
function saveFun(data) {
if (data) {
alert("注册成功！");
} else {
alert("登陆ID已经存在！");
}
}
 
function OnSave() {
var userMap = {};
userMap.id = loginForm.id.value;
userMap.password = loginForm.password.value;
userMap.name = loginForm.name.value;
// 调用DWRUserAccess类的save方法
DWRUserAccess.save(userMap, saveFun);
}
 
function findFun(data) {
if (data == null) {
alert("无法找到用户："+queryForm.id.value);
return;
}
 
alert("找到用户，nid："+data.id+"，npassword："+data.password+"，nname："+data.name+"，nemail："+data.email);
}
 
function OnFind() {
// 调用DWRUserAccess类的find方法
DWRUserAccess.find(queryForm.id.value, findFun);
}
</SCRIPT>        
 
</head>
<body>
<B>用户注册</B><br>
------------------------------------------------
<Br>
<form name="loginForm">
用户ID：<input type="text" name="id"><br>
口  令：<input type="password" name="password"><br>
姓  名：<input type="text" name="name"><br>
<input type="button" name="submitBtn" value="提交" onclick="OnSave()"><br>
</form>
 
<br>
<br><B>用户查询</B><br>
------------------------------------------------
<Br>
<form name="queryForm">
用户ID：<input type="text" name="id"><br>
<input type="button" name="submitBtn" value="提交" onclick="OnFind()"><br>
</form>
<br>
</body>
</html>

分析dwr.xml，

通过dwr.xml把DWRUserAccess java类配置到了dwr中。

create元素中，creater="new"表示每调用一次DWRUserAccess时，需要new一个这样的类；creator还可以是spring、ejb3等值，意思是对象交给容器管理，就像这段代码所描述

</create>

javascript="DWRUserAccess"，表示提供给前台页面调用的javascirpt文件是DWRUserAccess.js。

类型转换。convert元素用于数据类型转换，因为javascript的对象到了java中是不认识的，相反也是一样的道理。

通过转换器，把javascript的map结构转换到java的User对象或者把java User对象转换到javascript的map结构。（javascript的map结构：各个项是用逗号连接的，而每个项的键值对是用冒号连接的，如var userMap = {id:'admin',password:'123456',name:'chenbug'};）转换器也有多种，比如BeanConverter、ArrayConverter等

分析js代码

DWRUserAccess.js和DWRUserAccess.java是对应的，将我们编写的DWRUserAccess类，经dwr反射后，生成的就是对应的javascript代码，实际上我们就是通过这个js文件去调用服务器端的DWRUserAccess类的。

OnSave函数，首先它构造一个map，然后调用DWRUserAccess.save(userMap, saveFun)，第一个参数userMap是javascirpt中的map对象，而服务器端的DWRUserAccess中的save方法是这样的：boolean save(User user)，参数是一个User对象，所以在服务器端代码执行前，会通过convert转换成User对象。第二个参数saveFun即是一个回调函数，执行完服务端的方法后，将结果填充到function saveFun(data)中的data中。

OnFind函数，因为服务器端返回的是一个User对象，所以需要通过convert，将User对象转换成avascript的一个map对象，将最终结果填充到回调函数findFun(data)的data参数中。

小结

这个从JAVA到JavaScript的远程调用，非常像传统的RPC机制,比如RMI或者Web Service，只需要通过网络向远程计算机请求相应的服务，就能达到想要做的事情。

透过DWR简化AJAX开发