Ajax：HyperText/URI, HTML, Javascript, frame, frameset, DHTML/DOM, iframe, XMLHttp, XMLHttpRequest

本文内容

• Ajax 诞生
• 促使 Ajax 产生的 Web 技术演化
• 真正 Ajax
• Ajax 与 Web 2.0
• Ajax 背后的技术

2008 年毕业，2011 年看了《Ajax 高级程序设计》有点豁然开朗的感觉，所以有必要总结一下，现在对 Ajax 的理解比当初强很多。之前，在与其他开发人员的交谈中，发现他们也不甚了解 Ajax，甚至完全不理会它，更不用说在实际项目中思考如何去使用，而是仍然使用传统 Web 应用程序架构。即便是在现在，看同事的代码，也是由衷的慨叹：写得完全不对嘛~

无论当初 Ajax 在软件开发社区的质疑声有多大，但它能够创建类似桌面应用程序一样的 Web 应用程序，改变了人们对 Web 应用程序的认识。用户认可，市场承认，这难道还不够吗？

若想更好地进行 Ajax 开发，要了解它的机制，特别是它如何利用 Javascript 引擎实现异步刷新的效果，以及与传统 Web 应用程序的区别。最初工作的三年，对 Ajax 不甚了解，但是这种方式的确很出色，可一直无法领会如何在实际项目中灵活运用。

Ajax 的出现和发展，也不是一蹴而就的。

Ajax 诞生

---

术语 Ajax 是 Jesss James Garrett 发表在 Adaptive Path 公司网站上一篇文章中首创的。2005 年 2 月，Adaptive Path 公司的 Jesss James Garrett 在网上发表了一篇名为《Ajax：一种 Web 应用程序开发的新方法》的文章。文章中，Garrett 阐述了他为什么认为 Web 应用程序正在填平与传统桌面应用程序，一种全新的 Web 应用程序用户交互模型，它将不再需要重新加载整个页面，说：“在 Adaptive Path 公司里，我们将这种理念称为 Ajax。它预示着 Web 可能将发生一次根本性的变革。”

所有介绍 Ajax 的资料都会告诉你它的过去是 AJAX——Asynchronous JavaScript and XML（异步 Javascript 和 XML），不过 AJAX 这个首字母缩写已经不再使用了，现在，Ajax 已经称为一个术语了。

之所以放弃 AJAX 的叫法，是因为它有一些不正确的暗示，必须放弃。Ajax 是一种架构风格，它不一定非要使用 Javascript 和 XML。
AJAX 里的 Javascript，实际上指的是用来发送 HTTP 请求的任意浏览器端语言，一般来说它是 Javascript，除此之外，还有 ActionScript（Flash 里应用）、Java（在 applet 里运行），以及只是特定浏览器支持的语言（如 IE 的 VBScript）。
AJAX 里的 XML，实际上指的是 Web 服务用来发送表示的任意格式。一般来说是 XML，只要浏览器支持，它可以采用任意格式，如 JSON、HTML、纯文本或图片，等等。总之，只要是浏览器能处理的，或是浏览器端脚本能解析的就行。

因此，AJAX 程序员们决定将 AJAX 改称为 Ajax，这总比老是解释“Javascript 并不一定非得是 Javascript，XML 也不一定 XML”，或是称为“Client-Side Scripting And Representation Format”要好。

加深对 Ajax 理解，必须要了解促使其产生的一些 Web 技术的演变过程。

促使 Ajax 产生的 Web 技术演化

---

• HyperText 和 URI

1990年，Tim Berners-Lee 首次提出万维网的概念，其想法相当简单：使用超文本和 URI（统一资源标识符）来创建一个关联信息的网。

但是，第一版的 HTML（超文本标记语言）对于格式化和链接之外的事情关注很少，因此它并不适于构建交互性很强的应用程序，仅仅是为了用来共享最新信息的平台。这个阶段，

就是大家很熟悉的静态页面。

• HTML

接下来，新一代 Web 着眼于提高信息的格式化和显示能力，HTML 随之发展。以满足用户对媒体意识的强烈要求。很快，一个家叫 Netscape 公司，推动了 Web 发展的进程，迈出了很大的一步——JavaScript。

• JavaScript

Netscape 公司的 Netscape Navigator 是第一个成功的主流 Web 浏览器，使得 Web 技术得以快速发展。

JavaScript 原名 LiveScript，包含在 Navigator 2.0 版本（发布于1995年）。开发人员第一次能够控制页面与用户之间的交互，像数据验证这样的简单工作，不再需要与服务器交互，只跟浏览器就行。对于当时那个还使用 28.8Kbit/s 调制解调器连接的时代而言，这个功能意义非凡——让对用户的响应时间尽可能小。这是 Ajax 发展第一个重要的步骤。

• 帧（frame）

看下它的中文——帧，和它的英文——frame，直到写本文之前，我一直把 frame 译为“框架”，还有将在后边提到 frameset——框架集。事实上，“框架”仅仅是 frame 的表象而已，并没有说到问题的本质，因此是完全错误的。

HTML 最初版本将每个文档都看作是独立的，直到 HTML 4.0 版，帧（frame）还没有被正式引入。帧的理念是使一个页面能够分成几个独立的文档。Netscape Navigator 2.0 是第一个同时支持帧和 JavaScript 的浏览器。这是 Ajax 演化过程中一个重要步骤。

