Dwr的Reverse Ajax初步技术实现

原文链接:http://blog.csdn.net/liuxuezong/article/details/7481921

Dwr的逆向ajax其实主要包括两种模式：主动模式和被动模式。其中主动模式包括Polling和Comet两种，被动模式只有Piggyback这一种。

    所谓的Piggyback指的是如果后台有什么内容需要推送到前台（即调用页面的js方法），是要等到那个页面进行下一次ajax请求的时候，将需要推送的内容附加在该次请求之后，传回到页面。

    polling指的是由浏览器定时向服务端发送ajax请求，询问后台是否有什么内容需要推送，有的话就会由服务端返回推送内容。这种方式和我们直接在页面通过定时器发送ajax请求，然后查询后台是否有变化内容的实现是类似的。只不过用了Dwr之后这部分工作由框架帮我们完成了。

    comet模式指的的当服务端建立和浏览器的连接，将页面内容发送到浏览器之后，对应的连接并不关闭，只是暂时挂起。如果后面有什么新的内容需要推送到客户端的时候直接通过前面挂起的连接再次传送数据。

    通过上面的解释我们可以看到，这三种模式都有各自的优缺点。从客户端请求次数的角度来说，当然是piggyback的模式最好。这个里面完全没有额外的网络请求，只有等到下次请求页面主动发起了，中间的变化内容才传递回页面。但是这也导致了这推送内容的延时，因为你完全没办法知道页面的下一次请求将在什么时候发起，也许页面永远都没有下一次请求。polling模式的网络请求最为频繁了，因为这时候页面不管后台有没有更新的内容，都需要发送请求询问。虽然这种模式可以通过增加请求间隔的时间来减少单位时间内的请求次数，但是这样同样会导致页面响应后台内容变化的间隔时间增长，这中间就产生了矛盾，具体的请求间隔时间还是要根据具体项目的需求来配置。比如服务器能承受的请求间隔和页面内容所需要的刷新频率。comet方式的响应速度应该是最快的，后台一旦有内容需要推送可以通过前面没有关闭的连接马上推送到前台。但是服务器所能提供的连接数目是一定的，在大量的挂起的连接没有关闭的情况下，可能造成新的连接请求不能接入，从而影响到服务质量。

一、配置情况

1）、piggyback方式

    Dwr默认采用的是piggyback这种被动模式，如果需要采用这种模式的话不需要任何额外的配置就能完成。

2）、comet方式

    如果需要采用主动模式的话就需要进行一些相应的配置了，首先需要在web.xml中dwr的servlet中配置如下的参数：

<servlet>

   <servlet-name>dwr-invoker</servlet-name>

   <display-name>DWR Servlet</display-name>

   <servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class>

   <init-param>

     <param-name>activeReverseAjaxEnabled</param-name>

     <param-value>true</param-value>

   </init-param>

</servlet>

    在需要接受推送内容的页面body的onload事件中需要调用：

    dwr.engine.setActiveReverseAjax(true);

    方法来启动该页面的ReverseAjax功能。这时候默认采用的将是comet的方式来完成页面内容的推送。

3）、polling方式

    如果想采用polling方式，只需要在comet方式的基础之上，在servlet参数中再加上如下的参数：

<init-param>

<param-name>org.directwebremoting.extend.ServerLoadMonitor</param-name>

<param-value>org.directwebremoting.impl.PollingServerLoadMonitor</param-value>

</init-param>

    其中页面默认的请求间隔时间是5秒，如果需要进行配置的话通过如下的参数来完成：

<init-param>

<param-name>disconnectedTime</param-name>

<param-value>60000</param-value>

</init-param>

    说明：这就将请求间隔时间设为了60秒。

二、调用方式

    后台可以通过如下的方式来推送内容：

    ScriptBuffer script = new ScriptBuffer();

    script.appendScript("这里加入需要页面执行的js代码的字符串");

    ServerContext sctx = ServerContextFactory.get(servletContext);

if (sctx != null)

