反向Ajax技术解析：Comet与WebSocket

107 浏览量更新于2024-09-01 收藏 94KB PDF 举报

"反向Ajax 30分钟快速掌握" 反向Ajax是一种技术，它使得服务器能够主动地向客户端发送数据，而不仅仅响应客户端的请求。这与传统的Ajax模式不同，传统Ajax模式中，数据通常是由客户端发起请求，然后服务器响应。反向Ajax的引入主要是为了提高用户体验，特别是在实时性要求较高的应用场景中，比如实时通知、聊天系统等。 ### 场景应用 1. **新邮件提示**：用户不再需要手动刷新页面检查新邮件，而是服务器检测到新邮件时，主动推送给用户。 2. **二维码扫描后自动跳转**：当用户扫描二维码后，服务器确认信息并立即通知客户端执行跳转操作。 3. **即时聊天**：在聊天室环境中，一旦有人发言，所有在线用户都能实时接收到消息，无需手动刷新。 ### 反向Ajax技术反向Ajax的实现主要有两种技术：**Comet** 和 **WebSocket**。 #### 1. Comet Comet是一种利用持久连接实现服务器推送的技术。它通过保持一个长时间打开的HTTP连接，使得服务器可以在适当的时候将数据“推送”到客户端。实现Comet的策略有多种，如HTTP流和HTTP轮询。在这个过程中，客户端向服务器发送一个Ajax请求，服务器将请求保存，等待需要推送事件时，再将数据返回给客户端，客户端收到数据后再次发起新的Ajax请求，形成循环。 ```jsp <%@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> <html lang="en"> <head><base href="<%=basePath%>"></head> <body>  </body> </html> ``` 在上面的JSP代码示例中，你可以看到基础的页面设置，但具体的Ajax请求和响应处理将通过JavaScript来实现，这里没有展示出来。 #### 2. WebSocket WebSocket是HTML5引入的一种新的协议，提供了全双工的通信方式，允许服务器主动发送数据给客户端。相比于Comet，WebSocket更高效，因为它的连接一旦建立，就能持续双向通信，无需反复发起请求。然而，WebSocket的兼容性相对较差，对于不支持WebSocket的旧版浏览器，可能需要使用其他技术进行降级处理。 ### 实现方法在实际应用中，可能会结合使用Struts2、SpringMVC等框架来管理请求和响应，但本文没有深入讨论这些内容。对于Servlet的配置，采用了注解的方式，这种方式简化了配置文件的编写，使得代码更加简洁易懂。总结来说，反向Ajax通过Comet或WebSocket等技术实现了服务器对客户端的实时数据推送，提高了Web应用的交互性和实时性，尤其适用于需要实时更新信息的场景。开发者可以根据项目需求和浏览器兼容性选择合适的技术来实现反向Ajax功能。

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

主要介绍了反向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,

dataType : "text",

success : function(data) {

connect();

alert(data);

}

});

}

</script>

</head>

<body>

<h1>LongPolling</h1>

</body>

</html>

我们注意到，由btn发送的请求其实并不需要获取应答。整个过程的关键是需要客户端始终让服务器保持connect()的请求。而

服务器端首先需要支持这种异步的响应方式，幸运的是目前为止绝大部分的Servlet容器都已经提供了良好的支持。下面以

Tomcat为例：

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

weixin_38662122

粉丝: 5
资源: 949

反向Ajax技术解析：Comet与WebSocket

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

Ajax技术解析：提升网页互动性的秘诀

DWR框架实战：Ajax技术与Ext的结合应用

dwr ajax 学习框架

Ajax的DWR入门例子

ajax的DWR框架入门例子

AJAX学习资料(DWR+ExtJS)

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

DWR入门指南：打造高效AJAX应用

DWR入门教程：走进AJAX的世界

最新资源