DWR入门教程2 服务器端push技术

前面一章讲解了DWR页面js代码如何直接调用后台服务器端java方法，今天这一章讲解如何在服务器端之间push数据到页面。

一。工程还沿用上一节的DwrDemo工程（不懂的可以先查看下上一章的内容）

首先需要修改web.xml文件

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
	http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
	<display-name></display-name>
	<welcome-file-list>
		<welcome-file>index.jsp</welcome-file>
	</welcome-file-list>
	
	<!-- 配置DWR -->
	<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>
		<span style="color:#ff0000;"><!-- 开启DWR反向ajax功能 -->
		<init-param>
			<param-name>activeReverseAjaxEnabled</param-name>
			<param-value>true</param-value>
		</init-param></span>
		
	</servlet>

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

然后：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>Dwr Demo</title>
<Meta http-equiv="pragma" content="no-cache">
<Meta http-equiv="cache-control" content="no-cache">
<Meta http-equiv="expires" content="0">
<script type='text/javascript' src='/DwrDemo/dwr/engine.js'></script>
<script type='text/javascript' src='/DwrDemo/dwr/util.js'></script>
<script type='text/javascript' src='/DwrDemo/dwr/interface/DwrDemo.js'></script>
<script type="text/javascript">
	function dwrdemo() {
		//调用服务器段的DwrDemo类的getServerData方法,serverReturn是回调方法
		DwrDemo.getServerData(serverReturn);
	}
	function serverReturn(data) {
		dwr.util.setValue("val",data);
	}
	function dwrdemo1() {
		DwrDemo.getPerson(serverReturn1);
	}
	function serverReturn1(data) {
		dwr.util.setValue("val1",data.name + ":" + data.age + ":"
				+ data.address);
	}
	
	<span style="color:#ff0000;">//服务器端会调用这个js来向前端的输入框里面设置数据
	function serverPush(data) {
		var v = dwr.util.getValue("Box") ;
		dwr.util.setValue("Box",v+data) ;
	}</span>
</script>
</head>

<span style="color:#ff0000;"><!-- 需要在页面onload的时候设置反向ajax是true -->
<body onload="dwr.engine.setActiveReverseAjax(true);"></span>
	<button name="btn" onclick="dwrdemo()" title="click me">click
		me</button>
	返回值:
	<input type="text" id="val" name="val">

	<button name="btn1" onclick="dwrdemo1()">获得用户</button>
	用户信息:
	<input type="text" id="val1" name="val1">
	<div>
		<input type="text" id="Box" name="Box">
	</div>
</body>
</html>

最后修改java代码：

package cn.gov.zjport.dwr;

import java.util.Collection;

import org.directwebremoting.ScriptBuffer;
import org.directwebremoting.ScriptSession;
import org.directwebremoting.proxy.dwr.Util;

import uk.ltd.getahead.dwr.WebContext;
import uk.ltd.getahead.dwr.WebContextFactory;

public class DwrDemo {

	public String getServerData() {
		serverPush();
		return "Message from server";
	}

	public Person getPerson() {
		Person person = new Person();
		person.setName("张三");
		person.setAge(32);
		person.setAddress("杭州下城区");
		return person;
	}
	<span style="color:#ff0000;">/**
	 * 开启一个线程用来定时的向前端来push数据
	 */
	public void serverPush() {
		d dd = new d(getSessions());
		dd.start();
	}
	
	public Collection<ScriptSession> getSessions(){
		WebContext content = WebContextFactory.get();
		Collection<ScriptSession> session = content.getAllScriptSessions();
		return session ;
	}</span>

}

class d extends Thread {

	private Collection<ScriptSession> sessions;
	
	
	public d(Collection<ScriptSession> sessions) {
		this.sessions = sessions;
	}

	@Override
	public void run() {
		int i = 1;
		while (true) {
			for (ScriptSession session : sessions) {
				push(i,session);
			}
			i++;
			try {
				Thread.sleep(2000);
			} catch (Exception ex) {
				ex.printStackTrace();
			}
		}
	}
	
	<span style="color:#ff0000;">/**
	 * 调用前端js方法:serverPush(data)
	 * @param i
	 * @param session
	 */
	public void push(int i,ScriptSession session) {
		ScriptBuffer buffer = new ScriptBuffer();
		buffer.appendScript("serverPush(");
		buffer.appendData(i);
		buffer.appendScript(")");
		Util util = new Util(session);
		util.addScript(buffer);
		System.out.println("----");
	}</span>
}

运行结果：

首先开启几个窗口然后点击其中一个串口的click me按钮会发现其他窗口的最后一个输入框也会出现数据:

第一幅图：

第二幅图：

DWR入门教程2 服务器端push技术

猜你在找的Ajax相关文章