DWR学习及应用(三，ajaxReverse demo)

最新推荐文章于 2024-09-26 13:54:19 发布

最新推荐文章于 2024-09-26 13:54:19 发布 · 131 阅读

文章标签：

#DWR #应用服务器 #JavaScript #JSP #配置管理 #ViewUI

dwr 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何通过DWR框架的AJAXReverse技术实现服务器端向客户端推送消息的功能。主要步骤包括配置web.xml启用反向AJAX、编写服务器端代码、设置DWR配置文件以及客户端页面加载设置。

效果：服务器端发出消息，各个客户端及时接受消息。

1，要使用dwr的ajaxReverse 技术首先要在web.xml里给dwr的servlet加上下列参数配置：

<param-name>activeReverseAjaxEnabled</param-name>
 <param-value>true</param-value>

2，服务器端代码：

public class MyReverse {

	
	public void sendMes(String mes){
		send("系统消息："+mes);
	}
	public void send(final String output) {
        String page = ServerContextFactory.get().getContextPath() + "/client.jsp";
        Browser.withPage(page, new Runnable() {
            public void run() {
                Util.setValue("news", output);  //news 客户端级水平里面textarea的id
            }
        });
    }

}

3.dwr配置：

 <create javascript="myrevsrse" creator="new">
        <param name="class" value="com.dwr.MyReverse"/>
    </create>

3.服务端（server.jsp用于发消息也就是管理员界面）

<html>
		<script type="text/javascript" src="dwr/engine.js"></script>
		<script type="text/javascript" src="dwr/util.js"></script>
		<script type="text/javascript" src="dwr/interface/myrevsrse.js"></script>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<script type="text/javascript">
function sendnews(){
  var new_content = ${'newcontent'}.value;
  myrevsrse.sendMes(new_content);
}
</script>
</head>
<body>
<input type="text" name="newcontent">
<input type = "button" value="发消息" onclick="sendnews()"/>
</body>

客户端：

<html>
		<script type="text/javascript" src="dwr/engine.js"></script>
		<script type="text/javascript" src="dwr/util.js"></script>
<head>
<<script type="text/javascript">

</script>
</head>
<body onload="dwr.engine.setActiveReverseAjax(true);">
<textarea rows="20" cols="20" id="news"></textarea>
</body>
</html>

测试：

我们打开一个服务端，2和客户端：（请大家务必放大看，ctrl+鼠标滑轮滚动。）