30分钟速成：服务器主动推送的反向Ajax与Comet实现

需积分: 3 18 浏览量更新于2024-08-30 1 收藏 124KB PDF 举报

反向Ajax是一种创新的Web开发技术，旨在改善用户体验，通过模拟服务器主动向客户端推送事件，而非传统的客户端发起请求模式。本文将深入探讨两种主要实现方式：Comet和WebSocket，以及它们在特定场景下的应用。 **场景分析：** 1. **新邮件通知**：在实时通信应用中，如邮件客户端，用户无需频繁刷新就能接收到新邮件的通知，提高效率。 2. **二维码扫描**：当用户扫描二维码后，页面无需用户操作即可自动跳转，简化交互流程。 3. **聊天室功能**：多人在线聊天环境中，只要有人发言，所有在线用户能立即看到更新，增强即时通讯体验。 **Comet技术介绍：** Comet是一种利用标准的Ajax请求实现服务器向客户端推送数据的技术。它的核心在于保持客户端与服务器的持久连接，而非每次请求都创建新的连接。通过Ajax不断向服务器发送请求，服务器将事件存储在队列中，当事件发生时，服务器处理请求并发送回客户端，然后删除对应的请求，如此循环。 **Java代码示例：** ```java <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> ... <% String path = request.getContextPath(); %> ... <!DOCTYPE html> <html lang="en"> <head> <title>WebSocket</title>  </head> <body> ...  </body> </html> ``` **WebSocket技术：** WebSocket是一种全双工通信协议，它允许服务器主动发送消息给客户端，而不仅仅是响应客户端的请求。相比于Comet，WebSocket提供了一个更高效且持久的连接，减少了来回握手的开销。它使得实时双向通信成为可能，对于聊天室、游戏等应用场景更为适用。 **实现要点：** - 在Struts2或SpringMVC框架中，反向Ajax的实现通常不直接集成，开发者需要自行设计或使用第三方库。 - Servlet的配置通常使用注解，但具体实现可能因库的不同而有所差异，这部分内容需要参考额外的资料进行学习。反向Ajax通过Comet和WebSocket技术，提升了用户体验，尤其适用于需要实时交互的场景。掌握这些技术，开发者能够更好地构建高效的Web应用程序，尤其是在处理消息推送、实时数据更新等方面。

反向反向Ajax 30分钟快速掌握分钟快速掌握

场景1：当有新邮件的时候，网页自动弹出提示信息而无需用户手动的刷新收件箱。

场景2：当用户的手机扫描完成页面中的二维码以后，页面会自动跳转。

场景3：在类似聊天室的环境中有任何人发言，所有登录用户都可以即时看见信息。

与传统的MVC模型请求必须从客户端发起由服务器响应相比，使用反向Ajax能够模拟服务器端主动向客户端推送事件从而提

高用户体验。本文将分两个部分讨论反向Ajax技术，包括：Comet和WebSocket。文章旨在演示如何实现以上两种技术手

段，Struts2或SpringMVC中的应用并未涉及。此外，Servlet的配置也采用注解的方式，相关知识大家可以参考其它资料。

一、一、Comet（最佳的兼容手段）（最佳的兼容手段）

Comet本质上则是这样的一种概念：能够从服务器端向客户端发送数据。在一个标准的 HTTP Ajax 请求中，数据是发送给服

务器端的，反向 Ajax 以某些特定的方式来模拟发出一个 Ajax 请求，这样的话，服务器就可以尽可能快地向客户端发送事件。

由于普通HTTP请求往往会伴随页面的跳转，而推送事件则需要浏览器停留在同一个页面或者框架下，因此Comet的实现只能

够通过Ajax来完成。

它的实现过程如下：页面加载的时候随即向服务器发送一条Ajax请求，服务器端获取请求并将它保存在一个线程安全的容器中

（通常为队列）。同时服务器端仍然可以正常响应其他请求。当需要推送的事件到来的时候，服务器遍历容器中的请求在返回

应答后删除。于是所有停留在页面中的浏览器都会获得该应答，并再次发送Ajax请求，重复上述过程。

<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding="UTF-8"%>

String path = request.getContextPath();

String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()

+ path + "/";

<!DOCTYPE html>

<head>

<title>WebSocket</title>

$(function() {

connect();

$("#btn").click(function() {

var value = $("#message").val();

$.ajax({

url : "longpolling?method=onMessage&msg=" + value,

cache : false,

dataType : "text",

success : function(data) {

}

});

function connect() {

$.ajax({

url : "longpolling?method=onOpen",

cache : false,

下载后可阅读完整内容，剩余3页未读，立即下载

weixin_38600341

粉丝: 6
资源: 959

30分钟速成：服务器主动推送的反向Ajax与Comet实现

dwr反向ajax

反向Ajax的小例子

反向ajax

反向Ajax技术解析：Comet与WebSocket

dwr ajax 学习框架

Ajax的DWR入门例子

ajax的DWR框架入门例子

AJAX学习资料(DWR+ExtJS)

DWR中文教程：AJAX快速开发指南

jQuery基础教程：快速掌握选择器与操作DOM

最新资源