DWR自学笔记（1）HelloWorld
DWR自学笔记（1）HelloWorld
由于新公司的项目是基于DWR的，所以准备自学DWR，参考资料方佳玮的《DWR中文文档v0.9》，百度文献等。学习主要基于DWR3.0，很多方法之前的版本不试用。
一、DWR简介
DWR（Direct Web Remoting）是一个用于改善web页面与Java类交互的远程服务器端Ajax开源框架，可以帮助开发人员开发包含AJAX技术的网站。它可以允许在浏览器里的代码使用运行在WEB服务器上的JAVA函数，就像它就在浏览器里一样。
它包含两个主要的部分: 一方面允许JavaScript从WEB服务器上一个遵循了AJAX原则的Servlet中获取数据。 另外一方面一个JavaScript库可以帮助网站开发人员轻松地利用获取的数据来动态改变网页的内容。DWR采取了一个类似AJAX的新方法来动态生成基于JAVA类的JavaScript代码.这样WEB开发人员就可以在JavaScript里使用Java代码就像它们是浏览器的本地代码(客户端代码)一样;但是Java代码运行在WEB服务器端而且可以自由访问WEB 服务器的资源。出于安全的理由,WEB开发者必须适当地配置哪些Java类可以安全的被外部使用。这个从JAVA到JavaScript的远程功能方法给DWR的用户带来非常像传统的RPC机制,就像RMI或者SOAP一样,而且拥有运行在WEB上但是不需要浏览器插件的好处。DWR不认为浏览器/WEB服务器协议是重要的,而更乐于保证编程界面的简单自然.对此最大的挑战就是把AJAX的异步特性和正常JAVA方法调用的同步特性相结合.在异步模式下,结果数据在开始调用之后的一段时间之后才可以被异步访问获取到.DWR允许WEB开发人员传递一个回调函数,来异步处理Java函数调用过程。
二、HelloWorld
创建一个名为HelloDWR的web工程，导入所需要的jar文件，3.0版本的DWR最少需要commons-logging.jar和dwr.jar。
创建一个Hello类，包含一个sayHello方法。
1 package cn.myclass; 2 3 public class Hello { 4 5 public String sayHello(String name) { 6 return "Hello World " + name; 7 } 8 9 }
这个类就是通过DWR调用的java类。
在WEB-INF文件夹下，添加一个dwr.xml文件，信息如下。
1 <?xml version="1.0" encoding="UTF-8"?> 2 <!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 3.0//EN" 3 "http://www.getahead.ltd.uk/dwr/dwr30.dtd"> 4 <dwr> 5 <allow> 6 <!-- 指定生成的js脚本名为Hello --> 7 <create creator="new" javascript="Hello"> 8 <!-- js脚本所对应的java类 --> 9 <param name="class" value="cn.myclass.Hello" /> 10 </create> 11 </allow> 12 </dwr>
在web.xml文件中添加一个Servlet配置信息
1 <servlet> 2 <servlet-name>dwr-invoker</servlet-name> 3 <servlet-class> org.directwebremoting.servlet.DwrServlet </servlet-class> 4 <init-param> 5 <param-name>debug</param-name> 6 <param-value>true</param-value> 7 </init-param> 8 </servlet> 9 10 <servlet-mapping> 11 <servlet-name>dwr-invoker</servlet-name> 12 <url-pattern>/dwr/*</url-pattern> 13 </servlet-mapping>
现在已经配置好了DWR的所有配置信息，可以在前台调用，DWR本身提供了一个debug环境可以测试我们配置的是否正确。
部署并启动这个web应用，输入网址http://localhost:8080/HelloDWR/dwr/，显示如下信息:
我们可以看到已经配置好的Hello类，点击连接，进入下图页面。这里显示了DWR为我们生成的js文件，及所包含的方法的测试用例，找到sayHello方法，输入信息，点击执行，返回结果则说明配置正确。
配置完成之后，就可以在前台jsp或者html中调用了。
创建一个index.html文件，插入一个文本框和一个按钮，引入所需要的js文件，具体路径可以从刚才的测试页面找到。编写调用需要的js方法。
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 2 <html> 3 <head> 4 <title>DWR</title> 5 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 6 <script type='text/javascript' src='/HelloDWR/dwr/interface/Hello.js'></script> 7 <script type='text/javascript' src='/HelloDWR/dwr/engine.js'></script> 8 <script type='text/javascript' src='/HelloDWR/dwr/util.js'></script> 9 <script type="text/javascript"> 10 function HelloWorld() { 11 //获取元素 12 var name = dwr.util.getValue("name"); 13 //第一个参数为sayHello方法的参数，第二个参数为服务器返回值后的回调函数 14 Hello.sayHello(name, HelloWorldCallback); 15 } 16 //回调函数 17 function HelloWorldCallback(str) 18 { 19 alert(str); 20 } 21 </script> 22 </head> 23 <body> 24 <input type="text" name="name"/> 25 <input type="button" value="HelloWorld" onclick="HelloWorld()"/> 26 </body> 27 </html>
部署启动应用之后，访问index.html页面，得到如下结果
至此，一个简单的DWR helloworld应用就已经完成。
总结：
以前接触过的js框架只有jQuery，感觉jQuery和DWR的侧重点还是很不同的。jQuery更偏重与对js基本语法的封装，用简单的语句可以得到之前用复杂的js代码才能实现的效果，而对Ajax只是简单的封装了一下。DWR更偏重与对Ajax的面向对象的实现，通过简单的配置，可以生成类似与java类一样的js代码，直接在前台调用，当然，DWR对js基本语法也进行了，以后会慢慢研究。
