反向ajax小例子

liaokang.java

浏览: 152750 次
性别:
来自: 湖南

最近访客更多访客>>

860548048

sywillis

fss900717

lzw1211

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

ajax

Ajax DWR 浏览器 Bean XML

所谓反向ajax是指服务器端通过一系列API来控制浏览器端元素，实际上反向控制只是一种形象的说法，能够操作浏览器页面元素的只能是客户端脚本，只是在服务器端加入一系列操作客户端元素的API这样问题就解决了
既然要实现反向ajax，首先要设置反向ajax的参数，在web.xml中设置参数

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

客户端页面在加载的时候需要指定
<body onload="dwr.engine.setActiveReverseAjax(true);">
完整代码如下，客户端页面

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<title>利用反向ajax实现页面聊天</title>

		<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
		<meta http-equiv="description" content="this is my page">
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">

		<script type="text/javascript" src="dwr/interface/DWRHelper.js"></script>
		<script type="text/javascript" src="dwr/engine.js"></script>
		<script type="text/javascript" src="dwr/util.js"></script>
		<script type="text/javascript">
		function sendMessage(){
			DWRHelper.addMessage(dwr.util.getValue("myText"));
		}
	</script>

	</head>

	<body onload="dwr.engine.setActiveReverseAjax(true);">
	
		<input type="text" id="myText" />
		<input type="button" value="发送" onclick="sendMessage()" />
		
		<div style="width: 300px; height: 300px; border: 1px solid blue">
			<ul id="chatlog"></ul>
		</div>
	</body>
</html>

src="dwr/interface/DWRHelper.js"中的DWRHelper必须与DWRHelper.addMessage(...)名称必须相一致

服务器端代码如下

package com.lamp;

import java.util.Collection;
import java.util.LinkedList;

import org.directwebremoting.WebContext;
import org.directwebremoting.WebContextFactory;
import org.directwebremoting.proxy.dwr.Util;

public class DWRHelper {
	LinkedList<Message> messages = new LinkedList<Message>();
	public void addMessage(String text) {
		
		if (text.trim().length() > 0 || text != null) {
			messages.addFirst(new Message(text));
			while (messages.size() > 10) {
				messages.removeLast();
			}
		}
		System.out.println(text);
		WebContext context = WebContextFactory.get(); // 获得容器上下问

		String currentPage = context.getCurrentPage(); // 获得当前页面

		Util util = new Util(context.getScriptSession());

		util.setValue("myText", ""); // 清空当前编辑框

		Collection sessions = context.getScriptSessionsByPage(currentPage); // 打开当前页面的所有会话集合

		Util utilAll = new Util(sessions);

		utilAll.removeAllOptions("chatlog");		//清空原来列表的内容

		utilAll.addOptions("chatlog", messages, "text");	//将消息显示在列表中

	}

}

bean类Message如下

package com.lamp;

public class Message {
	private String text;

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

	public String getText() {
		return text;
	}

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

}

dwr.xml需设置为

<create javascript="DWRHelper" creator="new"
			scope="application">
			<param name="class" value="com.lamp.DWRHelper"></param>
		</create>
		<convert match="com.lamp.Message" converter="bean">
			<param name="include" value="id,text"></param>
		</convert>

分享到：