第1章. DWR入门
1.1 简介
DWR是一个可以允许你去创建AJAX WEB站点的JAVA开源库。它可以让你在浏览器中的Javascript代码调用Web服务器上的Java代码,就像在Java代码就在浏览器中一样。
DWR包含2个主要部分:
1. 一个运行在服务器端的Java Servlet,它处理请求并且向浏览器发回响应。
2. 运行在浏览器端的JavaScript,它发送请求而且还能动态更新网页。
DWR工作原理是通过动态把Java类生成为Javascript。它的代码就像Ajax魔法一样,你感觉调用就像发生在浏览器端,但是实际上代码调用发生在服务器端,DWR负责数据的传递和转换。这种从Java到JavaScript的远程调用功能的方式使DWR用起来有种非常像RMI或者SOAP的常规RPC机制,而且DWR的优点在于不需要任何的网页浏览器插件就能运行在网页上。
Java从根本上讲是同步机制,然而AJAX却是异步的。所以你调用远程方法时,当数据已经从网络上返回的时候,你要提供有反调 (callback) 功能的DWR。
这个图片显示了DWR如何选择一个下拉列表的内容作为JavaScript 的onclick事件的结果。 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示例带领大家入门。
1.2 第一个DWR程序:Hello World
有2中方法可以帮助你入门DWR,一个方法是去下载WAR文件并且去完整看一下代码,但是这样并不能帮助你发现DWR是如何简单地集成到你当前地WEB应用,所以以下几个简单地步骤推荐看一下:
1.2.1 将DWR放入你的工程
1) 从官方网站下载dwr.jar包。然后将它放在你webapp的WEB-INF/lib目录下。
2) 将下载的dwr-版本号-src.zip /java/org/directwebremoting内的engine.js和util.js放入WEB应用中,比如js文件夹下。
1.2.2 编辑配置文件
1. web.xml
以下几行代码必须被添加到WEN-INF/web.xml文件中。注意,要把<servlet>和其他<servlet>放在一起,<servlet-mapping>要和其他<servlet-mapping>放在一起
- <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>
<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>
2. dwr.xml
在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="service">
- <param name="class" value="helloWorld.Service" />
- </create>
- </allow>
- </dwr>
<?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="service"> <param name="class" value="helloWorld.Service" /> </create> </allow> </dwr>
1.2.3 编写service
就像没有dwr一样,写一个简单类并加一个方法 是
- package helloWorld;
- public class Service {
- public String sayHello(String yourName) {
- //可以是访问数据库的复杂代码
- return "Hello World " + yourName;
- }
- }
package helloWorld; public class Service { public String sayHello(String yourName) { //可以是访问数据库的复杂代码 return "Hello World " + yourName; } }
1.2.4 测试DWR
将代码放入应用服务器(比如Tomcat),启动。
然后在地址栏输入http://localhost:8080/你的工程/dwr
然后点击service,会看到刚才写的sayHello()的方法,输入自己的名字然后点击“Execute”,如果发现确实是正确的返回结果,说明测试通过了,可以进入下一步了。
1.2.5 编写一个jsp
接下来最后一步就是创建一个jsp文件 1) 要引用几个dwr的js,其中engine.js必须要,如果需要用到dwr提供的一些方便的工具要引用util.js 2) 然后还要引用dwr自动生成的js,dwr/interface/service.js,注意js名字要和dwr.xml配置的一样 3) js里的service.sayHello和java类的那个有一点区别,多了个参数,用来callback返回的数据
- <%@ page language="java" pageEncoding="UTF-8"%>
- <html>
- <head>
- <title>My JSP 'first_dwr.jsp' starting page</title>
- <script type='text/javascript' src='js/util.js'></script>
- <script type='text/javascript' src='js/engine.js'></script>
- <script type='text/javascript' src='dwr/interface/service.js'> </script>
- <script type="text/javascript">
- function firstDwr(){
- service.sayHello("Jorwen",callBackHello);
- }
- function callBackHello(data){
- alert(data);
- }
- </script>
- </head>
- <body>
- <input type="button" name="button" value="测试" οnclick="firstDwr()">
- </body>
- </html>
<%@ page language="java" pageEncoding="UTF-8"%> <html> <head> <title>My JSP 'first_dwr.jsp' starting page</title> <script type='text/javascript' src='js/util.js'></script> <script type='text/javascript' src='js/engine.js'></script> <script type='text/javascript' src='dwr/interface/service.js'> </script> <script type="text/javascript"> function firstDwr(){ service.sayHello("Jorwen",callBackHello); } function callBackHello(data){ alert(data); } </script> </head> <body> <input type="button" name="button" value="测试" οnclick="firstDwr()"> </body> </html>
地址栏输入http://localhost:8080/你的工程/first_dwr.jsp 显示的结果如下:
1.3 本章总结
相信看了此章节,大家一般都能做出这个实例来,也算是DWR刚入门了,在以后的教程里将详细介绍DWR各个功能。帮助大家能开发出任何Ajax需求的功能来。更多进阶的例子可以参考范例精讲,您也可以通过看范例学习DWR然后有疑问再查看该文档的相关章节。