再也不学 AJAX 了！（一）AJAX 概述

「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章集合，主要包含以下三个部分的内容：

1. AJAX 概述：主要回答「AJAX 是什么」这个问题；
2. 使用 AJAX：介绍开发者应该如何通过 JavaScript 发送 AJAX 请求；
3. 跨域获取数据：介绍了与「跨域发送 AJAX 请求」相关的一些内容：例如「同源策略」与四种跨域请求资源的方式：JSONP，CORS，postMessage 和 WebSocket；

希望读者通过阅读本系列文章，能够对 AJAX 技术有更加深入的认识和理解，从此能够再也不用专门学习 AJAX。

1. 什么是 AJAX？

AJAX 是「Asynchronous JavaScript And XML」 的缩写(即：异步的 JavaScript 和 XML)，是一种通过不刷新页面获取服务器数据的混合技术。

请各位读者停下来好好思考一下这个定义，注意那些加粗的文字，它们加粗是有原因的。

好的，相信您已经对这个定义有些印象了，现在让我对那些加粗的文字进行说明：

1.1 什么是 XML？

XML 是「Extensible Markup Language」的缩写（即：可拓展标记语言），是一种特征类似 HTML，用来描述数据是什么，并承载数据的标记语言，你可以在维基百科中看到更完整的解释，但我们现在只要知道它是一种用来承载数据的语言就足够了。

而我们如今耳熟能详的 JSON 则是另一种数据格式，在 JSON 发明之前，人们大量使用 XML 作为数据传输的载体，也正因如此，AJAX 技术的最后一个字母为「X」。如今情况已经发生了变化，JSON 这种类似于字符串对象的轻量级数据格式越来越受到开发者青睐，实质上成为了 AJAX 技术的标准数据格式，因此更恰当的命名应该是「AJAJ」（Asynchronous JavaScript and JSON）。呃，还是算了吧。

需要注意的是，JSON 并不是 XML 格式的替代品，两者各自有其适应的场景。如果你对这两种数据格式的差异感兴趣，可以查看以下链接：

• 为什么XML这么笨重的数据结构仍在广泛应用？
• 为什么都反对XML而支持使用JSON
• Stop Comparing JSON and XML
• JSON and XML comparison

1.2 不刷新页面

我们知道，互联网最主要的功能在于「信息互换」，当初互联网的发明者们也是基于这样的动机。虽然在互联网中「信息互换」的主体都是计算机。但为了方便交流，我们通常将获取资源的一方称为客户端（主要的工具是浏览器），而将派发资源的一方称为服务端（又称为“服务器”）。

在 AJAX 技术出现之前，如果浏览器需要从服务器请求资源，其核心链路是：

1. 客户端发出资源请求；
2. 服务端接收请求并返回相应 HTML 文档；
3. 页面刷新，客户端加载新的 HTML 文档；

确实，这种交互模式十分简洁明了，而且非常符合人的直觉，对于那时游走于互联网中的极客而言，也确实够用了。但是随着时代的进步，互联网渐渐不只是极客们的娱乐场，越来越多商业化网站的出现，使互联网不再局限于满足人们「信息互换」的需求，人们开始期待能够在互联网中获得更好的「使用体验」，而在老旧的模式下，用户的每一次点击都会造成页面的刷新或跳转，这当然很难令人满意。

另一方面，当用户点击页面中的某个按钮向服务器发送请求时，页面本质上只是一些数据发生了变化，而此时服务器却要将整个页面再返回给浏览器加载，这显然有悖于「DRY」原则，而且这种交互方式也会给用户的网络带宽带来不必要的开销。

那么有没有办法在页面数据变动时，只向服务器请求新的数据，并且在阻止页面刷新的情况下，动态的替换页面中的数据呢？ -- 没错！答案正是 AJAX 技术。

AJAX 技术的问世，不仅在浏览器接受响应时阻止了页面的刷新，从而提升了用户的产品使用体验，还使开发者能够以更加微观的视角重新思考网络应用的构建。从此，Web 开发者将在「数据」层面而非「资源」层面以更高的自由度构建 Web 应用。

1.3 混合技术

是的，AJAX 技术并不只是操作 XMLHttpRequest 对象发起异步请求这么简单，而是为了实现「获取数据时不刷新页面」这一目标的一系列技术的统称，这些技术包括：

• JavaScript：用来在获取数据后，通过操作 DOM 或其他方式达成目标；
• 客户端（即浏览器）提供的能够异步与服务器通信的XMLHttpRequest对象；
• 服务器端允许浏览器向其发起 AJAX 请求的相关设置；

明白 AJAX 并不只是操作 XMLHttpRequest 对象，对于初学者而言是十分必要的。

2. AJAX 的意义

相信您已经明白了，AJAX 技术的意图在于：能够使浏览器在不刷新页面的情况下获取服务器响应。这将大大提升互联网用户的使用体验，同时，由于 AJAX 请求获取的是数据而不是 HTML 文档，因此它也节省了用户的网络带宽，让网络用户的浏览体验变得更加顺畅。

同时，我们也应该注意到，由于 AJAX 技术可以令开发者向服务器获取数据（而不是图片，HTML 文档等资源），互联网资源的传输可以变得更加轻量级和纯粹，这激发了广大开发者的创造力，使各式各样功能强大的 Web 应用（如 Gmail，Facebook 等）如雨后春笋一般冒出，不断带给人惊喜。

也正是从这个时候起，人类正式进入 Web 2.0 时代，前端开发工程师职位正式登上历史舞台，JavaScript 将在未来的日子里越发被人津津乐道。

3. 总结

在本篇文章中我向您介绍了「什么是 AJAX」以及「AJAX 的意义」。您可能会由于文章中没有出现任何代码而感到失望，但请别着急，这篇文章旨在让您对 AJAX 技术有一个全局，清晰的认识。在下一篇文章中，我会花费大量篇幅去深入讨论 AJAX 技术的使用，希望您能保持耐心，让我们下一篇文章见 👋。