[ajax]DWR使用STEP BY STEP

DWR（Direct Web Remoting http://directwebremoting.org/dwr/index.html ）是一种ajax框架，AJAX对于用户体验的友好性的提升是我们在开发服务型网站的最大出发点。现在市面流行的有不少AJAX框架，而DWR则是其中较为简洁而广泛使用的一种。

 

有别于访问URL的传统模式，DWR自己在服务端作了一个通用的Service层Gateway(Proxy)，使得客户端的Javascript 可以直接操作远程的服务器端的Service层，再配合TrimPath JSTemplate 以Template而不是Dom Builder的方式将Service层返回的POJO渲染成复杂的页面，创造一种新的纯Ajax编程模式。

 

现在我们通过一个小实验，来开始我们的hello ,world step by step。

 

1、dwr的准备工作

 

下载jar包（下载地址 http://download.csdn.net/source/2568398 ），并将其放入 WEB工程的WEB-INF/lib下。

 

2、配置dwr的servlet

 

上面我们讲过，dwr其实就是在服务器端对处理业务逻辑的service进行了一层代理，而这个代理的触发在web系统中采用的是普通的发送请求的方式，而dwr可以捕获请求并进行处理。好了，这样我们或许可以想一下，如何来实现拦截请求，而且是特定的请求，因为并非所有的客户端发来的请求都是ajax的操作请求，收到请求后进行处理，最后返回给用户一个数据包。通过什么来实现呢？

过滤器，servlet，都可以！只要可以配置url-parten的都可以来实现这个功能。那么dwr采用的，是servlet的方式。

所以，我们需要配置一个dwr的servlet，在web.xml中：

 

