DWR入门教程
DWR(Direct Web Remoting)是一个WEB远程调用框架.利用这个框架可以让AJAX开发变得很简单.利用DWR可以在客户端利用JavaScript直接调用服务端的Java方法并返回值给JavaScript就好像直接本地客户端调用一样(DWR根据Java类来动态生成JavaScrip代码).它通过反射,将java翻译成javascript,然后利用回调机制,轻松实现了javascript调用Java代码。
DWR主要特点:
1,异步调用。除了支持从JavaScript到Java方法(浏览器到服务器)的异步调用之外,从DWR2.0开始,DWR开始支持从服务器到JavaScript的反转异步调用功能(ReversedAJAX)。
2,与其他框架的依存度低,可简单与Spring,Struts,WebWork,JSF,Hibernate,Beehive,EJB3,Seasar2等框架集成。
3,可测试性好
4,多浏览器支持
5,支持免dwr.xml配置annotation功能。
6,成熟健壮,有丰富的帮助文档资料。
DWR应用例子:
其大概开发过程如下:
1
.编写业务代码,该代码是和dwr无关的。
2
.确认业务代码中哪些类、哪些方法是要由javascript直接访问的。
3
.编写dwr组件,对步骤
2
的方法进行封装。
4
.配置dwr组件到dwr.xml文件中,如果有必要,配置convert,进行java和javascript类型互转。
5
.通过反射机制,dwr将步骤
4
的类转换成javascript代码,提供给前台页面调用。
5
.编写网页,调用步骤
5
的javascript中的相关方法(间接调用服务器端的相关类的方法),执行业务逻辑,将执行结果利用回调函数返回。
6
.在回调函数中,得到执行结果后,可以继续编写业务逻辑的相关javascript代码。
下面以用户注册的例子,来说明其使用。(注意,本次例子只是用于演示,说明DWR的使用,类设计并不是最优的)。
1
.先介绍下相关的Java类
UserDAO:实现User的数据库访问,这里作为一个演示,编写测试代码
DWRUserAccess:DWR组件,提供给javascript访问的。
下面说明下程序执行的流程
1
.用户在页面上输入相关注册信息,id、name、password、email,点击“提交”按钮
2
.javascript代码开始执行,根据用户填写相关信息,通过dwr提供的DWRUserAccess.js里save的方法,调用服务器端的DWRUserAccess类save方法,将注册信息保存。
3
.通过DWRUserAccess.jsp里的find方法,调用服务器端DWRUserAccess类里的find方法,执行用户信息查找。
注意,在以上的执行过程中,DWRUserAccess是供DWR调用的,是DWR组件,因此需要将DWRUserAccess类配置到dwr中。
接下来讲解本次dwr测试环境的配置。
1
.新建一个webapp,命名为testApp
2
.将dwr.jar拷贝到testApp的WEB-INF的lib目录下
3
.编译上面的User,UserDAO,DWRUserAccess类,放到classes目录下
4
.在web.xml中配置servlet,适配路径到dwr目录下,如下所示
<servlet>
<servlet-name>dwr-invoker</servlet-name>
<display-name>DWR Servlet</display-name>
<description>Direct Web Remoter Servlet</description>
<servlet-class>uk.ltd.getahead.dwr.DWRServlet</servlet-class>
<init-param>
<param-name>debug</param-name>
<param-value>true</param-value>
</init-param>
<init-param>
<param-name>scriptCompressed</param-name>
<param-value>false</param-value>
</init-param>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>dwr-invoker</servlet-name>
<url-pattern>/dwr/*</url-pattern>
</servlet-mapping>
以上的配置可以拦截testApp下所有指向dwr的请求,关于这个拦截器,我们会在后面介绍。
5
.WEB-INF下新建一个dwr.xml文件(和web.xml在同一个文件夹),内容如下:
这里我们把DWRUserAccess配置到了dwr中,create元素中,creater=
"new"
表示每调用一次DWRUserAccess时,需要
new
一个这样的类;javascript=
"DWRUserAccess"
,表示提供给前台页面调用的javascirpt文件是DWRUserAccess.js。
convert元素用于数据类型转换,即java类和javascript之间相互转换,因为和前台交换的是User对象,因此需要对此使用bean转换,我们将在后面介绍这个类。
4
.编写测试的HTML页面 test.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>DWR测试</TITLE>
<meta http-equiv=Content-Type content="text/html; charset=gb2312">
<script src="/oblog312/dwr/engine.js"></script>
<script src="/oblog312/dwr/util.js"></script>
<script src="/oblog312/dwr/interface/DWRUserAccess.js"></script>
</HEAD>
<BODY>
<B>用户注册</B><br>
------------------------------------------------
<Br>
<form name="regForm">
登陆ID:<input type="text" name="id"><br>
口 令:<input type="password" name="password"><br>
姓 名:<input type="text" name="name"><br>
电子邮件:<input type="text" name="email"><br>
<input type="button" name="submitBtn" value="提交" onclick="OnSave()"><br>
</form>
<br>
<br><B>用户查询</B><br>
------------------------------------------------
<Br>
<form name="queryForm">
登陆ID:<input type="text" name="id"><br>
<input type="button" name="submitBtn" value="提交" onclick="OnFind()"><br>
</form>
<br>
</BODY>
</HTML>
<SCRIPT LANGUAGE="JavaScript">
<!--
function saveFun(data) {
if (data) {
alert("注册成功!");
} else {
alert("登陆ID已经存在!");
}
}
function OnSave() {
var userMap = {};
userMap.id = regForm.id.value;
userMap.password = regForm.password.value;
userMap.name = regForm.name.value;
userMap.email = regForm.email.value;
DWRUserAccess.save(userMap, saveFun);
}
function findFun(data) {
if (data == null) {
alert("无法找到用户:"+queryForm.id.value);
return;
}
alert("找到用户,nid:"+data.id+",npassword:"+data.password+",nname:"+data.name+",nemail:"+data.email);
}
function OnFind() {
DWRUserAccess.find(queryForm.id.value, findFun);
}
//-->
</SCRIPT>
以下对页面的javascript进行解释
<script src=
"/oblog312/dwr/engine.js"
></script>
<script src=
"/oblog312/dwr/util.js"
></script>
这两个是dwr提供的,用户可以不必关心,只需要导入即可
<script src=
"/oblog312/dwr/interface/DWRUserAccess.js"
></script>
是我们编写的DWRUserAccess类,经dwr反射后,生成的javascript代码,它和DWRUserAccess.java是对应的,供用户调用,实际上我们就是通过这个js文件去调用服务器端的DWRUserAccess类的。
其中例子要用到两个jar包:dwr.jar和commons-logging.jar
dwr实例操作
1. AJAX框架—DWR 下载地址:http://directwebremoting.org/dwr/downloads/index.html
下载:Version 2.0.6:dwr-2.0.6-src.zip (20.39Mb)
2. 把Dwr.jar放到WEB-INF\lib目录下。
3. 修改web.xml,内容如下:
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5"
xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
<servlet>
<servlet-name>dwr</servlet-name>
<servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>dwr</servlet-name>
<url-pattern>/dwr/*</url-pattern>
</servlet-mapping>
</web-app>
4. 新建业务类。
package com.dwr;
publicclass UserManager {
publicboolean checkUser(String name){
boolean exists=false;
if(name!=null){
if(name.equals("admin") || name.equals("aaa")){
exists=true;
}
}
return exists;
}
}
5. WEB-INF目录下新建dwr.xml,内容如下:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN" "http://getahead.org/dwr/dwr20.dtd">
<dwr>
<allow>
<create javascript="JUserManager" creator="new">
<param name="class" value="com.dwr.UserManager"></param>
<include method="checkUser"/>
</create>
<!-- 如果返回的是实体对象,需要像下面一样配置(例子).
<convert match="org.getahead.dwrdemo.people.Person" javascript="Person" converter="bean"/>
-->
</allow>
</dwr>
6. 启动服务,浏览http://localhost:8080/webDemo1/dwr/,可以看到DWR发布类的列表。
出现错误:java.lang.NoClassDefFoundError: org/apache/commons/logging/LogFactory
表示:WEB-INF\lib目录下LOG的JAR包。
commons-logging-1.0.1.jar
出现错误:java.lang.SecurityException: Access to debug pages is denied.
表示:<servlet>标签内加上如下内容
<init-param>
<param-name>debug</param-name>
<param-value>true</param-value>
</init-param>
正确显示如下:
单击链接,页面如下:
7. 新建login.jsp—注意把上面三个JS文件导入进来,JUserManager对象的方法与业务类相同,不要写错。
<%@ page language="java" import="java.util.*" pageEncoding="gbk"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head><title>DWR deom</title> </head>
<script type="text/javascript" src='dwr/interface/JUserManager.js'></script>
<script type='text/javascript' src='dwr/engine.js'></script>
<script type='text/javascript' src='dwr/util.js'></script>
<script type="text/javascript">
function checkUser(item)
{
var name=item.value;
if(!name)
{
alert('用户不能为空!');
return;
}
JUserManager.checkUser(name,docheck);
}
function docheck(isExists)
{
if(isExists==1)
{
alert('用户名已存在!');
}else if(isExists==0)
{
alert('用户名可以使用!');
}
}
</script>
<body>
<h1>dwr demo</h1>
<form action="">
username:<input type="text" name="username" onblur="return checkUser(this);" /><br/>
password:<input type="password" name="password" /><br/>
<input type="submit" value="submit" />
</form>
</body>
</html>
反向 Ajax
反向Ajax的基本概念是客户端不必从服务器获取信息,服务器会把相关信息直接推送到客户端。这样做的目的是解决Ajax传统Web模型所带来的一个限制:实时信息很难从技术上解决。原因是,客户端必须联系服务器,主动询问是否存在变更,如果有变更就会更新页面(或者页面的一部分)。虽然可以非常快速完成这个操作,让人感觉好像是实时的,但是实际上不是实时的。我们需要的是,服务器联系查看其页面的所有浏览器,并通告所发生的变更。
反向Ajax是克服这个限制的一种方式。像Ajax本身一样,这不是一门专门的技术,而是按照不寻常方式组合使用已有的技术达到不寻常的效果。
传统的Web模式(也就是非Ajax的应用程序)有一系列鲜明的事件。简单来说,用户在客户端的一个动作会导致向服务器发出一个请求,然后服务器按照请求进行相应处理,并把处理结果作为响应传回客户端,这个响应通常是一个完整的新的UI视图。这种处理过程反复循环,直到用户决定离开当前Web站点。在基于 Ajax的应用程序的事件序列中,某个用户动作会导致对某个客户端Ajax引擎的调用,不论它是JavaScript代码,还是其他库。这个引擎会向服务器发出一个请求,服务器按照非Ajax模式进行处理,然后返回响应。响应内容首先被Ajax引擎处理,然后调用某些客户端代码以更新页面。同样,这个循环会无止境进行,直到用户离开当前页面。
现在总共有三种DWR支持的技术可以辅助完成这种技术,其中两种技术都属于"主动的"反向Ajax,第三种被认为是"被动的"反向Ajax。下面逐个讨论每种技术以及DWR提供的支持。
7.9.1 轮询
假设有个未使用AJAX的Web页面,使用<meta>刷新标签,每隔数秒就更新这个页面。这就是所说的轮询。客户端定时轮询服务器,看是否存在更新,并且显示服务器传回的当前信息。在网页上,使用一些简单的JavaScript代码以持续地更新页面,就可以实现相同的事情。确实,能够从表面实现所谓的推送,这就是轮询技术。
在Ajax中,事件流会更加复杂,但是实质上是一样的,轮询技术是两种主动式反向Ajax方法的一种,客户端在每个时间周期内向服务器发送请求,看看服务器端有没有数据更新,如果有,就向服务器请求数据。另一种主动式方法被称为Comet。
7.9.2 Comet(服务器推)
第二种主动式反向Ajax方法是Comet,这是一种基于HTTP长连接的服务器推动方式。客户端向服务器发送请求后,服务器将数据通过response发送给客户端,但并不会将此response关闭,而是一直通过response将最新的数据发送给客户端浏览器,直到客户端浏览器关闭。使用 AJAX 实现“服务器推”与传统的 AJAX 应用不同之处在于:
1. 服务器端会阻塞请求直到有数据传递或超时才返回。
2. 客户端 JavaScript 响应处理函数会在处理完服务器返回的信息后,再次发出请求,重新建立连接。
3. 当客户端处理接收的数据、重新建立连接时,服务器端可能有新的数据到达;这些信息会被服务器端保存直到客户端重新建立连接,客户端会一次把当前服务器端所有的信息取回。
7.9.3 PiggyBack(回传)
PiggyBack(回传)方法是DWR提供的一种“被动式”方法。服务器端将最新的数据排成队列,然后等待客户端下一次请求,接收到请求后就将等待更新的数据发给客户端。 DWR会使用默认的设置是PiggyBack,所以在默认情况下,启用反向Ajax时,不会导致服务器超载。
7.9.4 反向Ajax的配置与实现
要让DWR程序支持反向AJAX,只需要在web.xml中DWRServlet里添加一个初始化参数,添加内容为:
<servlet>
<servlet-name>dwr-invoker</servlet-name>
<display-name>DWR Servlet</display-name>
<description>Direct Web Remoter Servlet</description>
<servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class>
<init-param>
<param-name>activeReverseAjaxEnabled</param-name>
<param-value>true</param-value>
</init-param>
<init-param>
</init-param>
</servlet>
<servlet-mapping>
<servlet-name>dwr-invoker</servlet-name>
<url-pattern>/dwr/*</url-pattern>
</servlet-mapping>
如果应用的是轮询技术,则需要添加中下参数:
param-name>org.directwebremoting.extend.ServerLoadMonitor</param-name>
<param-value>org.directwebremoting.impl.PollingServerLoadMonitor</param-value>
除了上述配置,为启用反向Ajax,在页面中还需要一些JavaScript代码,即:
dwr.engine.setActiveReverseAjax(true);
只需要上述代码和web.xml文件中的配置,就可以激活反向Ajax了。
处理轮询请求的过程通常是在服务器端编写一些代码,以更新附加到服务器端的每个客户端的会话。DWR会记录与之联系的每个客户端,分别存储每个客户端的会话。这一点与通常的HTTP会话不同。借助于此,可以调用JavaScript代码,下一个轮询请求会通知这些调用。下面就是一个处理轮询请求的例子,服务器端的发布者实现代码如下:
package com.ajax.dwr;
import java.util.LinkedList;
import java.util.List;
import org.directwebremoting.Browser;
import org.directwebremoting.ScriptSessions;
public class SendMessage {
public void addMessage(String message) {
System.out.println("有客户请求,消息为:" + message);
messages.add(message);
Browser.withCurrentPage(new Runnable() {//启用监听客户端当前页线程
public void run() {//把数据添加到客户端调用的方法中
ScriptSessions.addFunctionCall("receiveMessages", messages);
}
});
}
private List<String> messages = new LinkedList<String>();
}
这里主要通过WebContext类获得DWR应用的WEB上下文,用ServletContext获得DWRServlet的上下文,以及通过WEB上下文获取访问本应用的客户端浏览器的ScriptSession。一旦获得当前页面的名称,就可以获取当前连接到这个页面的所有会话列表。然后,启用监听客户端当前页线程,把数据添加到客户端调用的方法中。
下面是在客户端执行的JSP页面文件,代码如下:
<html>
<head>
<base href="<%=basePath%>">
<title>starting page</title>
<script type="text/javascript" src="dwr/interface/SendMessage.js"></script>
<script type="text/javascript" src="dwr/engine.js"></script>
<script type="text/javascript" src="dwr/util.js"></script>
<script type="text/javascript">
function sendMessage()
{
var message=$("message").value;
SendMessage.addMessage(message);
}
function receiveMessages(messages)
{
var chatlog = "";
for (var data in messages) {
chatlog = "<div>" + dwr.util.escapeHtml(messages[data]) + "</div>" + chatlog;
}
dwr.util.setValue("list", chatlog, { escapeHtml:false });
}
</script>
</head>
<body οnlοad="dwr.engine.setActiveReverseAjax(true);">
input message:
<input id="message" type="text" />
<input type="button" value="send" οnclick="sendMessage()" />
<br>
<div id="list"></div>
</body>
</html>
Util 类有很多很方便的方法,其中一个是setValue()。这个方法类似于在客户端执行document.getElementById("list ").innerHTML = "",但是它会关注一些细节,比如目标元素是文本框或者其他元素。在此,使用所记录的Date域的当前值来更新list的内容。将第三个参数设为 true,可以指定任何HTML内容,这样的话不会破坏客户端的任何内容
要用的java类在wr.xml文件配置内容如下:
<create javascript="SendMessage" creator="new" scope="application">
<param name="class" value="com.ajax.dwr.SendMessage"></param>
</create>
如果不希望使用轮询方法,那么可以非常容易地切换为用Comet方法,只需要把web.xml文件中如下代码注释掉:
<param-name>org.directwebremoting.extend.ServerLoadMonitor</param-name>
<param-value>org.directwebremoting.impl.PollingServerLoadMonitor</param-value>
如果应用PiggyBack方法,则不需要在web.xml中DWRServlet里添加上述初始化参数。
该例子中完整的web.xml配置内容如下;
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee
http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
<!-- 配置DWR的核心Servlet -->
<servlet>
<!-- 指定DWR核心Servlet的名字 -->
<servlet-name>dwr</servlet-name>
<servlet-class>
<!-- 指定DWR核心Servlet的实现类 -->
org.directwebremoting.servlet.DwrServlet
</servlet-class>
<!-- 指定DWR核心Servlet处于调试状态 -->
<init-param>
<param-name>debug</param-name>
<param-value>true</param-value>
</init-param>
<!-- 设置使用反向Ajax技术 -->
<init-param>
<param-name>activeReverseAjaxEnabled</param-name>
<param-value>true</param-value>
</init-param>
<init-param>
<param-name>
initApplicationScopeCreatorsAtStartup
</param-name>
<param-value>true</param-value>
</init-param>
<init-param>
<!--长连接只保持时间 -->>
<param-name>maxWaitAfterWrite</param-name>
<param-value>60</param-value>
</init-param>
<load-on-startup>1</load-on-startup>
</servlet>
<!-- 指定核心Servlet的URL映射 -->
<servlet-mapping>
<servlet-name>dwr</servlet-name>
<url-pattern>/dwr/*</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
</web-app>
发布文程序后,这里为了模拟多个用户操作,先打开两个窗口,然后在地址栏输入http://localhost:8081/Ajaxapp/GetMessage.jsp,在出现的两个页面中,分别输入不同的字符串后单击“发送”按钮,程序运行结果如图7-5所示。从运行的结果可以看出,当在一个页面发消息时,另一个页面也显示出的其他页面发送的消息。
DWR高级主题之反向Ajax
DWR高级主题之反向Ajax
----------
反向Ajax的基本概念是,客户端不必主动从服务器获取信息,服务器会把相关信息直接推送到客户端。这样做的目的是解决Ajax“传统”web模型所带来的一个限制:实时信息很难从技术上解决。原因是,客户端必须联系服务器,主动询问是否存在变更,如果有变更就会更新页面(或者页面的一部分),虽然可以非常快速完成这个操作,让人感觉好像是实时的,但是实际上不是实时的。
反向Ajax是克服这个限制的一种方式。事实上,反向Ajax实际上是个幻觉!但是,这是一个故意为之的幻觉,而不是无意义的幻觉。在当前HTTP技术的限制下,根本找不到真正把信息从服务器推送到客户端的方式,因为这个协议是无状态的,并且客户端发起的连接一旦断开,服务器就不可能了解客户端。不管到底哪一方发起这个连接,都不存在从客户端到服务器的"持续"连接。
虽然没有真正的推送技术,但是可以完美地模拟它!!
现在总共有三种DWR支持的技术可以辅助完成这种技术,其中两种技术都属于"主动的"反向Ajax,第三种被认为是"被动的"反向Ajax。
1.轮询
假设有个未使用Ajax的web页面,使用<meta>刷新标签,每隔数秒就更新这个页面。这就是所说的轮询。客户端定时轮询服务器,看是否存在更新,并且显示服务器传回的信息。在网页上,使用一些简单的javascript代码也可以实现相同的事情。确实从表面实现所谓的推送,这就是轮询技术。在Ajax中 ,事件流会更加复杂,但是实质上是一样的,这里Ajax轮询技术是两种主动式反向Ajax方法的一种。
2.Comet
第二种主动式反向Ajax方法是Comet,这是一种基于HTTP长连接的服务器推动方式。客户端向服务器发送请求后,服务器将数据通过response发送给客户端,但并不会将此response关闭,而是一直通过response将最新的数据发送给客户端浏览器,直到客户端浏览器关闭。使用Ajax实现"服务器推"与传统的Ajax应用不同之处在于:
a.服务器端会阻塞请求直到有数据传递或超时才返回。
b.客户端javascript响应处理函数在处理完服务器返回的信息后,再次发送请求,重新建立连接。
c.当客户端处理接收的数据、重新建立连接时,服务器端可能有新的数据到达;这些信息会被服务器端保存直到客户端重新建立连接,客户端会一次把当前服务器所有的信息取回。
它的缺点是:对于输出非常频繁的应用程序,会导致单击数量非常庞大。在输出频率非常低的应用程序中,一个事件可能导致所有已连接的浏览器会同时重新连接。在输出频率很低,但是连接了大量浏览器的情况下,通过切换到轮询模式,可以大幅度降低服务器的负载。
3.piggybacking
piggybacking(回传)方法是DWR提供的一种"被动式"方法。服务器端将最新的数据排成队列,然后等待客户端下一次请求,接收到请求后就将等待更新的数据发给客户端。DWR会使用默认的设置是piggybacking,所以,在默认情况下,启用反向Ajax时,不会导致服务器超载
三种方式的比较
每种方式都有自己的优势,轮询方式容易实现,然而他会超成服务器过载,Comet采取的是长连接的方式,在server却很容易实现,也有缓慢的延迟,但是没有必要等到下次浏览器连接,轮询和comet的实现都需要额外的网络连接,所以真正的低成本的方式是piggybacking,但是会有非常缓慢的延迟(需要等待下次浏览器连接)。如果Server可以承受额外的负载,并且需要快速响应,那么可以采用comet或轮询的方式。这是这两种试被称为主动式的原因。