Download
1 / 27
270 likes | 460 Views
Web 即时应用的解决方案 -( 反转 AJAX)Reverse Ajax. 参考资料： http://www.ibm.com/developerworks/web/library/wa-reverseajax1/index.html http://select.yeeyan.org/view/213582/212487 http://blog.mycila.com/ http://www.w3.org/TR/access-control/. 华磊 2011-11-03. Web 应用的发展历程. Web 应用的核心 - 用户体验. 即时性 快速 界面友好
E N D
Web即时应用的解决方案-(反转AJAX)Reverse Ajax 参考资料：http://www.ibm.com/developerworks/web/library/wa-reverseajax1/index.html http://select.yeeyan.org/view/213582/212487 http://blog.mycila.com/ http://www.w3.org/TR/access-control/ 华磊 2011-11-03
Web应用的核心-用户体验 • 即时性 • 快速 • 界面友好 • 富有创意的提示
AJAX定义 Adaptive Path公司的Jesse James Garrett这样定义Ajax： Ajax不是一种技术。实际上，它由几种蓬勃发展的技术以新的强大方式组合而成。Ajax包含： 基于XHTML和CSS标准的表示； 使用Document Object Model进行动态显示和交互； 使用XMLHttpRequest与服务器进行异步通信； 使用JavaScript绑定一切。 为什么要以Ajax命名呢？其实术语Ajax是由Jesse James Garrett创造的，他说它是“Asynchronous JavaScript + XML的简写”。
定义的误区 • Asynchronous 异步 一定需要使用XMLHttpRequest方式？ • 能解决异步通讯的均可作为AJAX的通讯手段 • Iframe callback • JSONP • setTimeout、setInterval • Img callback • XML 一定需要使用XML作为格式协议？ • 能解决格式协议的手段 • Text • Json • Js file
何谓 Reverse Ajax • 反向Ajax的基本概念是客户端不必从服务器获取信息，服务器会把相关信息直接推送到客户端。这样做的目的是解决Ajax传统Web模型所带来的一个限制：实时信息很难从技术上解决。原因是，客户端必须联系服务器，主动询问是否存在变更，如果有变更就会更新页面（或者页面的一部分）。虽然可以非常快速完成这个操作，让人感觉好像是实时的，但是实际上不是实时的。我们需要的是，服务器联系查看其页面的所有浏览器，并通告所发生的变更。
AJAX的正向和反向调用 • 传统AJAX调用是由客户触发事件手动发起，称之为正向。 异步请求 用户动作 浏览器执行 服务端执行 执行结果 • 而由服务端通知机制触发的异步调用称之为反向。 新的异步请求 浏览器执行 服务端执行 服务端通知
实现技术之一：轮询 • HTTP轮询和JSONP轮询和iframe轮询 • 轮 询（polling）涉及了从客户端向服务器端发出请求以获取一些数据，这显然就是一个纯粹的Ajax HTTP请求。为了尽快地获得服务器端事件，轮询的间隔（两次请求相隔的时间）必须尽可能地小。但有这样的一个缺点存在：如果间隔减小的话，客户端浏览器 就会发出更多的请求，这些请求中的许多都不会返回任何有用的数据，而这将会白白地浪费掉带宽和处理资源。 • 什么是JSONP • JSONP是一个非官方的协议，它允许在服务器端集成Script tags返回至客户端，通过javascript callback的形式实现跨域访问（这仅仅是JSONP简单的实现形式）。主要解决的是跨域和浏览器兼容问题。当然，w3c更新了协议，增加了对跨域请求的支持，参见http://www.w3.org/TR/access-control/。
实现技术之一：轮询 • Js轮询的实现技术： • Iframe，内嵌页定期刷新，回调父页方法执行通知。 • setInterval，设置循环定期发起请求，回调函数执行通知。 • setTimeout，回调函数继续调用setTimeout实现循环发起请求。 • JSONP，定期输出<script src>段（或回调）实现定期请求。 • Imgcall，定期更改imgsrc或定期输出img段，通过onload事件或者onerror事件处理通知。
实现技术之一：轮询 • Piggyback • 捎带轮询（piggyback polling）是一种比轮询更加聪明的做法，因为它会删除掉所有非必需的请求（没有返回数据的那些）。不存在时间间隔，客户端在需要的时候向服务器端发 送请求。不同之处在于响应的那部分上，响应被分成两个部分：对请求数据的响应和对服务器事件的响应，如果任何一部分有发生的话。图2给出了一个例子。 注意，一般会由client action执行请求动作。
实现技术之二：长连接Comet • Comet是 一个web应用模型，在该模型中，请求被发送到服务器端并保持一个很长的存活期，直到超时或是有服务器端事件发生。在该请求完成后，另一个长生存期的 Ajax请求就被送去等待另一个服务器端事件。使用Comet的话，web服务器就可以在无需显式请求的情况下向客户端发送数据。 • Comet 的一大优点是，每个客户端始终都有一个向服务器端打开的通信链路。服务器端可以通过在事件到来时立即提交（完成）响应来把事件推给客户端，或者它甚至可以 累积再连续发送。因为请求长时间保持打开的状态，故服务器端需要特别的功能来处理所有的这些长生存期请求。图3给出了一个例子。
实现技术之二：长连接Comet • Comet实现技术 • HTTP流 在流（streaming）模式中，有一个持久连接会被打开。只会存在一个长生存期请求（图3中的#1），因为每个到达服务器端的事件都会通过这同一连接 来发送。因此，客户端需要有一种方法来把通过这同一连接发送过来的不同响应分隔开来。从技术上来讲，两种常见的流技术包括Forever Iframe（隐藏的IFrame），或是被用来在JavaScript中创建Ajax请求的XMLHttpRequest对象的多部分（multi- part）特性。
实现技术之二：长连接Comet • HTTP流的实现 protected void doGet(HttpServletRequestreq, HttpServletResponseresp) throws ServletException, IOException { AsyncContextasyncContext = req.startAsync(); asyncContext.setTimeout(0); // 发送多段数据的Head设置 resp.setContentType("multipart/x-mixed-replace;boundary=\"" + boundary + "\""); resp.setHeader(“Connection”, “keep-alive”); //允许持续连接 resp.getOutputStream().print("--" + boundary); resp.flushBuffer(); // put the async context in a list for future usage asyncContexts.offer(asyncContext); }
实现技术之二：长连接Comet • Comet实现技术 • FLASH ActionScript socket 在as中支持socket对象可以连接到指定的服务器端口，采用标准的socket模型实现长连接。 由于页面内嵌的swf对象可以访问页面DOM或者被页面DOM访问，故可使用socket建立与服务端的连接接收通知，根据通知回调页面js方法进行通知处理。 • Forever Iframe Forever Iframe（永存的Iframe）技术涉及了一个置于页面中的隐藏Iframe标签，该标签的src属性指向返回服务器端事件的url路径。每 次在事件到达时，服务端写入并刷新一个新的script标签，该标签内部带有JavaScript代码，iframe的内容被附加上这一 script标签，标签中的内容就会得到执行。
实现技术之三：长轮询Comet • 长轮询（long polling）模式涉及了打开连接的技术。连接由服务器端保持着打开的状态，只要一有事件发生，响应就会被提交，然后连接关闭。接下来。一个新的长轮询连接就会被正在等待新事件到达的客户端重新打开。 • 优点：客户端很容易实现良好的错误处理系统和超时管理。这一可靠的技术还允许在与服务器端的连接之间有一个往返，即使连接是非持久的（当你的应用有许多的 客户端时，这是一件好事）。 • 缺点：相比于其他技术来说，不存在什么重要的缺点，像所有我们已经讨论过的技术一样，该方法依然依赖于无状态的HTTP连接，其要求服务器端有特殊的功能来临时挂起连接。
实现技术之三：长轮询Comet • 长轮询Comet实现技术 • Iframe call • 将动作指定给iframe的src页面执行，服务端挂起直到有事件发生，接着把脚本送回浏览器，然后重新把新的加载指令发送给iframe获取下一个事件。 • JSONP • 正如iframe一样，其目标是把script标签附加到页面上以让脚本执行。服务器端则会：挂起连接直到有事件发生，接着把脚本内容发送回浏览器，然后重新打开另一个script标签来获取下一个事件。
实现技术之三：长轮询Comet • 长轮询Comet实现技术 • XMLHttpRequest长轮询 实现Comet的做法是打开一个到服务器端的Ajax请求然后等待响应。服务器端需要一些特定的功能来允许请求被挂起，只要一有事件发 生，服务器端就会在挂起的请求中送回响应并关闭该请求。然后客户端就会使用这一响应并打开一个新的到服务 器端的长生存期的Ajax请求。
Reverse Ajax总结 • 一般来说，如果你想要在低延迟通信、超时和错误检测、简易性，以及所有浏览器和平台的良好支持这几方面有一个最好的折中的话，那就选择使用了Ajax长轮询请求的Comet。 • 学习Reverse Ajax更像是一种探索的过程，原文作者介绍了大量的实现reverse的方法和技巧，而这些技巧都来源于古老的技术，通过新颖的创意来使用和组合这些技术就产生了解决问题的实际方案，AJAX、RAJAX、WebView等都是这样。 • Reverse Ajax归根结底是异步调用的一种演变形式，重要的不是这个名词，而是如何在我们系统中使用这些技术来创造更好的产品。
一个范例：Reverse Ajax聊天室 • 即时响应，消息的到达几乎是实时的。 • 采用asp.net异步页面的实现模式，避免大量的变长连接挂起asp.net的请求处理，避免了过大的同时请求处理队列导致的503错误。 • 足够简单，仅300行不到的代码实现了一个理论能容纳数万人的Web聊天室。
