Ajax 简介

主流 Web 编程模式的历史实践和当前实践

获得 Ajax 编程的技术介绍，并发现核心 JavaScript 代码和流行库的实现。

在过去几年，JavaScript 已从让人事后才想起的偶然对象变成最重要的 Web 语言。如果要指出一个推动这项技术显著进步的因素，那就是基于 Ajax 的应用程序开发的出现。

开发关于该主题的技术

该内容是提高您技术的渐进知识路径的一部分。请参阅 JavaScript 综合指南。

简言之，Ajax 是一种开发技术和设计模式，支持网站或应用程序，使用实时数据更新界面，无需页面刷新。该功能创建了一种更为流畅且更具桌面风格的用户体验。

Ajax 简史

Ajax 的发展历史类似于其他许多一夜成名的技术。尽管 Ajax 似乎不知从何而来，但实际上，它已经存在很长一段时间了。多年的努力使其遍布 Web，在 Ajax 旗帜的带领下创建工具和模式。纵观最初网络泡沫的 DHTML 时代，以及网络公司破产后的黑暗年代，世界各地的开发人员解禁了 JavaScript 的超能力，将这个崭新的、令人激动的应用程序模式引人 Web。

XMLHttpRequest

最早最重要的 Ajax 谜题是 XMLHttpRequest (XHR) API。XHR 是一种用于在 Web 浏览器和 Web 服务器间传输数据消息的 JavaScript API。它支持浏览器使用 HTTP POST（将数据传到服务器）或 GET 请求（从后台服务器访问数据）。该 API 是大多数 Ajax 交互的核心，也是现代 Web 开发的一项基本技术。

它也是 Microsoft® Internet Explorer® 团队贡献给 Internet 的最好礼物。

这 是真的。早在 2000 年，XHR 最先出现于 IE 5 中。最初是由 Alex Hopmann 编写的 Microsoft ® ActiveX® 控件，创建 XHR 是为了处理 Microsoft Outlook® Web Access，旨在解决高级（当时）前端接口和 Microsoft Exchange Server 间的交互。

尽管 Microsoft 的软件包不完全算是 “出身贫贱”，但 XHR 的发展远远超出了最初产品的范围，后来在各个主要浏览器中得以实现，甚至作为一种 W3C 标准被采用。

定义 Ajax
Ajax 不是一种技术。实际上是几种技术，每种技术都各有其特色，这些技术以全新强大方式融合在一起。Ajax 包含：

• 使用 XHTML 和 CSS 基于标准的呈现

• 使用文档对象模型的动态显示和交互

• 使用 XML 和 XSLT 的数据交换和操作

• 使用 XMLHttpRequest 的异步数据检索

• 将它们绑定到一起的 JavaScript

虽然这个技术说明从某种程度上讲有些过时了，但基本模式依然是完整的：HTML 和 CSS 呈现数据和样式，DOM 和相关方法支持页面实时更新，XHR 支持与服务器通信，JavaScript 安排整体显示。

本文的总体影响比较大。密集的大肆宣传与亟待开发的创造力和能源相碰撞，掀起了一场革命，这实属难得一见。由于 Ajax 被世界范围的新一代创业企业所采用，它迅速走向 Web 开发范式的前沿。Ajax 从一个寻求市场策略的模糊趋势一跃成为现代 Web 设计的开发的关键组成部分。

库

基于 Ajax 开发的一个关键驱动因素是几个全功能 JavaScript 库的演变和改进。除了经验丰富的 JavaScript 开发人员，很少有人能够真正理解 Ajax 底层技术。因此，即使在 DHTML 时代，虽然研究出了大部分浏览器交互和动画来应对琐碎的超额，但数量有限的几个经验丰富的 JavaScript 工程师导致基于 Ajax 的站点需求和人才（他们可以从零开始编写这样一个界面）供应之间的差距的进一步扩大。通过提供随时可用的交互和动画，减少跨浏览器差异和改进核心 JavaScript API 缺点的实现，Prototype、Dojo 和 jQuery 这类库有助于大规模地填补这一空白。

异步 JavaScript 以及更多 JavaScript（对象表示法）

从原 始 post 时代到现代，Ajax 领域的最大改变是引入了 JSON，JSON 是一种基于 JavaScript 的数据传输。提供更小的文件和更便利的原生 JavaScript 访问（与 XML 使用的笨重的基于 DOM 的方法和属性截然相反），JSON 很快就被开发人员用于进行数据传输。现在 JSON 已列入近期完成的 ECMAScript 规范的第 5 版。

