文档介绍:
优就业 Ajax 教程-反向 Ajax ,第 1部分: Comet 介绍英文原文: Reverse Ajax, Part 1: Introduction et 在过去的几年中, web 开发已经发生了很大的变化。现如今,我们期望的是能够通过 web 快速、动态地访问应用。在这一新的文章系列中, 我们学习如何使用反向 Ajax ( Reverse Ajax )技术来开发事件驱动的 web 应用,以此来实现更好的用户体验。客户端的例子使用的是 J Query JavaScript 库,在这首篇文章中,我们探索不同的反向 Aja x技术,使用可下载的例子来学习使用了流( streaming )方法和长轮询( long polling )et 。前言 web 开发在过去的几年中有了很大的进展,我们已经远超了把静态网页链接在一起的做法,这种做法会引起浏览器的刷新,并且要等待页面的加载。现在需要的是能够通过 web 来访问的完全动态的应用,这些应用通常需要尽可能的快, 提供近乎实时的组件。在这一新的由五部分组成的文章系列中,我们学习如何使用反向 Ajax ( Reverse Ajax )技术来开发事件驱动的 web 应用。在这第一篇文章中,我们要了解反向 Ajax 、轮询( polling )、流( stream ing )、 Comet 和长轮询( long polling ),学习如何实现不同的反向 Ajax 通信技术,并探讨每种方法的优点和缺点。你可以下载本文中例子的相应源代码。 Ajax 、反向 Ajax 和 WebSocket 异步的 JavaScript 和 XML ( Asynchronous JavaScript and XML ,A jax ),一种可通过 JavaScript 来访问的浏览器功能特性,其允许脚本向幕后的网站发送一个 HTTP 请求而又无需重新加载页面。 Ajax 的出现已经超过了十年, 尽管其名字中包含了 XML ,但你几乎可以在 Ajax 请求中传送任何的东西,最常用的数据是 JSON ,其与 JavaScript 语法很接近,且消耗更少带宽。清单 1给出了这样的一个例子, Ajax 请求通过某个地方的邮政编码来检索该地的名称。清单 1. Ajax 请求举例 var url ='talCodeLookupJSON?postalcode=' + $('#postalCode').val() +'&country=' + $('#country').val() +'&callback=?'; $.getJSON(url, function (data) { $('#placeName').val(data.postalcodes[0].placeName); }); 在本文可下载的源代码中,你可在 listing1.html 中看到这一例子的作用。反向 Ajax ( Reverse Ajax )本质上则是这样的一种概念:能够从服务器端向客户端发送数据。在一个标准的 HTTP Ajax 请求中,数据是发送给服务器端的,反向 Ajax 可以某些特定的方式来模拟发出一个 Ajax 请求,这些方式本文都会论及,这样的话,服务器就可以尽可能快地向客户端发送事件(低延迟通信)。 WebSocket 技术来自 HTML5 ,是一种最近才出现的技术,许多浏览器已经支持它( Firefox 、 Google Chrome 、 Safari 等等)。 WebSocket 启用双向的、全双工的通信信道,其通过某种被称为 WebSocket 握手的 HTTP 请求来打开连接,并用到了一些特殊的报头。连接保持在活动状态,你可以用 JavaScript 来写和接收数据,就像是正在用一个原始的 TCP 套接口一样。 WebSocket 会在这一文章系列的第二部分中谈及。反向 Ajax 技术反向 Ajax 的目的是允许服务器端向客户端推送信息。 Ajax 请求在缺省情况下是无状态的,且只能从客户端向服务器端发出请求。你可以通过使用技术模拟服务器端和客户端之间的响应式通信来绕过这一限制。 HTTP 轮询和 JSONP 轮询轮询( polling )涉及了从客户端向服务器端发出请求以获取一些数据,这显然就是一个纯粹的 Ajax HTTP 请求。为了尽快地获得服务器端事件,轮询的间隔(两次请求相隔的时间)必须尽可能地小。但有这样的一个缺点存在:如果间隔减小的话,客户端浏览器就会发出更多的请求,这些请求中的许多都不会返回任何有用的数据,而这将会白白地浪费掉带宽和处理资源。图1中的时间线说明了客户端发出了某些轮询请求,但没有信息返回这种情况,客户端必须要等到下一个轮询来获取两个服务器端接收到的事件。图 1.使用 HTTP 轮询的反向 Ajax JSONP 轮询基本上与 HTTP 轮询一样,不同之处则是 JSONP 可以发出跨域请求(不是在你的域内的请求)。清单 1使用 JSONP 来通过邮政编码获取地名, JSONP 请求通常可通过它的回调参数和返回内容识别出来,这些内容是可执行的 JavaScript 代码。要在 JavaScript 中实现轮询的话,你可以使用 setInterval 来定期地发出 Aj ax请求,如清单 2所示: 清单 2. JavaScript 轮询 setInterval( function (){ $.getJSON('events', function (events) { console.log(events); }); }, 2000); 文章源代码中的轮询演示给出了轮询方法所消耗的带宽,间隔很小,但可以看到有些请求并未返回事件,清单 3给出了这一轮询示例的输出。清单 3.轮询演示例子的输出[ client ] checking for events... [ client ] no event [ client ] checking for events... [ client ]2 events [ event ] At Sun Jun 0515:17:14 EDT 2011 [ event ] At Sun Jun 0515:17:14 EDT 2011 [ client ] checking for events... [ client ]1 events [ event ] At Sun Jun 0515:17:16 EDT 2011 用 JavaScript 实现的轮询的优点和缺点: 1.优点:很容易实现,不需要任何服务器端的特定功能,且在所有的浏览器上都能工作。 2.缺点:这种方法很少被用到,因为它是完全不具伸缩性的。试想一下,在 100 个客户端每个都发出 2秒钟的轮询请求的情况下,所损失的带宽和资源数量,在这种情况下 30% 的请求没有返回数据。 Piggyback 捎带轮询( piggyback polling )是一种比轮询更加聪明的做法,因为它会删除掉所有非必需的请求(没有返回数据的那些)。不存在时间间隔,客户端在需要
12>
内容来自淘豆网转载请标明出处.