DWR第二篇之逆向Ajax

1. 本示例在第一篇架构基础上添加代码

2. 首先修改web.xml里dwr的servlet配置:

 1 <!-- 配置dwr请求的servlet -->
 2 <servlet>
 3     <servlet-name>dwr-invoker</servlet-name>
 4     <servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class>
 5     <init-param>
 6         <param-name>activeReverseAjaxEnabled</param-name>
 7         <param-value>true</param-value>
 8     </init-param>
 9 </servlet>
10     <servlet-mapping>
11     <servlet-name>dwr-invoker</servlet-name>
12     <url-pattern>/dwr/*</url-pattern>
13 </servlet-mapping>

3. 在CoreServlet.java里添加推送消息的方法

1 public void send(final String msg) {
2     // 将接收到的内容推送到所有的浏览器
3     Browser.withAllSessions(new Runnable() {
4         @Override
5         public void run() {
6             Util.setValue("msg", msg);
7         }
8     });
9 }

4. 新建client.jsp用于接受服务器推送的请求

 1 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
 2 <%
 3     String path = request.getContextPath();
 4     String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
 5 %>
 6 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 7 <html>
 8 <head>
 9 <base href="<%=basePath%>">
10 <title>dwr_demo</title>
11 <script type='text/javascript' src='dwr/engine.js'></script>
12 <script type='text/javascript' src='dwr/util.js'></script>
13 <script type='text/javascript' src='dwr/interface/CoreServlet.js'></script>
14 </head>
15 <body>
16     <h1>服务器推送的内容</h1>
17     <span id="msg"></span>
18 </body>
19 <script type="text/javascript">
20     window.onload = function() {
21         //开启逆向Ajax功能
22         dwr.engine.setActiveReverseAjax(true);
23     }
24 </script>
25 </html>

5. 修改index.jsp为:

 1 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
 2 <%
 3     String path = request.getContextPath();
 4     String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
 5 %>
 6 
 7 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 8 <html>
 9 <head>
10 <base href="<%=basePath%>">
11 
12 <title>dwr_demo</title>
13 <script type='text/javascript' src='dwr/engine.js'></script>
14 <script type='text/javascript' src='dwr/util.js'></script>
15 <script type='text/javascript' src='dwr/interface/CoreServlet.js'></script>
16 </head>
17 
18 <body>
19     <input type="button" value="发送" onclick="sayHello();">
20     <br>
21     <input type="text" id="getHello">
22     <input type="button" value="发送" onclick="getHello();">
23     <input type="text" id="getHelloValue">
24     <br>
25     <input type="text" id="sendMsg">
26     <input type="button" value="推送" onclick="sendMsg();">
27 </body>
28 <script type="text/javascript">
29     function sayHello() {
30         CoreServlet.sayHello();
31     }
32     function getHello() {
33         var name = dwr.util.getValue("getHello");
34         CoreServlet.getHello(name, function(data) {
35             dwr.util.setValue("getHelloValue", data);
36         });
37     }
38     function sendMsg() {
39         var msg = dwr.util.getValue("sendMsg");
40         CoreServlet.send(msg);
41     }
42 </script>
43 </html>

6. 测试(注意,需要JDK1.7及以上)

posted @ 2017-08-31 08:48  我滴个小张张  阅读(273)  评论(0编辑  收藏  举报