JSON+Padding

原始 JSON 提议的一个显著增强是 JSON+Padding (JSONP)。正如您所看到的，XMLHttpRequest 对象有一个严格的安全模型，只支持使用与请求页面相同的域名和协议进行通信。JSONP 在这个跨域限制上创建了一种更为灵活的方法，将 JSON 响应包装到一个用户定义或系统提供的回调函数中。将 JSON 脚本添加到文档之后，该方法将会提供即时数据访问。该模式现在很常见，对于许多较大的 Web 服务，可以采用该实践来支持混搭应用和其他内容联合。

尽管 JSONP 非常流行，但它有一个明显的便于恶意代码入侵的漏洞。因为来自第三方的脚本标记注入允许所有内容在主机页面上运行，所以，在数据提供者受到威胁时，或者主机页面没有留意插入页面的资源时，恶意入侵潜能将会令人想象。

现在，您已经对 Ajax 历史有所了解，接下来我们将开始探讨将魔法变成现实的技术。尽管，一般的 JavaScript API 书籍在图书馆中随处可见，但即使对于经验丰富的开发人员，了解底层工作原理仍然是具有启发意义的。

XMLHttpRequest API 和特性

尽管可以使用其他技术从服务器中返回数据，但是 XHR 仍然是大多数 Ajax 交互的核心。XHR 交互由两部分组成：请求和响应。下面我们将逐个介绍。

安全模型

正如上面所提到的，原始 XMLHttpRequest 对象有一个严格的安全模型。这个同源策略只 允许使用与请求页面相同的主机、协议和端口进行通信。这意味着不同域（example.com 和 example2.com）、不同主机（my.example.com 和 www.example.com）、不同协议（http://example.com 和 https://example.com）之间的通信是禁止的，这会产生错误消息。

随着第二版 XHR 对象的开发，新的跨域请求协议工作将在 W3C 中完成，大量实现工作由浏览器供应商完成，针对跨域请求的机制目前仅在 Internet Explorer 8+、Mozilla Firefox 3.5+、Apple Safari 4+ 以及 Google Chrome 中提供。尽管发展已经放缓，但仍在请求中发送了一个特定 “Origin” 报头：

Origin: http://example.com

并将服务器配置为发送回一个匹配的 “Access-Control-Allow-Origin” 报头：

Access-Control-Allow-Origin: :
http://example.com

现在，可以使用 XHR 对象跨域进行双向通信了。

请求

请求端有 4 种方法：

• open() 发起服务器连接。可以带参数：

• method。将要使用的 HTTP 方法（可以是 POST 或者 GET）

• url。请求的 URL

• async。 可选布尔参数，表明请求是否异步（该参数的默认值为 Ture）

• user。一个可选用户名，供认证使用

• password。一个可选密码，供认证使用

• setRequestHeader() 设置请求报头，带有两个参数：报头及其相关值

• send() 发送请求。该方法带有一个可选参数，包含 POST 请求的正文

• abort() 中止请求

响应

响应也有几个属性和方法：

• status。请求的标准 HTTP 状态（例如，成功请求将返回 200）

• statusText。包括 Web 服务器返回的完整响应字符串，其中包括响应文本（例如，304 Not Modified）

• getResponseHeader()。返回特定报头内容；请求报头名称是其惟一参数

• getAllResponseHeaders()。返回所有响应报头的文本

• responseText。响应文本的字符串表示

• responseXML。响应文本的 XML 表示，一个包含 DOM 和所有相关 DOM 方法的文档片段

readyState

实例化完成后，XMLHttpRequest 对象有 5 种状态，使用以下值表示：

• 0: UNSENT。表示对象已创建

• 1: OPENED。表示 open() 方法已成功调用

• 2: HEADERS_RECEIVED。表示来自请求的报头已收到

• 3: LOADING。表示响应报头已下载

• 4: DONE。表示请求完成，但是并没有指出请求是否成功或返回预期值（查询响应和标准 HTTP 报头来估量请求的健康状况）

一个通用 JavaScript 示例

在我们进一步介绍流行库之前，先通过几个原始的 JavaScript 示例来了解正在运用的核心技术。

以下所有示例均可下载（参见 下载 部分），而且可以在任何运行 PHP 的 Web 服务器上运行。所有示例都可以处理 清单 1 中的简单文档。

相关资料：http://wenku.it168.com/redian/ajax/