【转】反向AJAX

原文链接:http://blog.csdn.net/lccone/article/details/7743886

反向Ajax的基本概念是客户端不必从服务器获取信息,服务器会把相关信息直接推送到客户端。这样做的目的是解决Ajax传统Web模型所带来的一个限制:实时信息很难从技术上解决。原因是,客户端必须联系服务器,主动询问是否存在变更,如果有变更就会更新页面(或者页面的一部分)。虽然可以非常快速完成这个操作,让人感觉好像是实时的,但是实际上不是实时的。我们需要的是,服务器联系查看其页面的所有浏览器,并通告所发生的变更。
反向Ajax是克服这个限制的一种方式。像Ajax本身一样,这不是一门专门的技术,而是按照不寻常方式组合使用已有的技术达到不寻常的效果。
传统的Web模式(也就是非Ajax的应用程序)有一系列鲜明的事件。简单来说,用户在客户端的一个动作会导致向服务器发出一个请求,然后服务器按照请求进行相应处理,并把处理结果作为响应传回客户端,这个响应通常是一个完整的新的UI视图。这种处理过程反复循环,直到用户决定离开当前Web站点。在基于Ajax的应用程序的事件序列中,某个用户动作会导致对某个客户端Ajax引擎的调用,不论它是JavaScript代码,还是其他库。这个引擎会向服务器发出一个请求,服务器按照非Ajax模式进行处理,然后返回响应。响应内容首先被Ajax引擎处理,然后调用某些客户端代码以更新页面。同样,这个循环会无止境进行,直到用户离开当前页面。

现在总共有三种DWR支持的技术可以辅助完成这种技术,其中两种技术都属于"主动的"反向Ajax,第三种被认为是"被动的"反向Ajax。下面逐个讨论每种技术以及DWR提供的支持。

7.9.1 轮询
假设有个未使用AJAX的Web页面,使用<meta>刷新标签,每隔数秒就更新这个页面。这就是所说的轮询。客户端定时轮询服务器,看是否存在更新,并且显示服务器传回的当前信息。在网页上,使用一些简单的JavaScript代码以持续地更新页面,就可以实现相同的事情。确实,能够从表面实现所谓的推送,这就是轮询技术。
在Ajax中,事件流会更加复杂,但是实质上是一样的,轮询技术是两种主动式反向Ajax方法的一种,客户端在每个时间周期内向服务器发送请求,看看服务器端有没有数据更新,如果有,就向服务器请求数据。另一种主动式方法被称为Comet。
7.9.2 Comet(服务器推)
第二种主动式反向Ajax方法是Comet,这是一种基于HTTP长连接的服务器推动方式。客户端向服务器发送请求后,服务器将数据通过response发送给客户端,但并不会将此response关闭,而是一直通过response将最新的数据发送给客户端浏览器,直到客户端浏览器关闭。使用 AJAX 实现“服务器推”与传统的 AJAX 应用不同之处在于:
1. 服务器端会阻塞请求直到有数据传递或超时才返回。 
   2. 客户端 JavaScript 响应处理函数会在处理完服务器返回的信息后,再次发出请求,重新建立连接。 
   3. 当客户端处理接收的数据、重新建立连接时,服务器端可能有新的数据到达;这些信息会被服务器端保存直到客户端重新建立连接,客户端会一次把当前服务器端所有的信息取回。
7.9.3 PiggyBack(回传)
PiggyBack(回传)方法是DWR提供的一种“被动式”方法。服务器端将最新的数据排成队列,然后等待客户端下一次请求,接收到请求后就将等待更新的数据发给客户端。DWR会使用默认的设置是PiggyBack,所以在默认情况下,启用反向Ajax时,不会导致服务器超载。
7.9.4 反向Ajax的配置与实现
要让DWR程序支持反向AJAX,只需要在web.xml中DWRServlet里添加一个初始化参数,添加内容为:

<servlet>
    <servlet-name>dwr-invoker</servlet-name>
    <display-name>DWR Servlet</display-name>
    <description>Direct Web Remoter Servlet</description>
    <servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class>
<init-param>
         <param-name>activeReverseAjaxEnabled</param-name>
         <param-value>true</param-value>
     </init-param>
<init-param>
</init-param>
   </servlet>
