`
lucifinilhades
  • 浏览: 86818 次
  • 性别: Icon_minigender_1
  • 来自: 苏州
社区版块
存档分类
最新评论

DWR支持的反向Ajax技术

阅读更多

反向Ajax的基本概念是客户端不必从服务器获取信息,服务器会把相关信息直接推送到客户端。这样做的目的是解决Ajax传统Web模型所带来的一个限制,即实时信息很难从技术上解决。原因是,客户端必须联系服务器,主动询问是否存在变更,如果有变更就会更新页面(或者页面的一部分)。虽然可以非常快速地完成这个操作,感觉好像是实时的,但是实际上不是的。我们需要的是,服务器联系查看其页面的所有浏览器,并通告所发生的变更。

反向Ajax是克服这个限制的一种方式。在基于Ajax的应用程序的事件序列中,某个用户动作会导致对某个客户端Ajax引擎的调用,不论它是JavaScript代码,还是其他库。这个引擎会向服务器发出一个请求,服务器按非Ajax模式进行处理,然后返回响应。响应内容首先被Ajax引擎处理,然后调用某些客户端代码以更新页面。直到用户离开当前页面。

现在共有三种DWR支持的技术可以辅助完成这种技术,其中两种技术属于主动的反向Ajax,另一种称为被动的反射Ajax。

轮询

在未使用Ajax的Web页面,使用meta刷新元素,每隔数秒就更新这个页面。这就是所说的轮询。客户端定时轮询服务器,看是否存在更新,并且显示服务器传回的当前信息。在网页上,使用一些简单的JavaScript代码也可以实现相同的功能。在Ajax中,事件流会更复杂,但本质是一样的,轮询技术是一种主动式反向Ajax技术,客户端在每个时间周期内向服务器发送请求,查询服务器是否有更新内容,若有则向服务请求数据。

Comet

Comet是一种基于HTTP长连接的服务器推动方式。客户端向服务器发送请求后,服务器将数据通过response发送给客户端,但并不会将此response关闭,而是一直通过response将最新的数据发送给客户端浏览器,直到客户端浏览器关闭。使用Ajax实现“服务器推”与传统的Ajax应用的不同之处在于:

  • 服务器端会阻塞请求直到有数据传递或超时才返回;
  • 客户端JavaScript响应处理函数会在处理完服务器返回信息后,再次发出请求,重新建立连接;
  • 当客户端处理接收的数据、重新建立连接时,服务器端可能有新的数据到达,这些信息会被服务器端保存直到客户端重新建立连接,客户端会一次把当前服务器端的所有信息取回。

PiggyBack

PiggyBack(回传)方法是DWR提供的一种“被动式”方法。服务器端将最新的数据排成队列,然后等待客户端下一次请求,接收到请求后不将等待更新的数据发送给客户端。DWR会使用默认的设置PiggyBack,在这种情况下,启用反向Ajax时,不会导致服务器超载。

各反向Ajax的配置

要让DWR程序支持反向Ajax,只须在web.xml中的DWRServlet里添加一个初始化参数,添加内容为:

<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>classes</param-name>
    <param-value>org.lucifer.dwr.SendMessage</param-value>
  </init-param>
  <init-param>
    <param-name>activeReverseAjaxEnabled</param-name>
    <param-value>true</param-value>
  </init-param>
</servlet>
<servlet-mapping>
  <servlet-name>dwr-invoker</servlet-name>
  <url-pattern>/dwr/*</url-pattern>
</servlet-mapping>

如果使用的是轮询技术 ,则需要添加如下参数:

<init-param>
  <param-name>org.directwebremoting.extend.ServerLoadMonitor</param-name>
  <param-value>org.directwebremoting.impl.PollingServerLoadMonitor</param-value>
</init-param>

除了上述配置外,为启用反向Ajax,在页面中还需要一些JavaScript代码,即:

dwr.engine.setActiveReverseAjax(true);

处理轮询请求的过程通常是在服务器端编写一些代码,以更新附加到服务器端的每个客户端的会话。DWR会记录与之联系的每个客户端,分别存储每个客户端的会话。这与通常的HTTP会话不同。借助于此,可以调用JavaScript代码,下一个轮询请求会通知这些调用。例如:

package org.lucifer.dwr;

import java.util.Queue;
import java.util.concurrent.ConcurrentLinkedQueue;
import java.util.logging.Logger;
import org.directwebremoting.Browser;
import org.directwebremoting.ScriptSessions;
import org.directwebremoting.annotations.Param;
import org.directwebremoting.annotations.RemoteMethod;
import org.directwebremoting.annotations.RemoteProxy;
import org.directwebremoting.annotations.ScriptScope;
import org.directwebremoting.create.NewCreator;

@RemoteProxy(creator=NewCreator.class, name="sendMsg", scope=ScriptScope.APPLICATION,
		creatorParams=@Param(name="class", value="org.lucifer.dwr.SendMessage"))
public class SendMessage {
	private static final Logger logger = Logger.getLogger(SendMessage.class.getName());
	private Queue<String> messages = new ConcurrentLinkedQueue<String>();

	@RemoteMethod
	public void addMessage(String message) {
		StringBuilder sb = new StringBuilder("有客户请求,消息为:");
		sb.append(message);
		logger.info(sb.toString());
		messages.add(message);
		Browser.withCurrentPage(new Runnable() {
			/* 启用监听客户端当前页线程 */
			@Override
			public void run() {
				/* 把数据添加到客户端调用的方法中 */
				ScriptSessions.addFunctionCall("receiveMessages", messages);
			}
		});
	}
}

这里主要通过WebContext类获得DWR应用的Web上下文、利用ServletContext获得DWRServlet的上下文,以及通过Web上下文获取访问本应用的客户端浏览器的ScriptSession。一旦获得当前页面的名称,就可以获取当前连接到这个页面的所有会话列表,然后启用监听客户端当前线程,把数据添加到客户端调用的方法中。

下面是在客户端执行的JSP页面文件,代码如下:

<%@page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set var="basePath" value="${pageContext.servletContext.contextPath}"/>
<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="UTF-8"/>
        <title>DWR 示例</title>
		<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
		<script type="text/javascript">jQuery.noConflict();</script>
		<script type="text/javascript" src="${basePath}/dwr/engine.js"></script>
		<script type="text/javascript" src="${basePath}/dwr/interface/sendMsg.js"></script>
		<script type="text/javascript" src="js/dwr_simple.js"></script>
		<script type="text/javascript" src="${basePath}/dwr/util.js"></script>
    </head>
    <body>
        <form id="myForm" name="myForm">
			<label for="msg">请输入消息:</label>
			<input type="text" id="msg" name="msg" autocomplete="on" placeholder="请输入消息"/>
			<button type="button" name="sendMsg" id="sendMsg">反向Ajax测试</button>
		</form>
		<footer>
			<p><div id="console"></div></p>
		</footer>
    </body>
</html>

JavaScript代码在JS文件中,代码如下:

var receiveMessages = function(messages) {
	var tmp = jQuery('<p>');
	for(var item in messages) {
		jQuery("<span>").append(messages[item]).after("<br/>").prependTo(tmp[0]);
	}
	tmp.prependTo("#console");
};

jQuery(function() {
	dwr.engine.setActiveReverseAjax(true);

	jQuery("#sendMsg").click(function(event) {
		var msg = jQuery("#msg").val();
		sendMsg.addMessage(msg);
	});
});

 

分享到:
评论

相关推荐

    dwr的例子 反向AJAX 实现时时提醒

    总的来说,DWR通过反向AJAX技术简化了服务器和客户端之间的通信,使得开发实时更新的应用变得更加便捷。通过学习和理解DWR的工作原理以及如何在项目中应用,你可以创建出更加动态、响应式的Web应用程序。

    dwr反向Ajax的三种情况

    DWR提供了三种反向Ajax技术,分别是轮询、Comet和PiggyBack。 1. **轮询(Polling)**: 轮询是最基础的反向Ajax技术。客户端每隔一定时间(例如几秒或几十秒)就向服务器发送一个请求,询问是否有新数据。如果有...

    dwr课件,java,反向ajax

    它允许JavaScript在客户端与服务器端的Java对象之间进行直接调用,无需刷新页面,从而实现了所谓的“反向Ajax”或者“富互联网应用”(RIA)的功能。本课件主要涵盖了DWR的基本用法和常见操作,包括数据类型的处理、...

    dwr3.0反向实例

    DWR (Direct Web Remoting) 是一个开源Java库,它允许在浏览器和服务器之间进行实时的、异步的通信,即所谓的反向Ajax技术。在"DWR 3.0反向实例"中,我们将深入探讨这个版本的新特性、配置过程以及如何通过一个简单...

    dwr3ReverseAjax示例

    在描述中提到的“反向Ajax”(Reverse Ajax)是一种技术,它使得服务器可以主动向客户端推送数据,而不仅仅局限于客户端发起请求后服务器响应的传统模式。DWR支持这种模式,通过建立持久连接或者利用浏览器的长轮询...

    反向ajax教程 (自己整理的两篇)

    DWR(Direct Web Remoter)是一个开源JavaScript库,它提供了反向Ajax的支持。启用DWR的反向Ajax功能只需在`web.xml`的DWRServlet配置中添加初始化参数`activeReverseAjaxEnabled`并设置其值为`true`。 反向Ajax的...

    DWR学习资料

    DWR学习资料 :DWR 3.0 上传文件.txt DWR3.0反向Ajax示例.txt DWR3.0...多人聊天室.doc 反向Ajax技术实例.txt 基于DWR反向AJAX的Web监控系统.doc 深入学习DWR3.0.txt 实战dwr.doc 使用Jetty和DWR创建伸缩性Comet程序.txt

    DWR让Ajax如此简单

    DWR(Direct Web Remoting)是一种JavaScript库,它允许Web应用程序实现服务器端与客户端之间的实时、双向通信,无需使用复杂的Ajax技术。DWR使得开发者能够像调用本地JavaScript函数一样轻松地调用服务器上的Java...

    反向ajax技术实现聊天室功能

    如果你还是停留在原来的ajax层面的话,这次绝对...DWR出2.0版了,其中最大的亮点就是Reverse Ajax技术!传统的浏览器发起请求服务器返回响应,而现在通过反向ajax可以由服务器向浏览器发响应但是不需要浏览器提供请求。...

    基于DWR反向AJAX的Web监控系统

    摘 要: 采用DWR框架和反向AJAX,结合Java多线程技术和Siemens Simatic S7-400 PLC TCP/IP通讯模块CP243-1 IT,开发了新的Web监控系统,并应用在供热公司供热管路监控系统中。其替代了原有的C/S模式的工业控制机,...

    反向ajax聊天简单例子

    总结,"反向Ajax聊天简单例子"是一个学习反向Ajax技术的实践项目,通过DWR框架实现了服务器主动推送消息的聊天功能。理解并实践这个例子,有助于开发者掌握Ajax的高级用法,提升Web应用的实时性和互动性。

    反向Ajax的聊天室

    总结来说,反向Ajax聊天室是利用DWR框架实现的一种Web应用,它利用Ajax技术提供实时的聊天体验,而不需要用户频繁刷新页面。《基于J2EE的Ajax宝典》提供了详细的教学指导,涵盖了从服务器端到客户端的完整实现过程。...

    Dwr 官方Reverse Ajax Demo

    DWR是基于AJAX技术的,但其提供了更高级的功能,如Reverse Ajax和自动类型转换,使得开发者可以更专注于业务逻辑,而无需过多关注底层通信细节。AJAX主要负责局部页面更新,而DWR则扩展了这一概念,使得服务器可以...

    AJAX技术之DWR框架入门

    **AJAX技术之DWR框架入门** AJAX(Asynchronous JavaScript and XML)是一种在无需刷新整个页面的情况下,能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换,使得网页实现异步更新。这种技术可以提升...

    Comet,反向Ajax,直接就能跑

    dwr comet 反向ajax实力 直接抛 我打了一个包, 放到Tomcat,jetty下面就能直接跑了 很方便 还有注视 对新手 。。。。很好的

    反向Ajax的小例子

    dwr实现的在线即时聊天demo,比较简化的一个反向ajax例子, &lt;br&gt;everse Ajax主要是在BS架构中,从服务器端向多个浏览器主动推数据的一种技术。它的一种实现就是客户端向服务器请求后,服务器不立即回应,从而导致一...

    DWR AJAX框架(包含使用教程)

    DWR的核心概念是反向Ajax,它创建了一种机制,使得JavaScript可以直接调用服务器端的Java方法,就像它们是本地函数一样。这样,开发者可以轻松地将服务器端的功能暴露给前端,而无需手动处理XMLHttpRequest对象。 ...

    java_ajax框架dwr

    1. **反向Ajax(Reverse Ajax)**:DWR的核心是反向Ajax技术,它打破了传统的请求-响应模式,允许服务器主动推送数据到客户端,而不必等待用户的触发。 2. **Java远程调用(Remote Method Invocation, RMI)**:DWR...

    Ajax框架:简单的dwr实例

    1. **Reverse AJAX**:DWR的核心特性之一是反向AJAX,即服务器主动向客户端推送数据,而不仅仅是响应客户端的请求。这使得用户界面可以实时更新,提高了用户体验。 2. **JavaBeans与JavaScript对象映射**:DWR自动...

Global site tag (gtag.js) - Google Analytics