<servlet><servlet-name>dwr</servlet-name><servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class><init-param><param-name>config</param-name><param-value>/WEB-INF/dwr.xml</param-value></init-param><init-param><param-name>crossDomainSessionSecurity</param-name><param-value>false</param-value></init-param><init-param><param-name>allowGetForSafariButMakeForgeryEasier</param-name><param-value>true</param-value></init-param><init-param><param-name>allowScriptTagRemoting</param-name><param-value>true</param-value></init-param><init-param><param-name>debug</param-name><param-value>false</param-value></init-param></servlet><servlet-mapping><servlet-name>dwr</servlet-name><url-pattern>/dwr/*</url-pattern></servlet-mapping> 

 

可以看到上面对带有dwr/的请求进行拦截并处理，上面个选项的含义，大家可以在相关的文档中查看，由于我们这篇文章讲的是快速出效果，所以这里不赘述技术细节。

 

http://www.google.com.hk/search?hl=zh-CN&newwindow=1&safe=strict&q=dwr参数配置&aq=f&aqi=&aql=&oq=&gs_rfai= （信google，得永生）

 

 

大家可以看到上面我们配置了一个config选项，这个选项是做什么呢，是定义了dwr自己的配置文件的路径和名字，我们定义的是dwr.xml，所以下一步：

 

3、配置dwr的配置文件dwr.xml

 

<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN" "http://getahead.org/dwr//dwr20.dtd"><dwr><allow> <create creator="spring" javascript="UserServiceBean"> <param name="beanName" value="userServiceBean"/> </create> </allow></dwr> 

 

这些标签的含义以及具体的参数，可以查看相关的文档，这里扫盲性的讲解两个基础标签：create 和 convert

 

 【create】 你可以理解为这个标签创建了一个代理，代理的class制定方式有多种，由于实例工程中我们有spring的环境，所以我们这里采用的是spring的方式，因为我们的代理service 的代理类已经配置了bean，所以这里通过beanName加载进来就可以了。基础的配置方式采用的是路径的方法，比如配置class 为 com.testdwr.UserServiceBean

 

【convert】 可以理解为一种转换器，当我们的业务逻辑处理service返回了一个复杂对象的时候，dwr如何转换这个类型为页面可以识别的类型呢，就是通过在这里配置一个convert。这个配置很简单，类似于配置一个bean一样，不需要任何的开发过程。

 

好了，这里的工作结束，我们的准备性工作已经结束了，剩下的就是如何来用了。

 

4、添加dwr的js库的引用

 

异步交互过程一般是这样子的：页面上我们点击一个按钮，然后页面的某一个小区域刷新显示了结果，页面的其他部分不受影响。

其中的这个异步过程，包括按钮点击发送请求，势必是一个js参与的过程！所以要使用dwr进行异步操作，自然少不了对js的依靠：

 

dwr提供了两个js库，可以直接导入并使用：

 

 

 

<mce:script type='text/javascript' src="dwr/engine.js" mce_src="dwr/engine.js"></mce:script><mce:script type='text/javascript' src="dwr/util.js" mce_src="dwr/util.js"></mce:script> 

 

 

这个时候你会想，我们上面开始的时候没有说下载js呀，这里哪里去找呢？

答案是这个不需要下载并拷贝进去的，是dwr已经提供了，只需要将上述两句代码copy进去就可以了。

还要添加点什么？

 

<mce:script type='text/javascript' src="dwr/interface/UserServiceBean.js" mce_src="dwr/interface/UserServiceBean.js"></mce:script> 

这个又是干嘛的呢？注意看这个js文件的名字，是不是跟我们代理类的名字一样？那这个哪里去找呢？

答案是不需要做任何事情，这个是dwr根据配置文件内容自动生成的，我们要做的，只是需要在这里添加一个js引用而已。后面如果你有自己新的代理类，只需要更改这个js 的文件名字就可以了。

 

5、页面使用dwr

 

<button onclick="getUserName();">button</button>

 

上面是一个按钮，这个按钮点击了会进行ajax的交互动作。然后我们写js：

 

<SCRIPT LANGUAGE="JavaScript"><!-- function getUserName(){ UserServiceBean.getUserName(getUserNameCallback); } function getUserNameCallback(s){ $("d1").innerHTML=s; }//--></SCRIPT> 

这样写就是所有的js内容了！ 其中包括了控件事件对应的js方法，方法中使用XXBean.method(param)的java式调用代理类，然后最有一个参数是指定当前请求返回的时候的执行方法，也就是回调方法。通常这个方法用来接收处理结果并在页面上做一些动作，比如在某个div显示一个成功或者失败的字样等。

注意这里的由于我们的方法没有参数，所以这里没有写。如果你的方法有参数，可以按照顺序依次写下去就可以了，跟java一样。

这里返回的值可以是复杂的类型，比如一个User类，这个时候我们定义的convert就是有用了，这里我们”感觉不到任何的“使用障碍，直接使用  User.name就可以访问了。

 

至此所有的步骤已经完成，一个基础的dwr的使用就这样结束。但是后续的工作还有很多，业务场景复杂多变，不可能这样的三脚猫功夫都能满足所有的需求，所以我们剩下的工作，就是好好研究那些配置项的具体含义 吧！

 

-----------华丽分割-----------

上面的那种直接根据代理类来命名js的方式，是比较简单的方法，我们也可以去使用另一种方式，来完成这个过程。

 

if (dwr == null) var dwr = {}; if (dwr.engine == null) dwr.engine = {}; if (DWREngine == null) var DWREngine = dwr.engine; if (UserServiceBean == null) var UserServiceBean= {}; UserServiceBean._path = '/dwr';UserServiceBean.applyJoinGroup = function(groupId){dwr.engine._execute(UserServiceBean._path, 'UserServiceBean', 'applyJoinGroup', groupId, false, applyJoinGroupCallback);}function applyJoinGroup() {UserServiceBean.applyJoinGroup(application);} 

 

这又是什么方法呢？其实这个只是将dwr的自动解析的那个js给自己写了出来，虽然有点麻烦，但是这样写，对于首次接触dwr的同学来说，会更好的理解这个其中到底是什么回事儿，总比一个文件就敷衍住我们更有说服力吧！

 

最近的项目对于用户体验的要求还是蛮高的，所以一直也尝试各种方式，在今天的互联网竞争激烈状态，用户都是很挑剔的，所以在进行系统开发过程中，已经要将用户体验放到最重要的位置，以用户为中心出发思考功能操作流程，做到用户第一，才是最根本的原则。

 

个人觉得，对于一个框架或者技术，首先要学会的是一个熟练的使用，具体的深层次的研究，其实在每次遇到问题的解决过程中，就可以慢慢的引导进去，熟练的使用是一个大前提。正如dwr一样，这个东西虽然使用起来很简单，但是在后续的项目中，肯定会遇到各种各样的问题，比如跨域如何处理？这些都是后续要陆续总结的内容。

 

共勉。