<servlet-mapping>
    <servlet-name>dwr-invoker</servlet-name>
    <url-pattern>/dwr/*</url-pattern>
</servlet-mapping>  

如果应用的是轮询技术,则需要添加中下参数:
<param-name>org.directwebremoting.extend.ServerLoadMonitor</param-name>
<param-value>org.directwebremoting.impl.PollingServerLoadMonitor</param-value>
除了上述配置,为启用反向Ajax,在页面中还需要一些JavaScript代码,即:
dwr.engine.setActiveReverseAjax(true);
只需要上述代码和web.xml文件中的配置,就可以激活反向Ajax了。
处理轮询请求的过程通常是在服务器端编写一些代码,以更新附加到服务器端的每个客户端的会话。DWR会记录与之联系的每个客户端,分别存储每个客户端的会话。这一点与通常的HTTP会话不同。借助于此,可以调用JavaScript代码,下一个轮询请求会通知这些调用。下面就是一个处理轮询请求的例子,服务器端的发布者实现代码如下:

package com.ajax.dwr;
import java.util.LinkedList;
import java.util.List;
import org.directwebremoting.Browser;
import org.directwebremoting.ScriptSessions;
public class SendMessage {
public void addMessage(String message) {
   System.out.println("有客户请求,消息为:" + message);
   messages.add(message);
   Browser.withCurrentPage(new Runnable() {//启用监听客户端当前页线程
            public void run() {//把数据添加到客户端调用的方法中
                ScriptSessions.addFunctionCall("receiveMessages", messages);
            }
        });
}
private List<String> messages = new LinkedList<String>();
}  

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

<html>
<head>
<base href="<%=basePath%>">
<title>starting page</title>
<script type="text/javascript" src="dwr/interface/SendMessage.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()
   {
    var message=$("message").value;
    SendMessage.addMessage(message);
   }
   function receiveMessages(messages)
   {
     var chatlog = "";
     for (var data in messages) {
       chatlog = "<div>" + dwr.util.escapeHtml(messages[data]) + "</div>" + chatlog;
     }
     dwr.util.setValue("list", chatlog, { escapeHtml:false });
   }
</script>
</head>
<body onload="dwr.engine.setActiveReverseAjax(true);">
input message:
<input id="message" type="text" />
<input type="button" value="send" onclick="sendMessage()" />
<br>
<div id="list"></div>
</body>
</html>  

Util类有很多很方便的方法,其中一个是setValue()。这个方法类似于在客户端执行document.getElementById("list ").innerHTML = "",但是它会关注一些细节,比如目标元素是文本框或者其他元素。在此,使用所记录的Date域的当前值来更新list的内容。将第三个参数设为true,可以指定任何HTML内容,这样的话不会破坏客户端的任何内容
要用的java类在wr.xml文件配置内容如下:

<create javascript="SendMessage" creator="new" scope="application">
           <param name="class" value="com.ajax.dwr.SendMessage"></param>
</create>

如果不希望使用轮询方法,那么可以非常容易地切换为用Comet方法,只需要把web.xml文件中如下代码注释掉:
<param-name>org.directwebremoting.extend.ServerLoadMonitor</param-name>
<param-value>org.directwebremoting.impl.PollingServerLoadMonitor</param-value>

如果应用PiggyBack方法,则不需要在web.xml中DWRServlet里添加上述初始化参数。
该例子中完整的web.xml配置内容如下;

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee
http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
<!-- 配置DWR的核心Servlet -->
<servlet>
   <!-- 指定DWR核心Servlet的名字 -->
   <servlet-name>dwr</servlet-name>
   <servlet-class>
    <!-- 指定DWR核心Servlet的实现类 -->
    org.directwebremoting.servlet.DwrServlet
   </servlet-class>
   <!-- 指定DWR核心Servlet处于调试状态 -->
   <init-param>
    <param-name>debug</param-name>
    <param-value>true</param-value>
   </init-param>
   <!-- 设置使用反向Ajax技术 -->
   <init-param>
    <param-name>activeReverseAjaxEnabled</param-name>
    <param-value>true</param-value>
   </init-param>
   <init-param>
    <param-name>
     initApplicationScopeCreatorsAtStartup
    </param-name>
    <param-value>true</param-value>
   </init-param>
   <init-param>
   <!--长连接只保持时间 -->>
    <param-name>maxWaitAfterWrite</param-name>
    <param-value>60</param-value>
   </init-param>
   <load-on-startup>1</load-on-startup>
</servlet>
<!-- 指定核心Servlet的URL映射 -->
<servlet-mapping>
   <servlet-name>dwr</servlet-name>
   <url-pattern>/dwr/*</url-pattern>
</servlet-mapping>
<welcome-file-list>
   <welcome-file>index.jsp</welcome-file>
</welcome-file-list>
</web-app>  

发布文程序后,这里为了模拟多个用户操作,先打开两个窗口,然后在地址栏输入http://localhost:8081/Ajaxapp/GetMessage.jsp,在出现的两个页面中,分别输入不同的字符串后单击“发送”按钮,程序运行结果如图7-5所示。从运行的结果可以看出,当在一个页面发消息时,另一个页面也显示出的其他页面发送的消息。

时间: 2024-10-11 15:52:58

【转】反向AJAX的相关文章

08 comet反向ajax

一:HTTP协议与技久链接+分块传输---->反向ajax 反向ajax又叫comet, server push,服务器推技术. 应用范围: 网页聊天服务器,, 新浪微博在线聊天,google mail 网页聊天,都有用到. 原理: 一般而言, HTTP协议的特点, 连接<->断开. 具体什么时间断开? 服务器响应content-length,收到到指定length长度的内容时,也就断开了. 在http1.1协议中, 允许你不写content-length ,比如要发送的内容长度确实不知

http协议与分块传输,持久连接及反向ajax

web QQ都用过吧,这涉及到哪些技术,有一个就是反向ajax. 反向ajax又叫comet,server push,服务器推技术. 应用范围: 网页聊天服务器,, 新浪微博在线聊天,google mail 网页聊天,都有用到. 原理: 一般而言, HTTP协议的特点, 连接<->断开. 具体什么时间断开? 服务器响应content-length,收到到指定length长度的内容时,也就断开了. 在http1.1协议中, 允许你不写content-length,比如要发送的内容长度确实不知道时

HTTP 笔记与总结(9)分块传输、持久链接 与 反向 ajax(comet / server push / 服务器推技术)

反向 ajax 又叫 comet / server push / 服务器推技术 应用范围:网页聊天服务器,例如新浪微博在线聊天.google mail 网页聊天 原理:一般而言,HTTP 协议的特点是,连接之后断开连接(服务器响应 Content-Length,收到了指定 Length 长度的内容时,也就断开了).在 HTTP 1.1 协议中,允许不写 Content-Length,比如要发送的内容长度确实不知道,此时需要一个特殊的 Content-Type:chunked,叫做分块传输,只有当

20150220 Comet反向Ajax技术-在线客服系统之服务端

20150220 Comet反向Ajax技术-在线客服系统之服务端 2015-02-20 李海沿 前面我们讲了comet反向Ajax模型原理 以及实现了简单的实时页面聊天系统. (地址:http://www.cnblogs.com/lihaiyan/p/4281049.html) 本文中,我们在它的基础上来实现一个在线客服系统的服务端. 一.搭建页面客服系统框架 1.首先新建一个kefu.html网页 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01

反向Ajax之Socket.io

1.什么是反向ajax? 传统的ajax的困惑? 新需求--当服务器端数据发生变化时,客户端(浏览器端)如何即时得到通知呢? 找一些实际的案例:客服系统.在线聊天 这类应用,有一个显著的特点: 数据并不是单向的,原来的数据,都是从浏览器端向服务器端发起请求,然后获取数据. 现在的需求发生变化了,有时候,数据是从服务器端 推送 到浏览器端. 前面所有的http请求/响应模型都是基于单向的,包括ajax. 从服务端向浏览器端推送数据的这种ajax应用,称之为反向ajax. 2.常见解决方案   有以

php开发客服系统(持久连接+轮询+反向ajax)

欢迎在php严程序 - php教程学习AJAX教程, 本节课讲解:php开发客服系统(持久连接+轮询+反向ajax) php开发客服系统(下载源码) 用户端(可直接给客户发送消息)客服端(点击用户名.即可给该用户回复消息) 讲两种实现方式:一:iframe + 服务器推技术comet(反向ajax,即服务器向浏览器推送数据)二:ajax持久连接 + 长轮询 客服端采用第一种方式:iframe + 服务器推技术思路:1:新建comentbyiframe.php 该用文件使用while(true)一

反向Ajax:WebSocket

郭晨 软件151 1531610114 WebSocket 在HTML5中出现的WebSocket是一种比Comet还要新的反向Ajax技术,WebSocket启用了双向的全双工通信信道,许多浏览器(Firefox.Google Chrome和Safari)都已对此做了支持.连接是通过一个被称为WebSocket握手的HTTP请求打开的,其用到了一些特殊的报头.连接会保持在活动状态,你可以使用JavaScript来写入和接收数据,就像是在使用一个原始的TCP套接口一样. WebSocket UR

Ajax、反向Ajax和WebSocket 概念

Ajax 异步的JavaScript和XML(Asynchronous JavaScript and XML,Ajax),一种可通过JavaScript来访问的浏览器功能特性,其允许脚本向幕后的网站发送一个HTTP请求而又无需重新加载页面.Ajax的出现已经超过了十年,尽管其名字中包含了XML,但你几乎可以在Ajax请求中传送任何的东西,最常用的数据是JSON,其与JavaScript语法很接近,且消耗更少带宽.清单1给出了这样的一个例子,Ajax请求通过某个地方的邮政编码来检索该地的名称. 清

comet反向Ajax模型原理与模型(笔记一)

comet反向Ajax模型原理与模型(笔记一) 网页实时聊天有两种方式: 第一种:不断的查询是否有新消息,耗费资源,并非真正的实时 第二种:使用反向Ajax,页面不断开,一有数据就立即发送,真正的实时 我们先简单做一个页面不断开的浏览器页面: 1 ob_start(); 2 3 <?php 4 5 /* 反向Ajax原理 6 7 * comet 反向ajax 8 9 * 又叫服务器推技术 server push 10 11 * 在"实时聊天","消息推送"中,

Comet反向ajax技术实现客服聊天系统

说明:Comet反向Ajax是在看了燕十八老师的视频以后,结合他讲解的例子,自己用ajax+java实现了一遍.在这里把代码贴出来,以供大家学习.同时,ajax轮询技术也可以用在消息推送的功能中,下次有时间,可以把相关的代码和设计思路贴出来,一起学习学习! 客户端代码: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>客户端</title> 5 6 <meta http-equiv="ke