DWR推技术

weiqianghe

DWR 推技术ajax 2010-11-18 11:45:39 阅读173 评论0   字号：大中小 订阅 .


                                  DWR2.x的推技术

DWR2.x的推技术也叫DWR Reverse Ajax（逆向Ajax）主要是在BS架构中，从服务器端向多个浏览器主动推数据的一种技术。在DWR所开的线程中使用Reverse Ajax时，通过WebContextFactory.get()获取WebContext对象，进而获取脚本Session。在DWR之外使用Reverse Ajax时，就要用到ServerContext，在Spring环境中要得到ServerContext，就需要用到Spring的ServletContextAware接口。

一、Reverse Ajax的实现有3种方式：

      DWR的逆向Ajax主要包括两种模式：主动模式和被动模式。其中主动模式包括polling和comet两种，被动模式只有piggyback这一种。

     1、piggyback方式

           这是默认的方式。

           如果后台有什么内容需要推送到前台，是要等到那个页面进行下一次ajax请求的时候，将需要推送的内容附加在该次请求之后，传回到页面。只有等到下次请求页面主动发起了，中间的变化内容才传递回页面。

      2、comet方式

           当服务端建立和浏览器的连接，将页面内容发送到浏览器之后，对应的连接并不关闭，只是暂时挂起。如果后面有什么新的内容需要推送到客户端的时候直接通过前面挂起的连接再次传送数据。服务器所能提供的连接数目是一定的，在大量的挂起的连接没有关闭的情况下，可能造成新的连接请求不能接入，从而影响到服务质量。

      3、polling方式

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

二、使用DWR的推技术的步骤

     1、在web.xml文件中增加以下配置信息

Xml代码  

1.<servlet>  

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

3.   <servlet-class>uk.ltd.getahead.dwr.DWRServlet</servlet-class>  

4.   <init-param>  

5.       <param-name>debug</param-name>  

6.       <param-value>true</param-value>  

7.   </init-param>  

8.      

9.   <!-- DWR默认采用piggyback方式 -->  

10.      

11.   <!-- 使用polling和comet的方式 -->  

12.   <init-param>  

13.       <param-name>pollAndCometEnabled</param-name>  

14.       <param-value>true</param-value>  

15.   </init-param>  

16.      

17.   <!-- comet方式 -->  

18.   <!--   

19.   <init-param>  

20.       <param-name>activeReverseAjaxEnabled</param-name>  

21.       <param-value>true</param-value>  

22.   </init-param>  

23.    -->  

24.      

25.   <!-- polling方式：在comet方式的基础之上，再配置以下参数 -->  

26.   <!--   

27.   <init-param>  

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

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

30.   </init-param>  

31.    -->  

32.        

33.   <!-- 毫秒数。页面默认的请求间隔时间是5秒 -->  

34.   <!--   

35.   <init-param>  

36.       <param-name>disconnectedTime</param-name>  

37.       <param-value>60000</param-value>   

38.   </init-param>  

39.    -->  

40.      

41.   <load-on-startup>1</load-on-startup>         

42.</servlet>  

43.

44.<servlet-mapping>  

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

