DWR学习文档

2008 - 11 - 06

DWR学习文档

编辑

(孙鑫)_学习文档(转)

关键字: DWR

DWR是作为远程调用的ajax框架，将服务端的java类，方法和浏览器的javascript的类，方法对应起来。现在官方最新的版本是DWR2.0，可以在http://getahead.ltd.uk/dwr/download下载到。
我们真对DWR2.0做一些例子讲解一下它的特性：
Hello World：
新建一个web项目DWRStudy，在项目中构建路径中加入dwr.jar，
新建类Hello如下：

代码

1. package  org.li.dwr;  
2.   
3. package  org.li.dwr;  
4.   
5. import  java.util.Date;  
6.   
7. public   class  Hello  
8. {  
9.     public  String getHelloWorld()  
10.     {  
11.         return   "现在的时间为：" + new  Date();  
12.     }  
13. }  

<script type="text/javascript"></script>
在WEB-INF目录下新建dwr.xml文件：

代码

1. xml   version = "1.0"   encoding = "UTF-8" ?>   
2. < dwr >   
3.     < allow >   
4.        
5.         < create   javascript = "jshello"   creator = "new"   scope = "application" >   
6.             < param   name = "class"   value = "org.li.dwr.Hello" > </ param >   
7.         </ create >   
8.     </ allow >   
9. </ dwr >   

<script type="text/javascript"></script>
在WebRoot目录里新建hello.js

代码

1. function load() //载入的时候调用   
2. {  
3.     var jbutton = document.getElementById("jbutton" );  
4.     jbutton.οnclick=function(event)//注册按钮点击事件   
5.     {  
6.         jbClick();  
7.     };  
8. }  
9. function jbClick()//按钮点击事件   
10. {  
11.     jshello.getHelloWorld(callback);//没有参数传递，只传递回调函数就行   
12. }  
13. function callback(msg)//回调函数   
14. {  
15.     DWRUtil.setValue('jdiv',msg);  
16. }  

<script type="text/javascript"></script>
在WebRoot目录里新建HelloWorld.html

代码

 

1. < html >   
2.   < head >   
3.     < title > HelloWorld.html title >   
4.     < meta   http-equiv = "content-type"   content = "text/html; charset=UTF-8" >   
5.     < script   type = 'text/javascript'   src = 'dwr/interface/jshello.js' > script >   
6.     < script   type = 'text/javascript'   src = 'dwr/engine.js' > script >   
7.     < script   type = 'text/javascript'   src = 'dwr/util.js' > script >   
8.     < script   type = "text/javascript"   src = "hello.js" > script >   
9.   
10.   </head >   
11.     
12.   < body >   
13.     < input   id = "jbutton"   type = "button"   value = "得到Hello World" />   
14.     < div   id = "jdiv" > </ div >   
15.     < script > load() </ script >   
16.  </  body >   
17. </ html >   

<script type="text/javascript"></script>
在web.xml中加入一个dwr的servlet：

代码