{

       Collection pages = sctx.getScriptSessionsByPage("这里加入待推送页面的相对路径，例如/book/list.jsp");

       Iterator it = pages.iterator();

       While (it.hasNext())

       {

              ScriptSession session = (ScriptSession)it.next();

              session.addScript(script);

      }

    }

    其中的servletContext可以既可以是通过前台请求传入的，也可以是通过该类实现spring的ServletContextAware接口，由spirng注入的。并且在调用ServerContextFactory.get(servletContext)方法之前，Dwr的上下文已经建立起来了。

    在完成了以上工作之后就可以享受到dwr通过Reverse Ajax给你带来的惊喜体验了，你可以像cs模式中server直接操作client那样便利的操作browser了。

三、实现方式

    仿真我前面写的<<最简单的DWR例子>>内容，新建web project工程testAjax。本例程主要实现服务器主动刷新客户端页面内的当前时间，在编辑框内产生随机数。

1）、Clock.java代码

[javascript]  view plain copy

1. package com.test.ajax;  
2.   
3.    
4.   
5. import org.directwebremoting.ServerContextFactory;  
6.   
7. import org.directwebremoting.Browser;  
8.   
9. import org.directwebremoting.ui.dwr.Util;  
10.   
11.    
12.   
13. import java.util.Date;  
14.   
15. import java.util.concurrent.ScheduledThreadPoolExecutor;  
16.   
17. import java.util.concurrent.TimeUnit;  
18.   
19.    
20.   
21. publicclass Clock implements Runnable {  
22.   
23.      protectedtransientbooleanactive = false;  
24.   
25.      inti = 0;  
26.   
27.    
28.   
29.      public Clock() {  
30.   
31.          ScheduledThreadPoolExecutor executor = new ScheduledThreadPoolExecutor(1);  
32.   
33.          executor.scheduleAtFixedRate(this, 1, 1, TimeUnit.SECONDS);  
34.   
35.      }   
36.   
37.    
38.   
39.      publicvoid run() {  
40.   
41.          if (active) {  
42.   
43.               setClockDisplay((new java.text.SimpleDateFormat("yyyy年MM月dd日 hh时mm分ss秒")).format(new Date()));  
44.   
45.          }  
46.   
47.      }  
48.   
49.    
50.   
51.      /** 
52.  
53.       * Called from the client to turn the clock on/off 
54.  
55.       */  
56.   
57.      publicsynchronizedvoid toggle() {  
58.   
59.          i++;  
60.   
61.    
62.   
63.          active = !active;  
64.   
65.    
66.   
67.          System.out.println("toggle clicked!" + i);  
68.   
69.          System.out.println("active:" + active);  
70.   
71.          if (active) {  
72.   
73.               setClockDisplay("Started");  
74.   
75.          } else {  
76.   
77.               setClockDisplay("Stopped");  
78.   
79.          }  
80.   
81.      }  
82.   
83.    
84.   
85.      publicvoid setClockDisplay(final String output) {  
86.   
87.          String page = ServerContextFactory.get().getContextPath() + "/index.jsp";  
88.   
89.          Browser.withPage(page, new Runnable() {  
90.   
91.               publicvoid run() {  
92.   
93.                    Util.setValue("clockDisplay", output);  
94.   
95.                    double dValue = Math.random();   
96.   
97.                    String strValue = String.valueOf(dValue);  
98.   
99.                    Util.setValue("PointValue", strValue);  
100.   
101.               }  
102.   
103.          });  
104.   
105.      }  
106.   
107.    
108.   
109. }  

2）、dwr.xml代码

[html]  view plain copy

1. <?xml version="1.0" encoding="UTF-8"?>    
2.   
3. <!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 3.0//EN" "http://getahead.org/dwr/dwr30.dtd">    
4.   
5. <dwr>  
6.   
7. <allow>  
8.   
9. <create creator="new" javascript="Clock" scope="application">  
10.   
11. <param name="class" value="com.test.ajax.Clock"/>  
12.   
13. </create>  
14.   
15. </allow>  
16.   
17. </dwr>  

3）、dwr.xml代码

[html]  view plain copy

