审视 Ajax，第 1 部分: 透过华而不实的广告看本质

了解什么时候以及如何实现这种新技术

文档选项
将此页作为电子邮件发送
讨论
拓展 Tomcat 应用
下载 IBM 开源 J2EE 应用服务器 WAS CE 新版本 V1.1
级别: 初级
Chris Laffra (laffrac@us.ibm.com), 性能工程团队主管, IBM
2006 年 9 月 11 日
最近对 Ajax（Asynchronous JavaScript and XML）的兴趣高涨了起来。种种 Ajax 应用程序提供了比传统 Web 页面更高的交互性和更丰富的用户体验。使用 Ajax 可以前所未有地部署新的、革命性的聚合和表示技术。受到 Alex Bosworth 列举的 Ajax 错误的触动，Chris Laffra 汇集了每位开发人员在考虑使用 Ajax 技术之前都应该认真思考的一些问题，分为两部分阐述。一些是潜在的问题，多数强调了 Ajax 的巨大潜力。 最近风险资本日程表和开发人员博客上最热门的话题是 Ajax。Ajax 的主要成分已经存在了十年，因此 Ajax 实际上没有多少新东西。但是 Ajax 这个名字，代表 Asynchronous JavaScript and XML（异步 JavaScript 和 XML），是全新的，Adaptive Path 的 Jesse James Garrett 在 2005 年创造了这个词。以 Dynamic HTML (DHTML) 为榜样，Ajax 也想避免与服务器之间的往复通信。Ajax 应用程序更新某些信息时，它不是替换 Web 浏览器中的整个页面。相反，JavaScript 代码向服务器发送一个 XML 请求，然后替换选择的 DOM 子集来更新当前页面。

每种新技术都有自己的方言，Ajax 也不例外。下面是与 Ajax 有关的几个缩写词：
Ajax：异步 JavaScript 和 XML XML：可扩展标记语言 RIA：丰富互联网应用程序 RSS：真正简单的联合 PS：范型迁移 TP：翻转点 VC：风险资本
在发明 Ajax 之前，DHTML 通常仅限于实现菜单或目录表、有限的动画形式和带标签的文件夹。要在不同的浏览器之间移植 DHTML Web 站点很困难。这就为 Bindows™ 这样提供开发有趣的丰富客户机的完善抽象的公司制造了一个市场，Eclipse™ FAQs 的在线版本就是一个很好的例子（相关链接请参阅参考资料）。
可以说，到目前为止最有影响的 Ajax 应用程序是 Google™ Maps。它已经建立了一套全新的计算机科学法则。（在 Google 上搜索 “Hacking Google Map” 返回了 200 多万个结果，如图所示。）模仿 Google Map 成功的例子包括 transparent maps、Bus Monster 和 HousingMaps.com。就个人而言，我最感兴趣的是 Google 的个性化特点，您可以用 DHTML 将已有的和新的内容拖放到个性化的主页上。自定义 mashup（即混合应用程序）似乎暗示用户可以执行任何 Google 搜索并将选择的主机添加到自己的主页上。
如果正在考虑建立自己的 Ajax 应用程序，不可避免地要思考一下这两篇文章中讨论的问题。本文介绍了这种新技术固有的潜在能力和缺陷。要注意，本文不适合 Ajax 初学者，比方说这不是关于如何使用 XmlHTTPRequest 的教程。它的目标是那些熟悉该技术的基础但希望就如何使用 Ajax 特性实现网站得到更多指导的读者。参考资料 给出了 Ajax 入门资料的一些链接。
“小的时候，大人们说 ‘人家都这么做’ 是做某件事最愚蠢的理由。现在却成了选择某个软件包的标准理由。”—— Barry Gehm 决策的时候，一种很强的认知偏见是跟风效果，即一种众所周知的心理现象（请参阅参考资料）。意思是说仅仅因为其他很多人这么做人们就这样做或者考虑问题。说服自己不得不 使用 Ajax 之后，仔细看看有没有人为制造的理由。对一些人来说，Ajax 就是最新的公认的锤子，会想出各种理由来给自己找合适的钉子。要记住 Ajax 是一种工具，不是一种玩具，本身也不是目标。
当新技术出现时，人们总是试验和测试它的燃点。比如，彩色显示器刚出现的时候（多数 Web 开发人员很年轻，可能不记得），出现了一股应用程序争先恐后改变字体和颜色的风潮，仅仅是因为他们能做到。没有人真正需要鼠标示踪器，但仍然有很多 Web 设计者认为必须加到他们的网站上。如果不小心的话，Ajax 也会出现同样的情况。
Ajax 还给风险投资的烈火上浇了油。技术项目的投资气候似乎再次变得适宜了，近来其中一个魔法般的关键词就是 Ajax。大量使用 Ajax 的合作项目 Zimbra™ 已经获得了 1600 万美元。其他项目也纷纷宣称自己是基于 Ajax 的，以便卖出更多的产品和引起投资商的关注。
如果发现自己想使用 Ajax，一定要考虑好哪些地方合适哪些地方不合适。希望这两期文章能够帮助您正确地决策。




