1.2  Ajax闪亮登场

现在，我们终于有了另一个创建真正丰富的基于浏览器的应用程序的工具：Ajax。别急着提问，我先要告诉你Ajax并不是一项特殊的技术，而是一种编程技巧，JavaScript是它的主要组成部分。我们知道有读者会说：“JavaScript可是难堪大用呀。”但是由于这种语言的复兴，应用程序和测试框架正在减轻开发人员的负担，这全归功于Ajax和更好的工具支持。随着ASP.NET AJAX的推出，微软也加入了大力推崇Ajax的行列，而“声名狼藉的”Rails框架更是内置了出色的Ajax支持。在Java方面，Sun已经在它的BluePrints Solutions Catalog中添加了几个Ajax组件，而且任何称职的框架也多多少少都宣布了对Ajax的支持。

实事求是地说，Ajax并不是什么新鲜玩意儿。事实上，与这个术语相关的“最新”技术——XMLHttpRequest对象（XHR）——也从IE 5（于1999年春天发布）开始就以一个ActiveX控件的形式存在了。所谓的“新”，指得是浏览器对这个技术的支持程度。一开始，只有IE支持XMLHttpRequest对象（因此限制了它的使用），但是随着Mozilla/Firefox 1.0、Opera 7.6和Safari 1.2的发布，对它的支持也变得普遍起来。这个很少使用的对象以及它的基本概念甚至囊括进了一项W3C的标准中：DOM Level 3 Load and Save Specification。从此，尤其是随着诸如Google Maps、Google Suggest、Gmail、Flickr、Netflix和A9之类应用的出现，XHR正在成为一个事实标准。

与以往使用过的很多方法不同，Ajax几乎能在所有的现代浏览器中运行，而且不需要任何专有软件或硬件。事实上，这种方法的一个真正强大之处就在于，开发人员不需要学习新的编程语言或抛弃他们对服务器端技术的已有知识。Ajax是一种客户端方法，并且可以与J2EE、.NET、PHP、Ruby和CGI脚本进行交互——它是真正的服务器无关（server-agnostic）。除了一些次要的安全约束之外，只需应用你已经掌握的知识，就可以马上开始使用Ajax了。

谁正在使用Ajax呢？已经提到过，Google显然是业界领先的Ajax早期使用者，其Ajax应用包括Google Maps、Google Suggest和Gmail等。Yahoo!也开始引入Ajax控件，Amazon最近也添加了一些有趣的特性，产品分类就是这样一个例子。Amazon显然已经远远超越了图书经销商的角色。图1-1所示的是它们的新界面。只需要将鼠标停放在产品分类标签上，就可以显示出所有不同的Amazon店铺列表，可以快速地选择想要进入的店铺。

另一个使用了一些Ajax技术的网站是DVD租赁公司Netflix。当客户将鼠标停放在一部电影的图片上时，这部电影的ID就会送回到它们的中央服务器，然后网页中就会出现一个悬浮窗口来显示这部电影的更多细节（见图1-2）。同样地，没有刷新页面，每部电影的细节也没有隐藏在表单字段中。这种方法使得Netflix可以提供更多与电影相关的信息，同时还不会弄乱其页面。这也使他们的客户浏览起来更方便。他们再也不用点击一部电影然后再点击回到电影列表了（在可用性领域中叫做频繁跳转）；他们只需要简单地将鼠标停放在一部电影上。

需要强调的是，Ajax的使用并不仅限于网络公司范围，传统公司的开发人员也开始进行这方面的尝试，他们中的很多人都已经在使用Ajax解决不友好的验证界面问题或实现数据的立即获取了。我们本地的一份报纸Star Tribune（www.startribune.com）最近添加了一个很有用的Ajax特性。虽然大多数的新闻网站都会显示相关文章，但是这些链接除了占据页面空间外几乎一无是处。Star Tribune用Ajax解决了这个问题：它并不是简单地除去这些链接，而是只在用户把鼠标停放在See more related links链接上时才会显示它们（图1-3）。

