反向Ajax 30分钟

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

场景二：用户手机扫描页面上的二维码后，页面会自动跳转。

场景3:在类似聊天室的环境中，任何人都可以说话，所有登录的用户都可以立即看到信息。

与传统的请求必须从客户端发起，由服务器响应的MVC模式相比，反向Ajax可以模拟服务器主动向客户端推送事件，从而提升用户体验。本文将分两部分讨论反向Ajax技术，包括Comet和WebSocket。本文的目的是演示如何实现上述两种技术手段，但不涉及Struts2或SpringMVC中的应用。此外，Servlet的配置也有注释，相关知识可以参考其他资料。

第一，彗星(最佳兼容手段)

Comet本质上是一个可以将数据从服务器发送到客户端的概念。在一个标准的HTTP Ajax请求中，数据被发送到服务器，而反向Ajax通过一些特定的方式模拟发送一个Ajax请求，这样服务器就可以以最快的速度向客户端发送事件。由于普通的HTTP请求往往伴随着页面跳转，推送事件需要浏览器停留在同一个页面或框架上，所以Comet的实现只能通过Ajax来完成。

它的实现过程如下：页面加载时，它向服务器发送一个Ajax请求，服务器获取请求并保存在线程安全的容器(通常是队列)中。同时，服务器仍然可以正常响应其他请求。当需要推送的事件到来时，服务器遍历容器的请求在返回回复后被删除。因此，所有停留在页面上的浏览器都会得到响应，再次发送Ajax请求，并重复上述过程。

% @ page language=' Java ' ContentType=' text/html；charset=UTF-8“page encoding=”UTF-8“% % String path=request . getcontextpath()；string base path=request . getscheme()' ://' request . getservername()' : ' request . getserverport()' path '/；%!DOCTYPE html html lang=' en ' base href=' %=base path % ' HeAdTitleWebSocket/title script type=' text/JavaScript ' src=' http : static/jquery-1 . 9 . 1 . min . js '/script script type=' text/JavaScript ' $(function(){ connect()；$('#btn ')。单击(function(){ var value=$(' # message '))。val()；$.ajax({url : 'longpolling？method=onMessagemsg=' value，cache : false，dataType : 'text '，success : function(data){ })；});});函数connect() {$。ajax({url : 'longpolling？method=onOpen '，cache : false，dataType : 'text '，success : function(data){ connect()；警报(数据)；}});}/script/headsdyh1longpolling/h1 input type=' text ' id=' message '/input type=' button ' id=' btn ' value=' send '/body/html我们注意到BTN发送的请求不需要得到响应。整个过程的关键是客户端始终将connect()的请求保留在服务器上。服务器需要首先支持这种异步响应模式。幸运的是，到目前为止，大多数Servlet容器都提供了良好的支持。以Tomcat为例：

包小型应用程序导入Java。io。ioexception导入Java。io。版画作家；导入Java。乌提尔。排队；导入Java。乌提尔。并发。concurrentlinkedqueue导入javax。servlet。AsyncContext导入javax。servlet。servletexception导入javax。servlet。注释。webservlet导入javax。servlet。http。HttpServlet导入javax。servlet。http。HttpServletrequest导入javax。servlet。http。HttpServletResponse@ WebServlet(值='/长轮询'，asyncSupported=true)公共类彗星扩展了httpersvlet { private static final QueueAsyncContext CONNECTIONS=new ConcurrentLinkedQueueAsyncContext()；@ overrided protected void doGet(Httpservletrequest req，HttpServletResponse resp)引发ServletException，IOException { String方法=req。getparameter(' method ')；if(方法。equals(' onOpen '){ onOpen(req，resp)；} else if(方法。equals(' Onmessage '){ Onmessage(req，resp)；} }打开时私有无效(HttpServletrequest请求，HttpServletResponse resp)引发ServletException，IOException { async context=req。startasync()；语境。settimeout(0)；CONNECTIONS.offer(上下文);}消息上的私有无效(HttpServletrequest请求，HttpServletResponse resp)引发ServletException，IOException { String msg=req。getParameter(' msg ')；广播(味精)；}私有同步void broadcast(String msg){ for(AsyncContext context : CONNECTIONS){ HttpServletResponse response=(HttpServletResponse)context。GetResponse()；尝试{ PrintWriter out=响应。getwriter()；出去。打印(msg)；出去。flush()；出去。close()；语境。完成()；CONNECTIONS.remove(上下文);} catch(IOexception e){ e . print stack trace()；}}}} ConcurrentLinkedQueue是长队队列的一个线程安全实现，这里使用它来作为保存请求的容器AsyncContext。是雄猫支持的异步环境，不同的服务器使用的对象也略有不同码头支持的对象是延续。完成了广播的请求需要通过context.complete()将相关请求结束，并使用CONNECTIONS.remove(上下文)删除队列。

二、WebSocket(来自HTML5的支持)

使用超文本传送协议长轮询的彗星是可靠地实现反向埃阿斯的最佳方式，因为现在所有浏览器都提供了这方面的支持。

网络套接字在HTML5中出现，是比彗星更新的反向埃阿斯技术网络套接字。支持双向、全双工通信信道，而且许多浏览器（火狐、谷歌铬和Safari)也支持它。连接通过超文本传送协议请求（也称为网络套接字握手)和一些特殊的标头（表头).连接一直处于激活状态，您可以用Java脚本语言编写和接收数据，正如您使用原始三氯苯酚套接字一样。