回页首
浏览器的实现在几个关键的地方有所不同：
事件登记和事件处理 HTTP 请求对象的实现 文档对象模型（DOM）API
长期以来，这些不兼容性阻止了 JavaScript 在浏览器中的广泛使用。到处编写测试语句以便让用户，比方说，能够拖动 div。Google 开辟了一条道路，它表明只要有足够的耐心，就可以开发出真正跨平台的、支持多数浏览器（尽管不是全部，比如 Google 的 Ajax 应用程序目前不支持 Opera）的合适框架。
受 Google 成功的启发，出现了几十种 Ajax 框架。最值得一提的是 Microsoft® 的 Atlas，不仅仅是因为设计完善和外形美观，而且因为它被明确定位成浏览器中立的 Ajax 框架。它改造了 JavaScript 语言，包括定义了更丰富的基类库、增加了继承和接口、通过定义名称空间使得组合更容易。Atlas 实际应用的例子包括 Virtual Earth、Outlook Web 访问和 Start.com（链接参见参考资料）。图 1 显示了 Start.com 网站的截图，它说明了一个真正的革新：Atlas 是第一个在 Firefox® 中比在 Internet Explorer® 中运行得更好的 Microsoft 应用程序。

抗拒自己编写框架的诱惑。这是一项痛苦而枯燥的工作。
现有 Ajax 框架的完整列表请参阅参考资料。




回页首
Web 浏览器需要跟踪超链接、建立访问过的页面的历史记录，允许用户回到访问过的页面。Web 浏览器中最明显、最常用的按钮就是后退按钮（如图 2 所示），这是有原因的。

但是随着 Ajax 技术的发明，开发人员越来越对设计所谓的单页 HTML 应用程序感兴趣：没有历史记录的健忘症页面。很多 Ajax 应用程序自己启动，从不改变其 URL。如果这样的网站不支持后退、停止和刷新按钮以及收藏夹，用户可能要经过漫长的导航才能回到需要的状态，而且很难与别人共享网站。
对于寻求各种成功解决方法的用户来说，Google Maps 直到最近也没有尝试回忆起自己的历史，后退按钮毫无希望地被放弃了。感谢不断更新的模型 —— 这是 Web 应用程序的特点，某个时候 Google 悄悄地解决了这个问题：现在再试一试就会发现后退和前进按钮能用了。但是仍然很难收藏 Google Maps 随机搜索的结果。尽管支持导航历史，Google Maps 仍然没有在浏览器的地址栏中更新 URL。相反，它提供了 “连接到此页” 的宏来改变文档的基准 URL 以便创建书签。Wiki 也有同样的问题，通常包含 “永久链接” 按钮。
总之，Ajax 应用程序应该特别注意如何正确维护浏览器的历史。基本规则是：如果允许别人单击链接，就必须在浏览器历史中增加一个对象，以便后退按钮能够正常工作。另外，可以通过永久链接实现对收藏的支持。




