DWR 3 反向Ajax试用

最近又看了看DWR，现在已经可以使用3.0版本了，以前只使用过1.0版的，试试了反向Ajax，感觉上方便了不少，可以方便的推送图片以及文字信息，大部分代码是参照官方示例。

先下载需要的Jar文件：

dwr

commons-io

commons-fileupload

这 里dwr 选择 dwr-3.0.0.116.rc1版

1.在Eclipse中新建立一个Dynamic Web Project

2.在Eclipse中，先把下载下来的Jar文件放到WEB-INF的lib目录下

3.新建三个类，JavaChat、Message和FileUploader

其中JavaChat用来实现文字的推送，Message用来包装要传送的信息

FileUploader用来实现图片的推送

JavaChat.java：

@RemoteProxy 
public
 class
 JavaChat { 
    @RemoteMethod 
    public
 void
 addMessage(String text) { 
        // 当信息超过10条时，清空信息列表 

        if
 (text != null
 && text.trim().length() > 0) { 
            messages.addFirst(new
 Message(text)); 
            while
 (messages.size() > 10) { 
                messages.removeLast(); 
            } 
        } 

        // 清空输入框内容 

        Util.setValue("text
", ""); 
        // 所有在访问当前页面中添加消息列表 

        Browser.withAllSessions(new
 Runnable() { 
            public
 void
 run() { 
                Util.addOptions("chatlog
", messages, "text
"); 
            } 
        }); 

    } 

    /** 
     * 消息列表 
     */
 
    private
 final LinkedList<Message> messages = new
 LinkedList<Message>();

 

Message.java：

@DataTransferObject 
public
 class
 Message { 
    @RemoteProperty 
    private
 String text; 

    public
 String getText() { 
        return
 text; 
    } 

    public
 void
 setText(String text) { 
        this
.text = text; 
    } 

    public
 Message(String text) { 
        this
.text = Security.replaceXmlCharacters(text); 
    } 

}

 

FileUploader.java：

@RemoteProxy 
public
 class
 FileUploader { 
    @RemoteMethod 
    public
 void
 uploadFile(BufferedImage uploadImage) { 
        final
 BufferedImage image = uploadImage; 
        Browser.withAllSessions(new
 Runnable() { 
            public
 void
 run() { 
                Util.setValue("image
", image); 
            } 
        }); 

    } 

}

 

这里的代码中使用DWR的Annotation，其中

@RemoteProxy用来标注类，表明此类是被远程页面所能访问的

@RemoteMethod用来标注方法，表明此方法允许远程访问

@DataTransferObject和@RemoteProperty分别用标注需要转换的类与属性，就是可以在JavaScript与Java之间转换的类及属性

4.配置一下web.xml把DWR的Servlet加上，同时加上允许反向Ajax的参数

<?xml version="1.0
" encoding="UTF-8
"?> 
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance
" 
    xmlns="http://java.sun.com/xml/ns/javaee
" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd
" 
    xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd
" 
    id="WebApp_ID
" version="2.5
"> 
    <display-name>Chat</display-name> 
    <welcome-file-list> 
        <welcome-file>index.html</welcome-file> 
        <welcome-file>index.htm</welcome-file> 
    </welcome-file-list> 
    <servlet> 
        <servlet-name>dwr-invoker</servlet-name> 
        <servlet-class
>org.directwebremoting.servlet.DwrServlet</servlet-class
> 
        <init-param> 
            <param-name>debug</param-name> 
            <param-value>true
</param-value> 
        </init-param> 
       <init-param> 
            <param-name>activeReverseAjaxEnabled</param-name> 
            <param-value>true
</param-value> 
        </init-param> 
       <init-param> 
            <param-name>classes</param-name> 
            <param-value>com.ujobedu.demo.dwr.JavaChat,com.ujobedu.demo.dwr.Message,com.ujobedu.demo.dwr.FileUploader</param-value> 
        </init-param> 
        <init-param> 
            <param-name>fileUploadMaxBytes</param-name> 
            <param-value>5000</param-value> 
        </init-param> 
   </servlet> 

    <servlet-mapping> 
        <servlet-name>dwr-invoker</servlet-name> 
        <url-pattern>/dwr/*</url-pattern> 
    </servlet-mapping> 
</web-app>

 

设定activeReverseAjaxEnabled为true，允许反向Ajax

classes参数来设定需要添加的接口类与转换类，就是前面所新建的。

fileUploadMaxBytes为最大上传文件长度

5.写一个HTML页面

<
!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 
<
html
>
 
<
head
>
 
<
meta
 http
-equiv
="Content-Type"
 content
="text/html; charset=UTF-8"
>
 
<
title
>
Insert title here</
title
>
 
<
script
 type
='text/javascript'
 src
='/Chat/dwr/engine.js'
>
</
script
>
 
<
script
 type
='text/javascript'
 src
='/Chat/dwr/util.js'
>
</
script
>
 
<
script
 type
='text/javascript'
 src
='/Chat/dwr/interface/JavaChat.js'
>
</
script
>
 
<
script
 type
='text/javascript'
 src
='/Chat/dwr/interface/Message.js'
>
</
script
>
 
<
script
 type
='text/javascript'
 src
='/Chat/dwr/interface/FileUploader.js'
>
</
script
>
 
<
script
 type
="text/javascript"
>
 
dwr.engine.setActiveReverseAjax(true); 
function sendMessage() { 
  JavaChat.addMessage(dwr.util.getValue("text")); 
} 
function uploadFile() { 
    var image = dwr.util.getValue('uploadImage'); 
    FileUploader.uploadFile(image); 
} 

</
script
>
 
</
head
>
 
<
body
>
 
<
p
>
要发送的消息: 

<
input
 id
="text"
    onkeypress
="dwr.util.onReturn(event, sendMessage)"
 />


<
input
    type
="file"
 id
="uploadImage"
 />
 

<
input
 type
="button"
 value
="发送消息"
    onclick
="sendMessage()"
 />


<
button
 onclick
="uploadFile()"
>
发送图片</
button
>
 
    </
p
>
 
<
hr
 />
 
<
ul
 id
="chatlog"
>
</
ul
>
 
<
img
 id
="image"
 src
="javascript:void(0);"
/>
 

</
body
>
 
</
html
>


在页面中先引用需要js

 

<script type='text/javascript' src='/Chat/dwr/engine.js'></script>
<script type='text/javascript' src='/Chat/dwr/util.js'></script>
<script type='text/javascript' src='/Chat/dwr/interface/JavaChat.js'></script>
<script type='text/javascript' src='/Chat/dwr/interface/Message.js'></script>
<script type='text/javascript' src='/Chat/dwr/interface/FileUploader.js'></script>

分别是：

engine.js----------------DWR的工作引擎

util.js-------------------DWR的js工具库

JavaChat.js-------------JavaChat类的js接口

Message.js-------------Message类的js转换

FileUploader.js--------FileUploader类的js接口

<script type="text/javascript
"> 
dwr.engine.setActiveReverseAjax(true
); 
function
 sendMessage() { 
  JavaChat.addMessage(dwr.util.getValue("text
")); 
} 
function
 uploadFile() { 
    var
 image = dwr.util.getValue('uploadImage'); 
    FileUploader.uploadFile(image); 
} 

</script> 

 

在js代码段中首先通过dwr.engine.setActiveReverseAjax(true)来设定反向Ajax工作模式

sendMessage函数用来传递输入框的字符

uploadFile函数用来传递文件输入框的图片数据

发布到Tomcat上后，就可以访问看看效果了，打开两个浏览器访问工程的地址，在输入框中随便输入点什么，点发送消息，可以看到另一个浏览器中也会相应更新，同样的传一个图片，可以在另一端看到相同的效果。

只是目前在Chrome与Safari中有问题，无法传图片，uploadFile函数无法响应，可能是因为对于WebKit内核DWR支持的不太好，不过从官方上的问题列表来看，rc2版应该可以解决。