DWR运行实例
DWR是一个框架。DWR是基于AJAX的框架，它可以让浏览器上的javascript方法调用运行在web服务器上java方法。这就需要包含两个部分：一个运行在服务器端的Java Servlet，它处理请求，调用对应的Java代码并且向浏览器发回响应；运行在浏览器端的Javascript，它发送请求而且能动态更新网页。
DWR采用新颖的方法实现了AJAX，在java代码基础上动态的生成javascript代码。DWR负责把Java类生成为对应的Javascript。每个类都生成一个可以处理这个类请求的Javascript文件。用户的网页只要引用这些Javascript就可以发送请求而且能动态更新网页，然而真正的代码是运行在web服务器上的java code。出与安全考虑，开发者必须配置哪些java class暴露给DWR.(dwr.xml)
这种从(java到javascript)调用机制给用户一种感觉，好象常规的RPC机制，或RMI or SOAP.但是它运行在web上，不需要任何浏览器插件。
DWR运行原理：
1）读dwr.xml，在该xml文件中定义的Javascript假设是Test，它对应的类为Test，DWR动态使用Test类生成Test.js，其中的方法也就是调用后台类的同名方法；
2）运行阶段：
客户端：触发事件调用一个方法——>从自己的js中调用了上面的Test.js中的方法t1——>调用客户端的AJAX引擎engin.js发出请求
服务器端：Web容器接到请求，找上下文路径：/dwr/匹配dwr中对应的servlet——>读dwr.xml；根据js名匹配creator定义；依据creator方法创建实例（反射）；调用方法，得到返回值——>out出去。
客户端：回调处理，调用客户端的回调处理（自己写的方法）。
1. webapps下新建文件夹dwrTest，建立src和WEB-INF文件夹。WEB-INF下新建classes，lib文件夹和web.xml。下载dwr.jar包，放到WEB-INF/lib文件夹下。
2. 配置web.xml
<?xml version="1.0" encoding="ISO-8859-1"?> <web-app xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" version="2.5"> <!-- Define servlets--> <servlet> <servlet-name>dwr-invoker</servlet-name> <servlet-class>uk.ltd.getahead.dwr.DWRServlet</servlet-class> <init-param> <description> </description> <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> </web-app>
3. 在src文件夹中写服务端代码文件Test.java 和User.java
public class User { private String name; private int age; private String addr; public User(String n) { name = n; age = 20; addr = "bupt of china"; } public String getName() { return name; } public int getAge() { return age; } public String getAddr() { return addr; } }
public class Test { //返回一般数据 public String getName(String name) { return name; } //返回对象 public User getUser(String name) { return new User(name); } }
编译
javac User.java -d /opt/apache_tomcat_6.0.26/webapps/dwrTest/WEB-INF/classes
javac Test.java -d /opt/apache_tomcat_6.0.26/webapps/dwrTest/WEB-INF/classes
4. 于web.xml同目录下添加并配置dwr.xml。参数配置详见http://blog.csdn.net/HEYUTAO007/archive/2010/07/13/5732630.aspx
<?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><!--要暴露给js的方法,可以有多个--> <create creator="new" javascript="Test"><!-- 对象Test的实例化方式,这里使用的new --> <param name="class" value="Test" /><!-- 对象的位置 --> <include method="getName"/><!-- 浏览器里需要调用到的函数 --> <include method="getUser"/> </create> <convert converter="bean" match="User"/> <param name="include" value="name,age,addr" /> </allow> </dwr>
5. dwrTest下面建立jsp页面getInfo.jsp
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>第一個DWR程式</title> <mce:script type='text/javascript' src="/dwrTest/dwr/interface/Test.js" mce_src="dwrTest/dwr/interface/Test.js"></mce:script> <mce:script type='text/javascript' src="/dwrTest/dwr/engine.js" mce_src="dwrTest/dwr/engine.js"></mce:script> <mce:script type='text/javascript' src="/dwrTest/dwr/util.js" mce_src="dwrTest/dwr/util.js"></mce:script> <mce:script type="text/javascript"><!-- function getName() { //主调函数; var nameValue=document.getElementById("name").value; //参数1,java方法需要的参数,参数2,调用回调函数,dwr自动把返回的数据放入callback的参数内! Test.getName(nameValue,callback1); } function getUser() { //主调函数; var nameValue=document.getElementById("name").value; Test.getUser(nameValue,callback2); } function callback1(msg) { //回调函数; DWRUtil.setValue("yourname",msg); DWRUtil.setValue("yourage",0); DWRUtil.setValue("youraddr","null"); } function callback2(user) { //回调函数; DWRUtil.setValue("yourname",user.name); DWRUtil.setValue("yourage",user.age); DWRUtil.setValue("youraddr",user.addr); } // --></mce:script> </head> <body> <input id="name" type="text" /> <input type='button' value='getName' onclick='getName();' /> <input type='button' value='getUser' onclick='getUser();' /> <div id="yourname"></div> <div id="yourage"></div> <div id="youraddr"></div> </body> </html>
6 启动tomcat后，输入http://localhost:8080/dwrTest/dwr，可以看到dwr暴露给用户的类：
点击连接，是详细信息：
下面是自动生成的Test.js的内容：
// Provide a default path to dwr.engine if (dwr == null) var dwr = {}; if (dwr.engine == null) dwr.engine = {}; if (DWREngine == null) var DWREngine = dwr.engine; if (Test == null) var Test = {}; Test._path = '/dwrTest/dwr'; Test.getUser = function(p0, callback) { dwr.engine._execute(Test._path, 'Test', 'getUser', p0, callback); } Test.getName = function(p0, callback) { dwr.engine._execute(Test._path, 'Test', 'getName', p0, callback); }
7 访问 getInfo.jsp，结果：
点击 第一个按钮：
点击 第二个按钮：