• 隐藏帧技术

隐藏帧技术是客户端/服务器端通信的一种有效工具。隐藏帧技术是指配置一个帧集（frameset），使其中一个帧的宽度或高度为 0 像素，其唯一的功能是用来初始化与服务器的通信。隐藏帧可以包含一个HTML表单，将其发回到服务器端。当返回该帧时，将调用一个 JavaScript 函数，以指示数据已经返回。隐藏帧技术是 Web 应用系统第一个异步请求/响应模型。然而这只是第一个 Ajax 通信模型，另一个技术的发展已经不远了。

• DHTML 和 DOM

直到 1996 年前后，Web 的主流还是静态页面。尽管 JavaScript 和隐藏帧技术能够使用户交互更具活力，但除了重新加载页面外，仍然没有改变页面内容显示的方法。紧接着，IE 4.0 发布。IE 引入 DHTML（动态 HTML）技术，虽然当时还处于开发阶段，但是 DHTML代表了从静态页面向前迈出了重要的一步，它使得开发人员能通过 JavaScript 修改已经载入页面的任何部分。随着 CSS 的出现，DHTML 使得 Web 重现活力。因为将 DHTML 和隐藏帧技术结合起来，意味着可以随时根据服务器的信息来更新页面的任何部分，这才是Web开发一次真正的范型转变。与 DHTML 只追求修改页面的某个部分不同，DOM 的目标更加宏伟：为整个页面提供一个标准结构，对该结构的操作将使得修改 DHTML 风格的页面成为可能——这是向 Ajax 发展的下一个重要步骤。

• 隐藏 ifame 技术

我们当然对使用 frameset、使用隐藏帧技术记忆犹新。但它存在不足：必须提前计划，为可预见的隐藏帧设置帧集。1997年，<iframe/> 元素作为 HTML 4.0 官方标注的一部分，这是 Web 进化的另一个重要步骤。开发人员可以在页面的任何地方放置隐形的 iframe，不再定义帧集 frameset，以完成客户端到服务器端的通信。当 DOM 最后在 IE 5.0 和 Netscape Navigator 6.0 中实现时，还能通过 JavaScript 在运行时动态创建 iframe，来发出请求，获得响应，而不需要额外的 HTML 元素。这就是新一代的隐藏帧技术：隐藏 iframe 技术。

• XMLHttp 和 XMLHttpRequest

微软浏览器的开发人员肯定意识到隐藏帧技术和隐藏 iframe 技术的流行，而决定向开发人员提供一个实现客户端/服务器端交互的工具——XMLHttp。这个工具在2001年以 ActiveX 对象的形式引入。它是一个能够在 JavaScript 中控制特定的 HTTP 请求。现在可以独立与页面的载入/重载周期，使用纯 JavaScript 通过程序访问服务器，而不再需要使用隐藏帧或隐藏 iframe 技术。XMLHttp 对象对 IE 开发人员而言影响巨大。

随着使用者越来越多，Mozilla 的开发人员开始移植 XMLHttp，为了避免使用 ActiveX，将它的主要方法和属性都复制到他们自己浏览器的 XMLHttpRequest 对象。现在越来越多的浏览器都现实 XMLHttpRequest 对象。

 

参考资料

---

[1] XMLHttpRequest W3 标准 http://www.w3.org/TR/2010/CR-XMLHttpRequest-20100803/

促使 Ajax 产生的 Web 技术演变：

HyperText 和 URI –> HTML –> JavaScript –> frame –> 隐藏帧技术（frameset） –> DHTML 和 DOM –> 隐藏 iframe 技术 –> XMLHttp –> XMLHttpRequest

 

真正 Ajax

---

简单来说，Ajax 只不过是一种 Web 交互的方法。这种方法只是在客户端和服务器之间传输少量的数据，从而给用户提供响应最及时的体验。

• 传统 Web 应用程序模型，浏览器本身负责初始化到服务器的请求，并处理来自服务器的响应。
• 而 Ajax 模型不同，它提供一个中间层（Garrett 称为 Ajax 引擎，它只是一个 JavaScript 对象或函数）来处理这种通信。只有当信息必须从服务器获得时才调用它。

图 1 传统 Web 应用程序框架与 Ajax 应用程序框架

Ajax 与 Web 2.0

---

Web 2.0 最初是由 O`Reilly 媒体和 CMP 媒体与2005年年末在其举办的会上提出的。Web 2.0 之父—— Tim O`Reilly 在一篇名为《什么是 Web 2.0》的文章中，将其描述为：

• Web 是服务而不是软件；
• Web 的社群性——鼓励用户参与（如打标签、写博客、建网络）；
• 将数据与表示分离；
• 更丰富、响应更强的用户体验。

最后一点与 Ajax 的关系最为密切。因此，Ajax 与 Web 2.0 不能混为一谈。Ajax 只是 Web 2.0 一个重要的组成部分。

Ajax 背后的技术

---

Grette 认为 Ajax 解决方案应该包含的技术：

• HTML/XHTML。提供页面内容。
• CSS。提供页面表示。
• DOM。对已载入的页面进行动态更新。
• XML。数据交互格式。
• XSLT。将 XML 转换为 XHTML。
• XMLHttp。通信代理。
• JavaScript。编写 Ajax 引擎的脚本语言。

对于 Ajax 解决方案来说，只有三种技术是必需的：HTML/XHTML、DOM、JavaScript。