一个简单的DWR框架实例

朴灿烈づ我的快乐病毒、 2022-06-13 09:54 218阅读 0赞

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

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

![164315_sR8u_1790925.png][]

--------------------

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>

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

b)配置dwr``

<?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN"
            "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>

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+)

这里初学，实用java new创建对象。

--------------------

4、页面配置

页面需要引入3个JS

其中engine.js必须要，如果需要用到dwr提供的一些方便的工具要引用util.js ，然后是dwr自动生成的js文件，名字必须和dwr.xml中create标签的javascript属性值一样，且必须是dwr/interface开头的目录

(千万不要这样干：曾经反编译别人代码学习时将这三个js反编译后放到本地。。结果无法执行。ps：必须要自己生成)

5、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" οnlοad="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" οnchange="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" οnclick='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("操作失败！");
    }

[http_directwebremoting.org_dwr_downloads_index.html]: http://directwebremoting.org/dwr/downloads/index.html
[164315_sR8u_1790925.png]: /images/20220613/9a17d05e69084213a97fca8985c8d0b0.png