适合dwr初学者的一个web案例

DWR（Direct Web Remoting）是一个用于改善web页面与Java类交互的远程服务器端Ajax开源框架，
可以帮助开发人员开发包含AJAX技术的网站。它可以允许在浏览器里的代码使用运行在WEB服务器上的JAVA函数，就像它就在浏览器里一样。

 

我们这里做一个客户端拿到一个List<User>这样的显示案例,当前基本数据类型

 

相对简单了，这个学会就没问题了！

 

先来看一下项目的整体结构：

 

 

开始了！

 

第一步:新建一个java项目DwrDemo

 

 

第二步：

 

写好我们的实体类UserInfo

1. /** 
2.  * 用户实体类 
3.  * @author jelly 
4.  * 
5.  */ 
6. public class UserInfo { 
7.     private Integer id;         //用户id 
8.     private String name;        //用户姓名 
9.     private int age;            //用户年龄 
10.      
11.     public UserInfo() { 
12.     } 
13.     public UserInfo(Integer id, String name, int age) { 
14.         this.id = id; 
15.         this.name = name; 
16.         this.age = age; 
17.     } 
18.     public Integer getId() { 
19.         return id; 
20.     } 
21.     public void setId(Integer id) { 
22.         this.id = id; 
23.     } 
24.     public String getName() { 
25.         return name; 
26.     } 
27.     public void setName(String name) { 
28.         this.name = name; 
29.     } 
30.     public int getAge() { 
31.         return age; 
32.     } 
33.     public void setAge(int age) { 
34.         this.age = age; 
35.     } 
36.  

1. } 

 

第三步：

 

这里没有用到操作数据库，所以模拟一个Dao的实现

1. /** 
2.  * 模拟DAO 
3.  * @author jelly 
4.  * 
5.  */ 
6. public class UserDao { 
7.     /** 
8.      * 得到所有用户信息 
9.      * 这里因为没有连接数据库,所以对分页暂不处理 
10.      * @return 用户列表 
11.      */ 
12.     public List<UserInfo> queryUser(){ 
13.         List<UserInfo> list = new ArrayList<UserInfo>(); 
14.         for (int i = 1; i < 6; i++) { 
15.             UserInfo u = new UserInfo(); 
16.             u.setId(i); 
17.             u.setName("用户:"+i); 
18.             u.setAge((int)Math.random()*i); 
19.             list.add(u); 
20.         } 
21.         return list; 
22.     } 
23.  

1. } 

 

然后将spring的必须jar包导入，并啊applicationContext.xml文件放在项目src目录下。

 

接下来我们开始配置web.xml

