论坛首页 → 入门技术论坛 →

DWR的入门实例

浏览 2214 次
锁定老帖子 主题：DWR的入门实例
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
  • yangjinhappy
  • 等级: 初级会员
  • 性别:
  • 文章: 20
  • 积分: 10
  • 来自: 上海
   发表时间：2008-03-13  

DWR是作为远程调用的ajax框架，将服务端的java类，方法和浏览器的javascript的类，方法对应起来。现在官方最新的版本是DWR2.0，可以在http://getahead.ltd.uk/dwr/download下载到。
                                                                                                      
     新建一个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.     }  }  
在WEB-INF目录下新建dwr.xml文件：
代码
  1. <?xml version="1.0" encoding="UTF-8"?>  
  2. <!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN" "http://www.getahead.ltd.uk/dwr/dwr20.dtd">  
  3. <dwr>  
  4.     <allow>  
  5.     <!-- javascript的对象是jshello,create="new"是DWR自己创建类 -->  
  6.         <create javascript="jshello" creator="new" scope="application">  
  7.             <param name="class" value="org.li.dwr.Hello"></param>  
  8.         </create>  
  9.     </allow>  
  10. </dwr>  

在WebRoot目录里新建hello.js
代码
  1. function load()//载入的时候调用   
  2. {   
  3.     var jbutton = document.getElementById("jbutton");   
  4.     jbutton.onclick=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. }  

在WebRoot目录里新建HelloWorld.html
代码
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
  2. <html>  
  3.   <head>  
  4.     <title>HelloWorld.html</title>  
  5.     <meta http-equiv="content-type" content="text/html; charset=UTF-8">  
  6.     <script type='text/javascript' src='dwr/interface/jshello.js'></script>  
  7.     <script type='text/javascript' src='dwr/engine.js'></script>  
  8.     <script type='text/javascript' src='dwr/util.js'></script>  
  9.     <script type="text/javascript" src="hello.js"></script>  
  10.   
  11.   </head>  
  12.      
  13.   <body>  
  14.     <input id="jbutton" type="button" value="得到Hello World"/>  
  15.     <div id="jdiv"></div>  
  16.     <script>load()</script>  
  17.   </body>  
  18. </html>  

在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>  

　　　　在运行一下服务器在浏览器里输入http://localhost:8080/DWRStudy/HelloWorld.html，然后点一下按钮下面就会显示服务端的系统时间了，而浏览器页面并没有被刷新。
下面解释一下：

1. 新建的Hello类中有一个getHelloWorld方法这个方法就是作为远程调用的服务端方法，这个Hello类也就是远程调用的类。方法的返回值为服务端当前的时间

2. dwr.xml是DWR用来配置服务端类和浏览器端javascript类之间的映射。可以下载dtd看一下，在<allow></allow>里类配置映射类如：
<create javascript="jshello" creator="new" scope="application">
<param name="class" value="org.li.dwr.Hello"></param>
</create>

　　　javascript="jshello"是在浏览器端的javascript的映射的类名，（不要用javascript里的关键字）creator="new"是表示这个类是dwr自己创建的，如果creator="new"那么就必须有下面的<param name=”class” value=”类的全路径”></param>，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()</script>所以在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 type='text/javascript' src='dwr/interface/jshello.js'></script>
<script type='text/javascript' src='dwr/engine.js'></script>
<script type='text/javascript' src='dwr/util.js'></script>文件。
返回顶楼
         
  • aidiyuxin
  • 等级: 初级会员
  • 性别:
  • 文章: 48
  • 积分: 30
  • 来自: 北京
   发表时间：2008-05-27  
不错不错
到了新公司，大家都用这个，学习下哈
返回顶楼
          回帖地址
0 请登录后投票
论坛首页 → 入门技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics