AJAX技术之DWR框架入门
(1) 简介
官方：http://directwebremoting.org/dwr/download
最新版本：2.0.5
DWR (Direct Web Remoting)是getahead公司开发的一个实现AJAX应用的框架。
DWR是一个可以允许你去创建AJAX WEB站点的JAVA开源库。它可以让你在浏览器中的Javascript代码调用Web服务器上的Java代码，就像在Java代码就在浏览器中一样。 DWR包含2个主要部分：
一个运行在服务器端的Java Servlet，它处理请求并且向浏览器发回响应。
运行在浏览器端的JavaScript，它发送请求而且还能动态更新网页。
DWR工作原理是通过动态把Java类生成为Javascript。它的代码就像Ajax魔法一样，你感觉调用就像发生在浏览器端，但是实际上代码调用发生在服务器端，DWR负责数据的传递和转换。这种从Java到JavaScript的远程调用功能的方式使DWR用起来有种非常像RMI或者SOAP的常规RPC机制，而且DWR的优点在于不需要任何的网页浏览器插件就能运行在网页上。 Java从根本上讲是同步机制，然而AJAX却是异步的。所以你调用远程方法时，当数据已经从网络上返回的时候，你要提供有反调 （callback） 功能的DWR。
DWR动态在JavaScript里生成一个AjaxService类，去匹配服务气端的代码。由eventHandler去调用它，然后DWR处理所有的远程细节，包括倒置 （converting） 所有的参数以及返回Javascript和Java之的值。在示例中，先在eventHandler方法里调用AjaxService的getOptions() 方法，然后通过反调 （callback） 方法populateList(data) 得到返回的数据，其中data就是String[]{"1", "2", "3"}，最后再使用DWR utility 把data加入到下拉列表。 好了，DWR介绍完了，现在大家肯定很想知道如何做出第一个DWR吧！然后我们在下一章节以一个HelloWorld示例带领大家入门。
(2) DWR 之Hello World入门
步骤：
l 新建工程，从官方网站下载dwr.jar包。然后将它放在你webapp的WEB-INF/lib目录下。
l 编辑配置web.xml文件加入以下配置：
<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>
l 编写serivce类
package com.dwrdemo; /** * @deprecated: * @author: vince * @version 1.0 * @email [email protected] */ public class Demo{ public String sayHello(String name) { return "Hello, " + name; } }
l 在web.xml的同一目录下，创建dwr.xml，并且将要被调用的java类写入其中
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN" "http://www.getahead.ltd.uk/dwr/dwr20.dtd"> <dwr> <allow> <create creator="new" javascript="Demo"> <param name="class" value="com.dwrdemo.Demo" /> </create> </allow> </dwr>
l 编写JSP测试页面
<1 引用dwr自动生成的js，dwr/interface/service.js，注意js名字要和dwr.xml配置的一样
<2 js里的service.sayHello和java类的那个有一点区别，多了个参数，用来callback返回的
数据
<script type="text/javascript" src="<%=path%>/dwr/util.js"></script> <script type="text/javascript" src="<%=path%>/dwr/engine.js"></script> <script type='text/javascript' src='<%=path%>/dwr/interface/Demo.js'></script>
<script type="text/javascript">
function update() {
var name = dwr.util.getValue("demoName");
Demo.sayHello(name,function(data){
dwr.util.setValue("demoReply",data);
});
}
</script>
<body>
<h2>示例</h2>
<p>
Name:<input type="text" id="demoName" />
<input value="Send" type="button" onclick="update()" />
<br />
Reply:span id="demoReply"></span>
</p>
</body>
<参考示例代码>