1. <?xml version="1.0" encoding="UTF-8"?> 
2. <web-app xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" version="2.5" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee   http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"> 
3.  
4.     <!-- 配置DWR --> 
5.     <servlet> 
6.         <servlet-name>dwr</servlet-name> 
7.         <servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class> 
8.         <init-param> 
9.             <param-name>debug</param-name> 
10.             <param-value>true</param-value> 
11.         </init-param> 
12.     </servlet> 
13.     <servlet-mapping> 
14.         <servlet-name>dwr</servlet-name> 
15.         <url-pattern>/dwr/*</url-pattern> 
16.     </servlet-mapping> 
17.     <!-- spring配置 --> 
18.     <listener> 
19.         <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class> 
20.     </listener> 
21.     <context-param> 
22.         <param-name>contextConfigLocation</param-name> 
23.         <param-value>classpath:applicationContext.xml</param-value> 
24.     </context-param> 
25.     
26.       <welcome-file-list> 
27.     <welcome-file>/index.jsp</welcome-file> 
28.   </welcome-file-list> 
29.    
30.  

1. </web-app> 

 

dwr的核心也是一个servlet；给他一个初始化参数debug为true，我们可以进行调试。

 

这里的配置就不多做解释了，完事吧dwr.xml文件copy到WebRoot/WEB-INF这里。

 

来看一下具体的参数配置

1. <?xml version="1.0" encoding="UTF-8"?> 
2. <!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN" "http://getahead.org/dwr/dwr20.dtd"> 
3. <dwr> 
4.     <allow> 
5.         <!-- 定义对外访问的类 
6.                要判断后台是否已经写好，可以到测试也看一看 
7.                输入http://localhost:8080/DwrDemo/dwr 
8.                类的实例调用该类的方法 include表示只允许调用某些方法， 
9.                exclude表示除了某方法之外其他 
10.              --> 
11.         <create javascript="UserManage" creator="spring"> 
12.             <!-- 这里我们用spring,所以param里面写的是beanName --> 
13.             <param name="beanName" value="userDao" /> 
14.             <!-- 这是当前类对外暴露的方法 --> 
15.             <include method="queryUser"></include> 
16.         </create> 
17.          
18.         <!-- 转换器:dwr框架根据转换器的配置自动转换成json对象 
19.             bean 以javabean的方式转换  
20.             所有参数如下： 
21.             自定义 Converters（转换） 
22.             Bean/Object Converter 
23.             Array/Collection Converter 
24.             Dom Objects 
25.             Enum Converter 
26.         --> 
27.         <convert converter="bean" match="com.jelly8090.entity.UserInfo"> 
28.             <!-- 这里可以加参数，如果没有加就会把该类的所有属性转为json对象，如果 
29.                 加了参数表示只会转换value包含的属性值到json对象，要转换的各属性用逗号隔开 
30.                 <param name="include" value="id,name"/> 
31.             --> 
32.         </convert> 
33.         <convert converter="exception" match="java.lang.RuntimeException" /> 
34.          
35.         <!--  
36.                 非spring的创建方式 
37.         <create javascript="UserManage" creator="new"> 
38.             参数name写class，值是完全限定类名 
39.             <param name="class" value="com.jelly8090.dao.UserDao"></param> 
40.             <include method="queryUser"></include> 
41.         </create>    
42.          --> 
43.     </allow> 
44.  

1. </dwr> 

 

参数大意已经解释了，这一步没错的话我们就可以把项目部署到服务器上进行一个测试。

 

访问http://localhost:8080/DwrDemo/dwr/ 或http://127.0.0.1:8080/DwrDemo/dwr/

 

 

看到了这个UserManage是我们在dwr.xml中配置的javascript属性。

 

点进去看看，

 

 

 

这里看到一个queryUser方法，这是我们在dwr.xml中暴露出来的

 

因为这个是没有参数的所以不用输入，如果有参数的话输入参数，

 

然后点Execute按钮进行测试，

 

 

没错，返回的是json对象类型，大家应该能看懂。

 

上面显示的<script>代码一会我们要复制在jsp页面里。

 

然后调用远程对象

 

对于公开的每个类，DWR 动态地生成包含在 Web 页面中的 JavaScript。生成的 JavaScript 包含存根函数，代表 Java 类对应的方法。Java 方法与对应的 JavaScript 函数之间的映射规则为 JavaScriptName.methodName(methodParams ..., callBack)，其中 JavaScriptName 是 creator 属性指定浏览器中被创造出来的对象名字，methodName 是 Java 的方法名，methodParams 代表 Java 方法的参数，最后的 callBack 是 Java 方法返回后要回调的 JavaScript 函数。清单 8 是在 jsp 页面中使用 DWR 创建的 javascript 对象调用公开的方法。

1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> 
2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
3. <html> 
4.   <head> 
5.     <title>Dwr Demo</title> 
6.     <!-- 这2个文件是必须的 --> 
7.     <script type='text/javascript' src='/DwrDemo/dwr/engine.js'></script> 
8.     <script type='text/javascript' src='/DwrDemo/dwr/interface/UserManage.js'></script> 
9.     <!-- 该js是dwr的工具库,可以不导入 --> 
10.     <script type='text/javascript' src='/DwrDemo/dwr/util.js'></script> 
11.     <script type="text/javascript"> 
12.         //远程调用服务器的方法，并指定回调函数处理 
13.         //这里写的是匿名函数 
14.         <%-- 
15.             UserManage.queryUser(function(result){ 
16.                     alert(result); 
17.                 }); 
18.             也可以写成非匿名函数调用 
19.             UserManage.queryUser(quser); 
20.             他会有一个返回值就是我们返回拿到的list 
21.             直接输出的话都是object,我们可以通过对象的属性查看具体值 
22.         --%> 
23.             UserManage.queryUser(quser); 
24.             //这里的result是我们返回的list集合 
25.             function quser(result){ 
26.                 //来遍历一下他,x是每个user对象的索引,后面你懂的啦~ 
27.                 for(var x in result){ 
28.                     alert("id:"+result[x].id+",姓名:"+result[x].name+",年龄:"+result[x].age); 
29.             　}  
30.             } 
31.     </script> 
32.   </head> 
33.   <body> 
    
34.   </body> 
35.  

1. </html> 

DWR 会自动根据 UserManager 类帮我们生成了 userManager.js 文件。engine.js 是用来转换动态生成接口的 javascript 函数调用，util.js 包含了一些工具函数，让页面对 javascript 的调用更加方便。今天就讲这么多，欢迎大家访问我的博客。

转载于:https://blog.51cto.com/jelly8090/1034325