通过输入ws://或wss://(在加密套接字协议层上)启动网络套接字网址。如图：

首先：网络套接字并非在所有浏览器上都能获得良好的支持，显然工业管理学(工业工程)又拖了后腿。因此当你打算使用这项技术之前必须考虑到用户的使用环境，如果你的项目面向的是互联网或者包括手机端用户，奉劝大家三思。

其次：网络套接字提供的请求区别于普通的超文本传送协议请求，它是一种全双工通信且始终处于激活状态（如果你不去关闭它的话)。这就意味着你不用每次获得应答后再次向服务器发送请求，这样可以节约大量的资源。

% @ page语言=' Java ' ContentType=' text/html；charset=UTF-8 "页面编码="UTF-8"% %字符串路径=请求。getcontextpath()；字符串基本路径=请求。getscheme()' ://'请求。getservername()“:”请求。getserverport()“path ”/；字符串ws=' ws ://'请求。GetServername()“:”请求。' GetServerPort()'路径'/';%!DOCTYPE html html lang=' en ' base href=' %=base path % ' HeAdTitleWebSocket/title script type=' text/JavaScript ' src=' http : static/jquery-1。9 .1 .量滴js '/script脚本类型=' text/JavaScript ' $(function(){ var web Socket=null；如果('窗口中的web套接字’){ web套接字=新web套接字(“%=ws % web套接字’)；} else {alert('不支持');} web套接字。on open=function(evt){ } web套接字。on message=function(evt){ alert(evt。数据)；} web套接字。onclose=function(evt){ } $(' # BTN ').单击(函数(){var text=$('#message ')).val()；websocket.send(文本);});});/script/headdy1h WebSocket/h1输入类型=' text ' id=' message '/输入类型=' button ' id=' BTN '值='发送//正文/html JQuery对WebSocket还未提供更良好的支持，因此我们必须使用爪哇岛描述语言来编写部分代码（好在并不复杂)。并且打部分常见的服务器都可以支持《华盛顿明星报》请求，以雄猫为例。在6.0版本中WebSocketServlet对象已经被标注为@java.lang。弃用，7.0以后的版本支持jsr365提供的实现，因此你必须使用注解来完成相关配置。

包小型应用程序导入Java。io。ioexception导入Java。乌提尔。排队；导入Java。乌提尔。并发。concurrentlinkedqueue导入javax。web套接字。onclose导入javax。web套接字。onmessage导入javax。web套接字。onopen导入javax。web套接字。会议；导入javax。web套接字。服务器。ServerEndPoint@ ServerEndpoint("/web套接字")公共类web套接字{ private static final QueueWebSocket CONNECTIONS=new ConcurrentLinkedQueueWebSocket()；私有会话会话；@ OnoPenPublic void OnoPen(Session Session){ this。会话=会话；CONNECTIONS.offer(这个);}@OnMessagepublic void onMessage(字符串消息){广播(消息);} @ OnLoesePublic void OnLose(){ CONNECTIONS。移除(此)；}私有同步无效广播(字符串msg){ for(WebSocket point : CONNECTIONS){ try { point。会话。GetBasicRemote().发送文本(味精)；} catch(IOexception e){ CONNECTIONS。移除(点)；尝试{点。会话。close()；} catch (IOException e1) {}}}三、总结（从请求到推送)

在传统通信方案中，如果系统A需要系统B中的信息，它会向系统B发送一个请求。系统B将处理请求，而系统A会等待响应。处理完成后，会将响应发送回系统a。在同步通信模式下，资源使用效率比较低，这是因为等待响应时会浪费处理时间。

在异步模式下，系统A将订阅它想从系统B中获取的信息。然后，系统A可以向系统B发送一个通知，也可以立即返回信息，与此同时，系统A可以处理其他事务。这个步骤是可选的。在事件驱动应用程序中，通常不必请求其他系统发送事件，因为您不知道这些事件是什么。在系统B发布响应之后，系统A会立即收到该响应。

网框架过去通常依赖传统"请求-响应"模式，该模式会导致页面刷新。随着Ajax、反向埃阿斯以及WebSocket的出现，现在可以将事件驱动架构的概念轻松应用于Web，获得去耦合、可伸缩性和反应性（反应性)等好处。更良好的用户体验也会带来新的商业契机。

以上所述是小编给大家介绍的反向Ajax 30分钟快速掌握，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！