回页首
用户触发某个 Ajax 动作后，应用程序必须立刻给出直观的线索向用户反馈，以便他们知道是否点对了地方。由于 Internet 上的 HTTP 请求不可靠，要特别注意达到一般公认的用户界面（UI）的响应时间：
立即或者在 0.1 秒之内提供反馈。 一个操作最多四秒钟。如果需要，重新设计应用程序。要保证 Ajax 操作迅速，能够立刻作出响应。将执行时间长的操作分解成符合要求的小块。比方说，搜索引擎可能每页返回 20 个结果而不是一百万个。 如果运行时间超过四秒钟要使用进度条。但是要注意，由于 Ajax 的异步特性，在 Ajax 应用程序中显示可靠的进度非常困难。
如果停顿是不可避免的，尽量使用 Gmail™ 中那样的 Loading 图标，如图 3 所示。

有一种简单的办法：启动定时器每 100 毫秒通知一次。如果等待的异步结果返回了，对 DOM 作必要的修改并显示然后再处理结果。如果更新完成之后到达 100 毫秒，则忽略它。否则说明请求未完成，在屏幕上显示反馈信息。将这些逻辑抽象并隐藏在 XmlHttpRequest 服务中，当然要支持多个并发的请求。
尽可能提供本地反馈。Gmail 给出的反馈实际上总的来说并不是一个好榜样，在鼠标位置和反馈结果之间可能有很大距离。这种情况下使用等待鼠标指针可能比较明智。或者展开树中的节点时，最好先显示一个子节点说明 “正在提取报价……”，然后在查询从服务器上返回时用最终的结果代替这个临时节点。




回页首
上个月，我去拜访一位朋友。天很黑，我迷了路，我想从计算机上找到他的地址。他在当天发给我的邮件中说明了他家的位置。不幸的是，电子邮件发送到了我的 GMail 帐户上，由于无法连接 Internet，我陷入苦恼之中。转瞬之间，零安装、漂亮的 UI、标签、广告过滤、好用的搜索引擎、平台独立性等种种优点都烟消云散了，由于离开了 Wi-Fi 的热点区域，我就是找不到朋友的地址了。
对于企业应用程序，或者 Google 搜索这样的应用程序，断开网络连接还不是问题，实际上没有离线的替代工具。但是那些替换了已有丰富客户机的应用程序，断开连接可能会造成比使用老应用程序还糟糕的体验。
Gmail 有 POP 支持，因此用户可以事先使用 Microsoft Outlook® 或其他 POP 客户机阅读邮件，即使在离线的情况下。这种变化没有痛苦，但需要有先见之明的用户的配合。主要的问题是 Ajax 没有明显的支持离线浏览的解决方案。




回页首
Web 成功的主要原因在于其 UI 模型的可预见性和简单性。简言之，任何人都能移动鼠标、点击链接、移动滚动条点击后退按钮。随着 Ajax 日渐流行，存在着现实的危险，开发人员有可能走上极端，将一切都变成可点击的，以无法预料的、异步的方式改变 UI。最后一点可能迫使您的用户去思考。对于那些对 Web 应用程序的可用性感兴趣的人来说，不应错过 Steve Krug 的 Don‘t Make Me Think（请参阅参考资料）。这本书没有专门论述 Ajax，但是上了重要的一课，告诉我们良好的设计对于网站是多么关键。
Ajax 无疑属于程序员的领域，程序员在设计 UI 方面的差劲是出了名的。无论程序员多么努力，他们的 UI 看起来都像是滑稽演员设计的。随着基于 Ajax 的应用程序日渐成熟，必须让界面设计人员和平面艺术师来用 HTML、CSS 和 Ajax 设计前端，表示层不需要程序员的帮助。解决这个问题的关键在于 Ajax 开发工具 —— 下一个要讨论的问题。




