使用DWR进行反向Ajax操作的例子

最新推荐文章于 2025-08-06 09:41:34 发布

昆山人在上海

最新推荐文章于 2025-08-06 09:41:34 发布

阅读量1.6k

点赞数

CC 4.0 BY-SA版权

分类专栏： Java相关 Ajax技术文章标签： dwr ajax servlet encoding 聊天 javascript

本文链接：https://blog.youkuaiyun.com/kunshan_shenbin/article/details/3443987

Java相关同时被 2 个专栏收录

392 篇文章

订阅专栏

Ajax技术

103 篇文章

订阅专栏

本文介绍了一个基于反向Ajax技术实现的简单聊天室应用。该应用通过DWR框架连接前端与后端Java，实现了消息的实时发送与接收功能，并且能够保留最近10条聊天记录。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如下图所示建立工程：

代码如下：

ChatMsg.java

 
 package lee;
public class ChatMsg
{
    private String text;
    public ChatMsg()
    {
    }
    public ChatMsg(String text)
    {
        this.text = text;
    }
    public String getText()
    {
        return text;
    }
    public void setText(String text)
    {
        this.text = text;
    }
}

JavaChat.java

 
 package lee;
import java.util.Collection;
import java.util.LinkedList;
import org.directwebremoting.WebContext;
import org.directwebremoting.WebContextFactory;
import org.directwebremoting.proxy.dwr.Util;
public class JavaChat
{
    private LinkedList<ChatMsg> messages = new LinkedList<ChatMsg>();
    public void addMessage(String text)
    {
        if (text != null && text.trim().length() > 0)
        {
            messages.addFirst(new ChatMsg(text));
            //最多保留10条聊天记录 
            while (messages.size() > 10)
            {
                messages.removeLast();
            }
        }
        WebContext wctx = WebContextFactory.get();
        String currentPage = wctx.getCurrentPage();
        //清除输入文本框的内容 
        Util utilThis = new Util(wctx.getScriptSession());
        utilThis.setValue("text", "");
        //获取当前页的所有客户端 
        Collection<?> sessions = wctx.getScriptSessionsByPage(currentPage);
        Util utilAll = new Util(sessions);
        utilAll.removeAllOptions("chatlog");
        //将messages集合中的元素的text属性添加成选项 
        utilAll.addOptions("chatlog" , messages , "text");
    }
}

dwr.xml

 
 <?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN"
    "http://getahead.ltd.uk/dwr/dwr20.dtd">
<dwr>
    <allow>
        <create creator="new" javascript="JavaChat" scope="application">
            <param name="class" value="lee.JavaChat" />
        </create>
        <convert converter="bean" match="lee.ChatMsg" />
    </allow>
</dwr>

web.xml

 
 <?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://java.sun.com/xml/ns/j2ee"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd"
    version="2.4">
    <!-- 配置DWR的核心Servlet -->
    <servlet>
        <!-- 指定DWR核心Servlet的名字 -->
        <servlet-name>dwr-invoker</servlet-name>
        <!-- 指定DWR核心Servlet的实现类 -->
        <servlet-class>uk.ltd.getahead.dwr.DWRServlet</servlet-class>
        <!--  指定DWR核心Servlet处于调试状态 -->
        <init-param>
            <param-name>debug</param-name>
            <param-value>true</param-value>
        </init-param>
        <!-- 设置使用反向Ajax技术 -->
        <init-param>
            <param-name>pollAndCometEnabled</param-name>
            <param-value>true</param-value>
        </init-param>
        <load-on-startup>1</load-on-startup>
    </servlet>
    <!-- 指定核心Servlet的URL映射 -->
    <servlet-mapping>
        <servlet-name>dwr-invoker</servlet-name>
        <!-- 指定核心Servlet映射的URL -->
        <url-pattern>/leedwr/*</url-pattern>
    </servlet-mapping>
</web-app>

java-chat.html

 
 <html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>反向Ajax的聊天室</title>
    <script type='text/javascript' src='./leedwr/engine.js'> </script>
    <script type='text/javascript' src='./leedwr/interface/JavaChat.js'> </script>
    <script type='text/javascript' src='./leedwr/util.js'> </script>
    <script type="text/javascript">
        function sendMessage() {
            JavaChat.addMessage(dwr.util.getValue("text"));
        }
    </script>
</head>
<body onload="DWREngine.setActiveReverseAjax(true);">
    <h1>
        反向Ajax的聊天室
    </h1>
    <div style="width: 460px; height: 200px; border: 1px solid #999999">
        <ul id="chatlog"></ul>
    </div>
    <p>
        输入您的聊天信息
        <input id="text" onkeypress="dwr.util.onReturn(event, sendMessage)" />
        <input type="button" value="发送" onclick="sendMessage()" />
    </p>
</body>
</html>