1. <?xml version="1.0" encoding="UTF-8"?>    
2.   
3. <web-app version="3.0"     
4.   
5.     xmlns="http://java.sun.com/xml/ns/javaee"     
6.   
7.     xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"     
8.   
9.     xsi:schemaLocation="http://java.sun.com/xml/ns/javaee     
10.   
11.     http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd">    
12.   
13.   <display-name></display-name>     
14.   
15.   <servlet>    
16.   
17.     <servlet-name>dwr-invoker</servlet-name>    
18.   
19.     <servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class>    
20.   
21.     <init-param>    
22.   
23.         <param-name>debug</param-name>    
24.   
25.         <param-value>true</param-value>    
26.   
27.     </init-param>  
28.   
29.     <init-param>  
30.   
31.     <description>是否激活反向Ajax</description>  
32.   
33.          <param-name>activeReverseAjaxEnabled</param-name>  
34.   
35.          <param-value>true</param-value>  
36.   
37.      </init-param>  
38.   
39.      <init-param>  
40.   
41.          <description>在WEB启动时是否创建范围为application的creator</description>  
42.   
43.          <param-name>initApplicationScopeCreatorsAtStartup</param-name>  
44.   
45.          <param-value>true</param-value>  
46.   
47.      </init-param>  
48.   
49.     <load-on-startup>1</load-on-startup>  
50.   
51.   </servlet>    
52.   
53.   <servlet-mapping>    
54.   
55.     <servlet-name>dwr-invoker</servlet-name>    
56.   
57.     <url-pattern>/dwr/*</url-pattern>    
58.   
59.   </servlet-mapping>    
60.   
61.   <welcome-file-list>    
62.   
63.     <welcome-file>index.jsp</welcome-file>    
64.   
65.   </welcome-file-list>    
66.   
67. </web-app>   

4）、index.jsp代码

[javascript]  view plain copy

1. <%@ page language="java" contentType="text/html; charset=GB18030"  
2.   
3.   pageEncoding="GB18030"%>  
4.   
5. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
6.   
7. <html>  
8.   
9. <head>  
10.   
11. <%  
12.   
13.      String path = request.getContextPath();  
14.   
15. %>  
16.   
17. <meta http-equiv="Content-Type" content="text/html; charset=GB18030">  
18.   
19. <title>Server-side clock</title>  
20.   
21. <script type='text/javascript' src='dwr/engine.js'></script>  
22.   
23. <script type='text/javascript' src='dwr/util.js'></script>  
24.   
25. <script type='text/javascript' src='dwr/interface/Clock.js'></script>  
26.   
27. <script language="javascript">   
28.   
29.     function Init()  
30.   
31.     {  
32.   
33.         dwr.engine.setActiveReverseAjax(true);  
34.   
35.     }  
36.   
37. </script>  
38.   
39.    
40.   
41. </head>  
42.   
43.    
44.   
45. <body οnlοad="Init()">点击查看服务器时间   
46.   
47. <input type="button" value="Start/Stop" οnclick="Clock.toggle();"/>  
48.   
49. <br><br><h2 id="clockDisplay"></h2>  
50.   
51. <input type="text" name="PointValue">  
52.   
53. </body>  
54.   
55.    
56.   
57. </html>  

5）、效果图

图3-1 初始页面

图3-2 动态刷新数据图

 

四、未来用途

    正常情况下，DWR 调用服务器端的JavaBean 对象方法使用正向请求/响应模式， 也称为拉模式(Pull Model) ，由客户端JavaScript 调用JavaBean 方法， 返回结果通过回调方法更新页面上的HTML 元素，实现监控数据的显示。这种正向模式符合一般的管理系统应用， 但对监控系统实时性要求较高的应用却力不从心。而反向模式即推模式(Push Model) ， 是适应监控系统的最佳方式， 由服务器组件将取得的监控数据推送到Web 客户端，不需要客户端主动请求， 而是被动接收。因而无需进行Web层进行页面刷新， 即可实现数据更新显示。

图4-1 典型监控WEB流程架构图

完