1. < servlet >   
2.         < servlet-name > dwr-invoker</ servlet-name >   
3.         < servlet-class >   
4.             org.directwebremoting.servlet.DwrServlet  
5.         </ servlet-class >   
6.         < init-param >   
7.             < param-name > debug </ param-name >   
8.             < param-value > true</ param-value >   
9.         </ init-param >   
10.         < load-on-startup > 1</ load-on-startup >   
11.     </ servlet >   
12.   
13.     < servlet-mapping >   
14.         < servlet-name > dwr-invoker</ servlet-name >   
15.         < url-pattern > /dwr/*</ url-pattern >   
16.    </servlet-mapping >   

<script type="text/javascript"></script>
在运行一下服务器在浏览器里输入http://localhost:8080/DWRStudy/HelloWorld.html，然后点一下按钮下面就会显示服务端的系统时间了，而浏览器页面并没有被刷新。
下面解释一下：
1. 新建的Hello类中有一个getHelloWorld方法这个方法就是作为远程调用的服务端方法，这个Hello类也就是远程调用的类。方法的返回值为服务端当前的时间
2. dwr.xml是DWR用来配置服务端类和浏览器端javascript类之间的映射。可以下载dtd看一下，在< /allow>里类配置映射类如：


javascript="jshello" 是在浏览器端的javascript的映射的类名，（不要用javascript里的关键字） creator="new"是表示这个类是dwr自己创建的，如果creator="new"那么就必须有下面的 ，creator还可为spring(与spring集成的时候),script(与 apache的一个框架BSF集成的时候用),后来又加入了struts,jsf,ejb3.现在是个HelloWorld让大家体验一下，具体后面会细 讲。最后的scope=”application”是说这个pojo类的范围，和jsp是一样的。
3. 创建hello.js和HelloWorld.html都是看自己是怎么发挥了，注意的是在HelloWorld.html中导入js文件的时候注意顺序 和路径命名规律，自己发挥的这个hello.js一定放在后面，因为要调用其它js文件中的函数。由于在HelloWorld.html里写入了< script>load()所以在html加载的时候会调用hello.js里的load方法(注意这几个js文件 里的函数最好不要重名)在load里面做的事情就是注册一下id为jbutton的按钮的点击事件。当我们点击id为jbutton的按钮的时候就开始用 与服务器端的类相对应的javascript类了（jshello），直接调用jshello类的getHelloWorld方法，可以向函数传递参数， 不过要在最后加一个回调函数。而我们的服务端的类没有参数就直接传回调函数了。在回调函数的形参msg是服务端Hello类中getHelloWorld 方法返回值。在回调函数里面调用了DWR的工具类DWRUtil类的setValue方法设置id为jdiv的值。另外我们把 doucment.getElementById(“jbutton”);换与$(“jbutton”)也可以得到同样的效果，这就有点像 prototype了。
4. 在web.xml里加入DWRServlet的配置一是为了远程调用，二是自动生成了 <script src="/admin/blogs/263294/dwr/interface/jshello.js" type="text/javascript"></script>
<script src="/admin/blogs/263294/dwr/engine.js" type="text/javascript"></script>
<script src="/admin/blogs/263294/dwr/util.js" type="text/javascript"></script> 文件。
上个HelloWorld例子只是返回了一个字符串，当然我们显示字符串很容易，可是如果返回一个对象怎么办呢？，DWR为我们将java类和javascript的DOM对象，不过这得需要我们在dwr.xml里配置。
再看一个综合的例子：
新建类User

代码

1. package  org.li.dwr;  
2.   
3. import  java.io.FileInputStream;  
4. import  java.io.FileNotFoundException;  
5. import  java.io.IOException;  
6. import  java.util.ArrayList;  
7. import  java.util.List;  
8. import  java.util.Properties;  
9.   
10. public   class  User  
11. {  
12.     private  String welcome;  
13.     private  String username;  
14.     private  String address;  
15.     private  List books;  
16.     private   int  age;  
17.     public  String getAddress()  
18.     {  
19.         return  address;  
20.     }  
21.     public   void  setAddress(String address)  
22.     {  
23.         this .address = address;  
24.     }  
25.     public   int  getAge()  
26.     {  
27.         return  age;  
28.     }  
29.     public   void  setAge( int  age)  
30.     {  
31.         this .age = age;  
32.     }  
33.     public  String getUsername()  
34.     {  
35.         return  username;  
36.     }  
37.     public   void  setUsername(String username)  
38.     {  
39.         this .username = username;  
40.     }  
41.     public  String getWelcome()  
42.     {  
43.         return  welcome;  
44.     }  
45.     public   void  setWelcome(String welcome)  
46.     {  
47.         this .welcome = welcome;  
48.     }  
49.     public  List getBooks()  
50.     {  
51.         return  books;  
52.     }  
53.     public   void  setBooks(List books)  
54.     {  
55.         this .books = books;  
56.     }  
57.     public  List getBook()  
58.     {  
59.         this .books =  new  ArrayList();  
60.         Book javaBook = new  Book();  
61.         Book vcBook = new  Book();  
62.         javaBook.setAuthor("孙鑫" );  
63.         vcBook.setAuthor("孙鑫" );  
64.         javaBook.setName("java Web开发详解" );  
65.         vcBook.setName("vc++深入详解" );  
66.         this .books.add(javaBook);  
67.         this .books.add(vcBook);  
68.         return   this .books;  
69.     }  
70.     public  User getUser(String welcome)  
71.     {  
72.         this .welcome=welcome;  
73.         try   
74.         {  
75.             FileInputStream fis = new  FileInputStream( "D:\\workspace\\DWRStudy\\src\\user.properties" );  
76.             Properties pp = new  Properties();  
77.             pp.load(fis);  
78.             this .username=pp.getProperty( "username" );  
79.             this .age=Integer.valueOf(pp.getProperty( "age" ));  
80.             this .address=pp.getProperty( "address" );  
81.             fis.close();  
82.         }  
83.         catch  (FileNotFoundException e)  
84.         {  
85.             // TODO Auto-generated catch block   
86.             e.printStackTrace();  
87.         }  
88.         catch  (IOException e)  
89.         {  
90.             // TODO Auto-generated catch block   
91.             e.printStackTrace();  
92.         }  
93.         return   this ;  
94.     }  
95. }  

<script type="text/javascript"></script>
新建Book类：

代码

1. package  org.li.dwr;  
2.   
3. public   class  Book  
4. {  
5.     private  String name;  
6.     private  String author;  
7.     public  String getAuthor()  
8.     {  
9.         return  author;  
10.     }  
11.     public   void  setAuthor(String author)  
12.     {  
13.         this .author = author;  
14.     }  
15.     public  String getName()  
16.     {  
17.         return  name;  
18.     }  
19.     public   void  setName(String name)  
20.     {  
21.         this .name = name;  
22.     }  
23. }  

<script type="text/javascript"></script>
新建DWRLog类

代码

1. package  org.li.dwr.log;  
2.   
3. import  java.lang.reflect.Method;  
4.   
5. import  org.directwebremoting.AjaxFilterChain;  
6.   
7. public   class  DWRLog  implements  org.directwebremoting.AjaxFilter  
8. {  
9.   
10.     public  Object doFilter(Object obj, Method method, Object[] params, AjaxFilterChain chain)  throws  Exception  
11.     {  
12.         System.out.println("过滤器Log输出:..对象：" +obj.getClass().getName()+ "方法：" +method.getName());  
13.         return  chain.doFilter(obj, method,params);  
14.     }  
15.       
16. }  

<script type="text/javascript"></script>
新建D:\\workspace\\DWRStudy\\src\\user.properties
username=javafish
age=21
address=北京市海淀区
然后在dwr.xml里加入

代码

1. < create   javascript = "jsuser"   creator = "new" >   
2.             < param   name = "class"   value = "org.li.dwr.User" ></ param >   
3.                
4.             < include   method = "getUser" />   
5.             < include   method = "getBook" />   
6.                
7.             < filter   class = "org.li.dwr.log.DWRLog" ></ filter >   
8.   </create >   
9.            
10.         < convert   match = "org.li.dwr.User"   converter = "bean" > convert >   
11.         < convert   match = "org.li.dwr.Book"   converter = "bean" > convert >   

<script type="text/javascript"></script>
新建UserInfo.html

代码

 

1. < html >   
2.   < head >   
3.     < title > UserInfo.html</ title >   
4.     < meta   http-equiv = "content-type"   content = "text/html; charset=UTF-8" >   
5.     < script   type = 'text/javascript'   src = 'dwr/interface/jsuser.js' > </ script >   
6.     < script   type = 'text/javascript'   src = 'dwr/engine.js' > </ script >   
7.     < script   type = 'text/javascript'   src = 'dwr/util.js' > </ script >  
8.     < script   type = "text/javascript"   src = "userInfo.js" > </ script >  
9.   
10.   </ head >   
11.     
12.   < body >   
13.     请输入你的名字：  
14.     < input   id = "name"   type = "text" />   
15.     < input   id = "jbutton"   type = "button"   value = "得到javafish的信息" />   
16.     < input   id = "sbutton"   type = "button"   value = "得到javafish的书" />   
17.     < div   id = "result" ></ div >   
18.     < script > load() </ script >   
19.   </body >   
20. </html >   

<script type="text/javascript"></script>
新建userInfo.js

代码

1. function load()  
2. {  
3.     var jbutton = $("jbutton" );  
4.     jbutton.οnclick=function(event)  
5.     {  
6.         bOnClick();  
7.     };  
8.     var sbutton = $("sbutton" );  
9.     sbutton.οnclick=function(event)  
10.     {  
11.         sOnClick();  
12.     };  
13. }  
14. function bOnClick()  
15. {  
16.     jsuser.getUser($("name" ).value,callback);  
17. }  
18. function callback(msg)  
19. {  
20.     var user = msg;  
21.     DWRUtil.setValue('result',"欢迎你！" +user.welcome+ "   姓名：" +user.username+ ",年龄：" +user.age+ "，住址：" +user.address+user.books[ 0 ].author);  
22. }  
23.   
24. function sOnClick()  
25. {  
26.     jsuser.getBook(callbackBooks);  
27. }  
28. function callbackBooks(msg)  
29. {  
30.     alert(msg);  
31.     DWRUtil.setValue('result',msg);  
32. }  

<script type="text/javascript"></script>
运行服务器输入http://localhost:8080/DWRStudy/UserInfo.html，可看到运行结果
这个例子需要解释的就是dwr.xml了
在这里用到了两个java类，User、Book，方法呢就是User.getUser和User.getBook，而Book类呢由于我们没有在javascript中调用，所以就不用配置Book的create了。
大家可能会奇怪为什么会多出来两个

呢， 是因为在调用getBook和getUser的时候会返回给javascript有关User和Book的对象或数据，这里的用< convert match=”类” converter=”bean”/>做一下转换，否则javascript将不会得到有效的数据。
下面讨论一下DWR的安全性，由于我们将javaBean整体都对外暴露了，所以说会有非常多的安全问题，真对这些DWR也作了一些的措施就是上面例子中dwr.xml的配置：



这 样配置的话就只暴露了User类的两个方法getUser,getBook。就相对安全多了，相反还有的配置它 们是类似的。对于安全我们也可以用DWR的过滤器来实现，这里我用过滤器实现的是一个日志记录。过滤器类只需要实现AjaxFilter接口就可以了，不 过注意的是这个过滤器不是HttpServelt的过滤器而是DWR自己内部实现的（有兴趣可以查看一下源代码）。
真对DWR的安全性上来说，官方也不敢保证，官方只是说自己可以看一下源代码因地施宜。
不过DWR可以和acegi集成，让acegi来管理安全问题。由于acegi我还没有完全搞定关于DWR和acegi的集成，先放一放日后补充。
下面对DWR.xml的配置具体补充一下：
首先是里面有和是配置在初始化的时候需要创建和转化的类。
然 后是里面有和这个地 方就是正式的配置了，creator里有param,filter,include,exclude,auth，除了auth我们都接触过了，而auth 是集成J2EE的安全认证用的，这个可能和acegi的集成有关吧（？）。呢，它的converter有很多
? Array Converter
? Bean and Object Converters
? Collection Converter
? Enum Converter
? DOM Objects
这些都是转换的时候配置的
还有就是的配置了，申明一些不java用反射不可得到的参数类型。
我在上面例子上用的getBook来本来想用signatures实现List的转换可是没有成功（不用配置就可以）
主要是真对jdk1.4以下的，我本机用的是jdk6,所以屡试不爽最后在官方DWR2的特性中看到如果你用的是DWR2和JDK5以上的话就不用配置了DWR会自动转换。
下面讲一下DWR与Spring的集成：
还是上面那个例子用Spring搞定大部分和上面一样
新建类User（包换了）

1. package  org.li.dwr.spring;  
2.   
3. import  java.util.List;  
4.   
5. import  org.li.dwr.Book;  
6.   
7. public   class  User  
8. {  
9.     private  String welcome;  
10.     private  String username;  
11.     private  S