46.   <url-pattern>/dwr/*</url-pattern>  

47.</servlet-mapping>  



    2、在dwr.xml中增加以下配置信息

Xml代码  

1.<create creator="new" javascript="DWRHelper">  

2.   <param name="class" value="com.cjm.web.dwr.DWRHelper"/>  

3.   <include method="addMessage"/>  

4.   <include method="test"/>  

5.</create>  

6.

7.<convert converter="bean" match="com.cjm.web.dwr.Message">  

8.   <param name="include" value="id,text"/>  

9.</convert>  



    3、pojo类Message的源码

Java代码  

1.public class Message {   

2.   private long id = System.currentTimeMillis();   

3.   private String text;   

4.      

5.   public Message(){   

6.         

7.   }   

8.      

9.   public Message(String newText){   

10.       text = newText;   

11.   }   

12.      

13.   public long getId() {   

14.       return id;   

15.   }   

16.   public void setId(long id) {   

17.       this.id = id;   

18.   }   

19.   public String getText() {   

20.       return text;   

21.   }   

22.   public void setText(String text) {   

23.       this.text = text;   

24.   }   

25.}  



     4、DWRHelper类源码

Java代码  

1.public class DWRHelper {   

2.   private static LinkedList<Message> messages = new LinkedList<Message>();   

3.   private static ReentrantLock lock = new ReentrantLock(); //JDK5锁   

4.      

5.   public void addMessage(String text){   

6.       try{   

7.           lock.lock();   

8.              

9.           if(text!=null && text.trim().length()>0){   

10.               messages.addFirst(new Message(text));   

11.               if(messages.size()>10){   

12.                   messages.removeLast();   

13.               }   

14.           }   

15.       }catch(Exception ex){   

16.           ex.printStackTrace();   

17.       }finally{   

18.           lock.unlock();   

19.       }   

20.         

21.       //获得DWR上下文   

22.       WebContext webContext = WebContextFactory.get();   

23.         

24.       //获取当前页面URL，比如/ext3/test_tag.jsp   

25.       String currentPage = webContext.getCurrentPage();   

26.         

27.       //当前脚本sessin   

28.       ScriptSession scriptSession = webContext.getScriptSession();   

29.         

30.       //设置页面控件的值   

31.       Util util = new Util(scriptSession);   

32.       util.setValue("text", ""); //这里是清空页面输入框的值   

33.         

34.       //设置脚本sessin的属性值   

35.       scriptSession.setAttribute("uid", "cjm");   

36.         

37.       //获取脚本session的属性值   

38.       for(Iterator it=scriptSession.getAttributeNames();it.hasNext();){   

39.           String attrName = (String)it.next();   

40.           System.out.println(attrName + "=" + scriptSession.getAttribute(attrName));   

41.       }   

42.         

43.       //获取所有浏览当前页面的脚本session   

44.       Collection<ScriptSession> sessions = webContext.getScriptSessionsByPage(currentPage);   

45.         

46.       Util utilAll = new Util(sessions);   

47.         

48.       //执行客户端脚本   

49.       ScriptBuffer script = new ScriptBuffer();   

50.       script.appendScript("clientFunction(")   

51.         .appendData(scriptSession.getAttribute("uid"))   

52.         .appendScript(");");   

53.         

54.       for(ScriptSession session: sessions){   

55.           session.addScript(script);   

56.       }   

57.         

58.       //更新这些脚本session的一些元素   

59.       utilAll.removeAllOptions("messages");   

60.       utilAll.addOptions("messages", messages, "id", "text");   

61.   }

62.}  



    5、JSP页面源码

Html代码  

1.<%@ page language="java" pageEncoding="UTF-8"%>  

2.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  

3.<html>  

4. <head>  

5.   <script type='text/javascript' src='/ext3/dwr/engine.js'></script>  

6.   <script type='text/javascript' src='/ext3/dwr/util.js'></script>  

7.   <script type='text/javascript' src='/ext3/dwr/interface/DWRHelper.js'></script>  

8. </head>  

9.   

10. <!-- 通过 dwr.engine.setActiveReverseAjax(true); 启动该页面的Reverse Ajax功能  -->  

11. <body >  

12.   <p>输入信息: <input id="text" onkeypress="dwr.util.onReturn(event, sendMessage)" />   

13.   <input type="button" value="Send"  /></p>  

14.

15.   <script type="text/javascript">  

16.       function sendMessage() {   

17.           DWRHelper.addMessage(dwr.util.getValue("text"));   

18.       }   

19.   </script>  

20.      

21.   <hr/>  

22.   <select id="messages"></select>  

23.      

24. </body>  

25.</html>