DWR框架实例解析

最新推荐文章于 2025-05-03 11:27:03 发布

转载最新推荐文章于 2025-05-03 11:27:03 发布 · 置顶 · 550 阅读

收录于

java

1、从DWR官网下载最新版本的jar包，地址：http://directwebremoting.org/dwr/downloads/index.html

2、将jar包放入WEB-INF的lib文件夹下。同时，dwr依赖于commons-logging.jar这个包，所以必须将这个jar包也放入到WEB-INF的lib文件夹下。

3、配置dwr的环境：

a)配置web.xml文件.

 
        <servlet>
       
          <servlet-name>dwr-invoker</servlet-name>
       
          <servlet-class>uk.ltd.getahead.dwr.DWRServlet</servlet-class>
       
          <init-param>
       
            <param-name>debug</param-name>
       
            <param-value>true</param-value>
       
          </init-param>
       
        </servlet>
       
        <servlet-mapping>
       
          <servlet-name>dwr-invoker</servlet-name>
       
          <url-pattern>/dwr/*</url-pattern>
       
        </servlet-mapping><br></span>

web.xml中其他配置不影响，正常配置即可

b)配置dwr

 
        <?xml version="1.0"
        encoding="UTF-8"?>
       
        <!DOCTYPE dwr PUBLIC"-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN"<br>        "http://www.getahead.ltd.uk/dwr/dwr20.dtd">
       
        <!-- 关键配置 -->      
       
          <dwr>
       
            <allow>
       
                <create creator="new"
        javascript="Chat">
       
                    <param name="class"
        value="com.epri.xts.wxqyh.app.chatroom.module.Chat"/>
       
                </create>
       
                <convert converter="bean"
        match="com.epri.xts.wxqyh.app.chatroom.bean.Message"/>
       
            </allow>
       
        </dwr>
       
            <!DOCTYPE dwr PUBLIC"-//GetAhead Limited//DTD Direct Web Remoting 1.0//EN"
        "http://www.getahead.ltd.uk/dwr/dwr10.dtd">
       
            <!DOCTYPE dwr PUBLIC"-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN"
        "http://www.getahead.ltd.uk/dwr/dwr20.dtd">

dwr.xml是dwr的核心配置文件，主要的标签有：<converter>、<convert>、<create>这三个标签。

<create>标签是dwr中重要的标签，用来描述 java（服务器端）与 javascript （客户端）的交互方式。

其中，creator和javascript是必须属性，其他可以忽略。creator包含有以下几个值：

　　new：Java用“new”关键字创造对象

　　none：它不创建对象 (v1.1+)

　　scripted：通过BSF使用脚本语言创建对象，例如BeanShell或Groovy

　　spring：通过Spring框架访问Bean

　　struts：使用Struts的FormBean (v1.1+)

　　jsf：使用JSF的Bean (v1.1+)

　　pageflow：访问Weblogic或Beehive的PageFlow (v1.1+)

　　ejb3：使用EJB3 session bean (v2.0+)

4、页面配置

页面需要引入3个JS

  <script src="<%=ctxPath%>/dwr/interface/Chat.js" 
  type="text/javascript"></script>
 
  <script src="<%=ctxPath%>/dwr/engine.js" 
  type="text/javascript"></script>
 
  <script src="<%=ctxPath%>/dwr/util.js" 
  type="text/javascript"></script>
 
其中engine.js必须要，如果需要用到dwr提供的一些方便的工具要引用util.js ，然后是dwr自动生成的js文件，名字必须和dwr.xml中create标签的javascript属性值一样，且必须是dwr/interface开头的目录
javascript代码：

   function sendMessage() {
  
       var text = DWRUtil.getValue("message");
  
       if("" 
   != text){
  
           DWRUtil.setValue("message", "");
  
           Chat.addMessage(text, name, taskId, gotMessages);
  
       }
  
   }
  
   function gotMessages(messages) {
  
       var chatlog = "";
  
       for 
   ( var data in messages) {
  
           chatlog = "<div> <li class='even'>" 
   + messages[data].text + "</li></div
  
       }
  
       DWRUtil.setValue("chatlog", chatlog);
  
       setTimeout("queryMessage()", 2000);
  
   }
  
   function queryMessage() {
  
       Chat.getMessages(taskId, gotMessages);
  
   }
  
html代码
 
     ?
    
          <%@ page language="java" 
          contentType="text/html; charset=UTF-8"
         
              pageEncoding="UTF-8"%>
         
          <!DOCTYPE html>
         
          <%
         
              String ctxPath = request.getContextPath();
         
          %>
         
          <html>
         
          <head>
         
          <title>聊天组</title>
         
          <meta charset="utf-8">
         
          <meta name="viewport" 
          content="width=device-width, initial-scale=1">
         
          <link rel="stylesheet" 
          href="../css/jquery.mobile-1.4.5.min.css">
         
          <link rel="stylesheet" 
          type="text/css" 
          href="../css/bootstrap.min.css">
         
          <link rel="stylesheet" 
          href="../css/add.css">
         
          <script src="../js/jquery-1.8.3.min.js"></script>
         
          <script src="../js/jquery.mobile-1.4.5.min.js"></script>
         
          </head>
         
          <body class="bgc" 
          onload="queryMessage()">
         
              <div data-role="page" 
          id="pageone">
         
                  <!-- 聊天内容显示区域 -->
         
                  <div data-role="content" 
          class="container" 
          role="main">
         
                      <ul class="content-reply-box mg10" 
          id="chatlog">
         
                      </ul>
         
                  </div>
         
                  <!-- 下方输入框 -->
         
                  <div data-position="fixed" 
          data-role="footer">
         
                      <ul class="footer">
         
                          <li class="col-xs-3">
         
                              <span class="b_pic">
         
                                  <form action="<%=request.getContextPath()%>/chat" 
          method="post"
         
                                      enctype="multipart/form-data" 
          data-ajax="false" 
          name="form"
         
                                      id="form"  
          target="relnews">
         
                                      <input type="hidden" 
          name="name" 
          id="name" 
          value="" 
          /> 
         
                                      <input type="hidden" 
          name="taskId" 
          id="taskId" 
          value="" 
          /> 
         
                                      <input type="file" 
          name="image" 
          id="image" 
          class="photo" 
          onchange="sendImage(this)" 
          />
         
                                  </form>
         
                              </span>
         
                          </li>
         
                          <li class="col-xs-6"><input type="text" 
          name="fname" 
          id="message"></li>
         
                          <li class="col-xs-4"><a href="" 
          data-role="button"
         
                              class="b_submit" 
          id="submitInfo" 
          onclick='sendMessage();'>发送</a></li>
         
                      </ul>
         
                  </div>
         
              </div>
         
          <!-- 隐藏域作为表单提交后页面不跳转使用 -->
         
              <iframe align="center" 
          frameborder="0" 
          marginheight="0" 
          marginwidth="0"
         
                  name="relnews" 
          id="hiddenIframe" 
          scrolling="no"
         
                  style="width: 100%; height: 100%; display: none"> </iframe>
         
          </body>
         
          <script src="<%=ctxPath%>/dwr/interface/Chat.js" 
          type="text/javascript"></script>
         
          <script src="<%=ctxPath%>/dwr/engine.js" 
          type="text/javascript"></script>
         
          <script src="<%=ctxPath%>/dwr/util.js" 
          type="text/javascript"></script>
         
          <script type="text/javascript" 
          src="../js/chat.js"></script>
         
          </html>
         
6、其他
dwr可以设置是否采用异步方式访问java代码：

     ?
    
          dwr.engine.setAsync(false);  //false为同步，true（默认）为异步
         
以及dwr对于异常的处理,这里标注一个简单的全局异常,细分的后续学习补充：

     ?
    
          dwr.engine.setErrorHandler(errh);
         
          function errh(errorString, exception) {
         
              errorFlag = true;
         
              alert("操作失败！");
         
          }

标签

#dwr dwr框架异步请求 #ssh ajax