回页首
Ajax 本身不是一种技术，而是几个关键概念的组合。这些概念的融合使得 Ajax 非常特别。Ajax 只是最近才引起人们的兴趣，集成开发环境（IDE）厂商仍然落后半拍。因次，Ajax 开发工具零零散散，通常仅涉及到整个 Ajax 开发场景的某个方面：
设计。这是 Adobe® Dreamweaver 的领域，与其他计算机相关图书相比，在书店里可以找到更多这方面的书籍。 编辑。各种 IDE，如 Eclipse Web Tools Platform (WTP) 项目，都支持 HTML 和 JavaScript 页面的语法高亮显示。Java 开发人员可能对提供的有限内容帮助感到失望。由于 JavaScript 的动态性，所以不能提供类型信息。 业务逻辑。这些代码通常在应用程序服务器上运行，主要通过 Web 服务访问。 调试。参见用于 Venkman 的 Firefox 和用于 Internet Explorer 的 Script Debugger。 剖析。参见用于 Venkman 的 Firefox。没有用于 Internet Explorer 的。
（这些工具的链接可以在参考资料 中找到）。
最先占据市场的将是那些考虑到这些不同的方面并组成一个完善环境的 IDE，便于平面设计师、业务分析人员、Java 编码人员和数据库管理员的使用。我期望 Eclipse Ajax Tooling Framework 能够担任这个角色。




回页首
Ajax 的第一个字母代表异步 通信。之所以称为异步，是因为请求响应不是立刻发生的，而是要等一段时间。可能花很长时间才能到达（参见反馈 中的讨论），事实上请求可能根本没有回答。Web 是一个不可靠的世界，应对意外事件是任何 Ajax 应用程序的一部分。由于可能同时调度多个并发的 XML HTTP 请求，应用程序本质上变成了一个并发程序，而并发很难实现。
而拯救大多数开发人员的是 JavaScript 解释程序本身是单线程的。换句话说，任何时点上都只能有一个事件处理程序或者 XML HTTP 事件处理程序能够运行。回调永远不能并行运行。因此，不需要复杂的锁定机制来保证对 DOM（比方说）的协调访问。JavaScript 不理解线程的概念，因此也没有睡眠功能。一切都是在前端运行的，因此睡眠功能很容易阻塞整个浏览器。
Ajax 应用程序有一个总是不断变化的状态。正确地管理这个状态很重要，将其分解成很多无关的全局变量显然是错误的。此外，必须让用户能够马上跳到某个给定的状态 —— 比如一个用户需要停止工作并在一周后返回到当前状态。最后，在持续时间长的编辑会话中，如果能够实现自动保存（如图 4 所示）用户将非常高兴。

总之， Ajax 应用程序中管理状态变化应避免使用户不愉快、打断应用程序或者造成调试困难。




回页首
JavaScript 应用程序在浏览器中运行，很容易被篡改。通过在需要时才加载 JavaScript 文件可以欺骗 Internet Explorer 用户，但是其他浏览器，如 Firefox，通过上下文菜单的 View Selection Source（查看选定的源代码）选项热心地把当前整个 DOM 显示给用户。如果有人确实想查看和分析应用程序的全部 JavaScript 源代码，用 Mozilla® Greasemonkey 扩展编写的一段简单脚本、Venkman 这样的调试程序，或者自定义的 Internet Explorer 工具栏就能做到。
要知道 JavaScript 和伴随的 HTML 一样不安全，一定要把应用程序的价值放在数据复合领域和易用性上。在 Internet 上发布应用程序时，要避免把过多的业务逻辑放在 Ajax 中而不是服务器上。对于 intranet 应用程序这不是个大问题，可以把更多的逻辑放在客户机上，以减轻公司服务器的负担。




回页首
至于安全问题，Ajax 没有改变什么。Ajax 所依赖的技术已经存在很长时间了。隐藏框架，即所谓的 iframes，已经出现十年了，Microsoft 一直支持远程脚本的概念。如果有什么安全风险威胁到 Ajax 的发展，大量已有的网站已经深受其害了。
网站开发人员应该小心发送给他们的 GET 和 POST 请求受到欺骗。随着 Greasemonkey 这类技术的出现，用户可以彻底修改发送到服务器上的内容以及如何在浏览器中表示。Ajax 使用与一般 Web 浏览相同的安全机制，不多也不少。如果要通过 XmlHTTPRequest 发送敏感数据，需要使用适当的身份验证和安全通道。
当然，Ajax 所要改进的就是把 Web 应用程序组件化 为更小的功能或服务块。这种趋势称为原子化。Web 开发人员要对付的是将他们的应用程序变成一组小的组件。这些片段可能以未预料的顺序访问，可能是有敌意的，也可能是无敌意的。形式化的工作流模型越来越重要。




