什么是 AJAX？ _AJAX

文章插图

前言学妹这学期新开了一门课《Script及AJAX开发技术》，然而临近学期末，她突然跑来问我：到底什么是AJAX ？相信很多人（尤其是前端）在写代码的时候经常会用到AJAX技术，但是如果真要说出个所以然，可能还会有些困难。其实简单概括下，AJAX就是一种利用 JAVAScript 向服务端发起请求，并获得服务端响应的技术。它的特点是异步请求，局部刷新。

Tips：这里我将技术二字加粗了，是因为很多初学者会以为AJAX是一个库/框架，类似于JQuery/Vue之类的，因而有很多初学者会提出该怎么安装AJAX的问题。事实上AJAX是一种技术。

虽然概括起来很简单，但是AJAX技术的一些细节仍然值得我们思考，接下来我会详细的介绍。
AJAX 解决的问题我们刚才说过了，AJAX是一种发送请求的技术，那在AJAX被发明前，浏览器是如何请求的呢？

地址栏。用户在地址栏输入 http://baidu.com ，按回车，就向 http://baidu.com 发起了一个请求。（同时页面刷新）
a 标签。用户点击页面中的 a 链接，也会发起一个请求。（同时页面刷新）
img 标签。页面中如果有 img 标签，那么就会发起一个对此图片的请求（页面没有刷新，但是只能请求图片）类似的还有 link 标签、script 标签，都可以对一类文件的请求。

在这三种方式中，除了第三种，其他两种方式想要发送一个请求，就必须要刷新页面，如果页面只有展示内容的话刷新一下自然无所谓，但倘若一个页面有很多的表单内容需要填写，而你在最后填写完成提交的时候才告诉你，其中某一个地方不符合要求，要你回去重填，然后刷新一下页面，内容都消失了，怕是当时就可能会气的暴走了吧。
也正是这种极端的用户体验让微软创新地开发了一个接口 ActiveXObject("Microsoft.XMLHTTP")，并在 IE 5.0 中开放给开发者用。通过该接口，浏览器可以向服务器发送请求并取回所需的数据，并在客户端采用 JavaScript 处理来自服务器的回应。这就是 AJAX 的前身。随后这种技术被谷歌的开发人员发现并运用在 Gmail 中，再然后就是 W3C 制定了一个标准用来规范 AJAX，至此 AJAX 算是正式成为每一个前端开发者的必备技能了。
通过 AJAX 技术，服务器和浏览器之间交换的数据大量减少，服务器回应更快了。同时，很多的处理工作可以在发出请求的客户端机器上完成，因此服务端的负荷也减少了许多。
AJAX 的原理那 AJAX 的实现原理又是什么呢？我们先来看一下AJAX的定义，以下内容摘自维基百科：

AJAX即“Asynchronous JavaScript and XML”（异步的JavaScript与XML技术），指的是一套综合了多项技术的浏览器端网页开发技术。

这里又出现了一个新的名词：异步。这个名词在计算机领域可以说是一个很重要的名词了，很多技术都离不开异步二字，比如Nodejs的异步非阻塞I/O模型，当然这就是题外话了。我们应该怎么理解这里的异步呢？
不急不急，我们先来看一个生活中非常常见的例子：

文章插图

这种场景在上学的时候很常见，其实AJAX的原理和上述流程很相似，不信你看下面：

文章插图

在上述例子中，核心是班长（也就是HXR对象），班主任可以通过他传递消息（客户端构建XHR对象发送请求）然后收到响应。在班长去通知小明的过程中，班主任仍然可以继续手头的工作，这就是一个异步的过程。（果然生活处处皆学问）
那么我们又该如何在代码中使用这个XHR对象呢？
AJAX 的使用XHR 的全称是 XMLHttpRequest，这是由微软首先引入的一个特性，其他浏览器提供商后来都提供了相同的实现。这跟以前的技术最大的不同点在于「页面无需刷新」，仅此而已。
想要使用 AJAX 发起一个请求很简单，一共 4 步。
1. 创建一个 XHR 对象（需要考虑浏览器差异）