图1-1  Amazon的产品分类

图1-2  Netflix的浏览特性

图1-3  Star Tribune的相关链接

虽然从严格意义上讲这并不算是什么新方法，但是这种Ajax式的方法是对因特网默认的请求/响应模式的一个重要转变。Web应用开发人员现在可以自由地与服务器异步交互，这就意味着他们可以实现很多以前受瘦客户程序限制的功能。例如，当用户输入邮政编码时，可以验证用户的输入并用城市和州组装出表单的其他部分；或者当他们选择“美国”时，可以组装出一个州的下拉列表。虽然我们以前也可以做到这些，但都是东施效颦，使用Ajax会使这一切变得简单得多。

那么是谁发明了Ajax呢？准确的起源已经引发了一场争论。然而，肯定是Adaptive Path公司的Jesse James Garrett于2005年第一次提出了这个术语。在他文章Ajax: A New Approach to Web Applications（www.adaptivepath.com/publications/essays/archives/000385.php）中，Garrett讨论了胖客户程序或桌面程序与瘦客户程序或Web应用之间的差距正在缩小。当然，随着Google Maps和Google Suggest在Google Labs中的发布，Google也提供了使用这种技术的生动实例，同时关于这一主题的文章也大量涌现。要感谢Garrett创造了这个响亮的术语，使我们用不着说异步、XMLHttpRequest、JavaScript、CSS、DOM等等那么冗长的绕口令。虽然最初Ajax只是Asynchronous JavaScript and XML的首字母缩写，但是现在，这个术语已经用来指代所有允许浏览器在不刷新当前页面的情况下与服务器通信的技术。

我们能听见有人在说：“这有什么大不了的？”唔，使用XHR并且与服务器异步地交互使你能够创建前所未有的动态Web应用。例如，假设你有一个下拉列表，它需要基于其他文本框或下拉列表的输入来填充数据。一般地，在页面第一次加载时，你不得不把所有的数据一下子发送到客户端并使用JavaScript根据输入来组装下拉列表。这不难实现，但是它确实增加了页面的大小，而且依赖于下拉列表的动态程度，页面大小可能会成为真正的问题。使用Ajax，当文本框的输入改变或文本框失去焦点的时候，就可以向服务器发出一个简单的请求，只获取更新下拉列表所需的信息。

想像一下仅仅验证所具有的可能性吧。你写过多少次JavaScript验证逻辑？虽然编写JavaScript可能和编写Java或C#一样简单，但是缺少像样的调试器，再加上JavaScript的弱类型，用JavaScript编写这些逻辑很痛苦且易出错。有多少次，这些客户端验证规则与服务器上的规则相重复？使用XHR，可以创建对服务器的调用并激活一系列的验证规则。这些规则可以比你在客户端JavaScript中编写的任何代码丰富、复杂得多，并且可以充分利用调试器和集成开发环境。

我们能听见有些人在说：“我使用IFRAME或隐藏帧（hidden frame）实现这一切已经有好多年了。我们甚至使用这种特殊的技巧作为发布或刷新页面的某些部分而不是整个浏览器的方法，并且说实话，效果还不错。”这也许是很合理的观点，但是很多人都把这种方法看作绕过原本缺乏的XHR跨浏览器支持的小把戏。作为Ajax的核心，XHR对象就是设计用来从服务器异步获取任意数据的。

正如我们讨论过的，传统的Web应用遵从请求/响应模式。不使用Ajax，整个页面（或IFRAME，页面的某些部分）会在每次请求时被刷新。之前浏览的页面会存储到浏览器的历史栈中（虽然如果使用IFRAME，点击“后退”按钮并不总是能得到预期的结果）。然而，使用XHR产生的请求不会记录在浏览器的历史中。如果你的用户习惯于使用“后退”按钮在Web应用中导航的话，这也会造成问题。