回页首
在审视 Ajax 的这一期中，我讨论了环绕着这种技术的不实之词。您还看到可靠的框架仍然没有完成，此外还应该考虑导航历史、书签功能、反馈、持久性、并发和安全等问题。
本系列的下一期中，我们将讨论其他 Ajax 主题，比如处理文档重绘、测试、发布和订阅模型、性能、可访问性、对老版本浏览器的支持和声明我们的目标。我还将提到 Ajax 带来的一种有趣的可能性：在网站中开发网站。
学习
您可以参阅本文在 developerWorks 全球站点上的英文原文 。
developerWorks 中国网站 Ajax 技术资源中心：在这里您可以找到更多关于 Ajax 的知识，包括 Ajax 基础入门、使用 Java, PHP 等语言开发 Ajax 应用的各种技巧和多种 Ajax 框架的技术信息。
“掌握 Ajax”（Brett McLaughlin，developerWorks，2005 年 12 月）：了解 Ajax，看看这种高生产率方法如何建立网站。
跟风效果：通过 Wikipedia 进一步了解这个词。
Alex Bosworth 的 Ajax 错误列表：看看促使作者撰写本系列文章的灵感来源。
Eclipse FAQs：Ajax 网站的好例子。
Don‘t Make Me Think（Steve Krug，New Riders Press，2000 年）：这本书讲述了 Web 设计的核心。
Ajax Frameworks：看看这个完善的 Ajax 框架清单，不要自己做一个。
developerWorksWeb 架构专区：关于 Web 技术的文章和教程可以提升您的网站开发技能。
developerWorks 技术事件和网络广播：关注拥挤不堪的技术会议，可以缩短您的学习曲线，改进最困难的软件项目的质量和结果。
获得产品和技术
Bindows：进一步了解这些开发高效、灵活的丰富 Internet 应用程序的工具。
Google Maps：一个成功的、有影响的 Ajax 应用程序。
Bus Monster andHousingMaps.com：看看这些基于 Google Maps 的在线应用程序。
Adobe Dreamweaver、Eclipse WTP project、Eclipse Ajax Tooling Framework、Venkman JavaScript Debugger 和Microsoft Script Debugger：没有任何一款工具统治 Ajax 开发领域。多数开发人员对项目中的不同部分使用不同的工具。
Greasemonkey 是一个有用的工具，尤其是能够帮助在线分析运行的 Ajax 应用程序。
Virtual Earth：可以找到用法说明、交互式地图和美国的卫星/航空图片。
Outlook Web Access：Microsoft Outlook 的兄弟网站。
Start.com：使用 Ajax（基于 Atlas）的新闻采集器，功能上类似于个人版的 Google。
讨论
参与论坛讨论。
developerWorks blogs：加入 developerWorks 社区。
developerWorks 讨论论坛：参加您感兴趣的讨论。

Chris Laffra 出生于荷兰，1988 年从阿姆斯特丹 Vrije 大学获得理学硕士学位，1992 年从鹿特丹的 Erasmus 获得博士学位。Chris 为 IBM T.J. Watson Research Center 和 Morgan Stanley 工作，从事用户界面、部件基础设施、程序分析、调试、可视化、压缩和优化方面的研究。他曾经领导 OTI 阿姆斯特丹实验室三年半，开发 WebSphere Studio Device Developer。在渥太华的 IBM 加拿大试验室，他研究 Java 运行时环境和 Eclipse 之间的分界（并与人合作撰写了 Official Eclipse 3.0 FAQs）。目前，Chris 作为 IBM Rational Performance Engineering 团队的主管，负责研究改进 RAD/RSA 的性能。他使用 Ajax 很长时间了，包括改进 Google Maps 以便在 Raleigh 找到附近有一所好学校的新房子，生成Eclipse FAQs 的在线版本。