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

DWR支持的反向Ajax技术

DWRAjaxJava Web 
阅读更多

反向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的应用过程
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    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自动...

Magicbox
Global site tag (gtag.js) - Google Analytics