前面我们学习了定时器，知道了定时器实际上是一种异步任务，还提到过JS中常见的另外几种异步任务，其中有一种异步任务叫AJAX，那么这篇文章我们就一起来学习一下AJAX。

在学习AJAX之前，为了演示的方便，我们会用nodejs自己建立一个后端的接口，所以大家需要提前在自己的电脑上安装好nodejs环境，大家可以去Node.js官网下载并安装nodejs，这里就不给大家演示了，基本都是一键安装，顺带提一句，nodejs是做JS开发必备的开发环境。

首先我们先用nodejs创建一个简单的服务接口

1，我们先创建一个serve.js文件(注意是以.js作为文件的后缀，不是.html)

2，在serve.js文件中编写以下代码

这一部分就是Nodejs提供的创建接口服务，这部分代码大家直接照抄就可以，需要注意的是res.setHeader这一步千万不能省，这一步省了会出现跨域的问题。

3，在vscode中右键单击 资源管理器 空白的部分，点击 在集成终端中打开

或者直接按ctrl+`(1旁边的键)

4，打开集成终端，也就是俗称的命令行，并在命令行中输入 node serve.js

5，输入回车后我们的接口服务就启动了

6，按ctrl+鼠标左键，我们直接打开http://127.0.0.1:8888链接

服务创建成功！

我们创建完后端接口后，可以开始编写ajax代码了

1、ajax代码我们还是写在html文件的script标签中，首先我们要用到浏览器的内置XMLHttpRequest类，我们先创建一个XMLHttpRequest实例

2、创建完实例后，xhr实例会有一个readyState属性，该属性有0-4一共5个值，在未调用任何xhr实例方法之前，该属性的值为0，表示unsent

3、之后我们就可以调用xhr实例的实例方法了，我们先调用open方法，该方法接受3个参数，第一个参数是字符串，传入请求方法，目前常用的请求方法有get、post等，这里我们传入get，第二个参数是字符串，传入请求url地址，这里我们把刚刚创建好的服务的地址传入即可，第三个参数是Boolean，表示该ajax请求是否异步，默认为true表示异步，该参数正常情况下就使用默认值即可，否则ajax请求多了，同步请求会一个一个等待服务的响应，非常影响页面的性能。

调用完open方法后，就表示我们已经和该地址开始建立http链接，而此时readyState的值会发变成1，表示http链接已经建立

4、调用完open方法后，我们就可以通过send方法对接口端发送请求内容了，send方法接收一个参数，参数为http请求的请求体，这里我们直接传null即可，ajax会传默认的请求体给接口端。send方法必须要有，相当于是一个确认键，只有调用send方法，浏览器才会向接口发起请求。

5、接下来就是调用整个ajax最关键的onreadystatechange方法了，该方法表示对接口返回结果的处理

首先，我们要对当前xhr的readyState属性进行一个筛选，readyState属性一共有5个状态，分别是：

0：初始化，XMLHttpRequest对象还没有完成初始化

1：载入，XMLHttpRequest对象开始发送请求

2：载入完成，XMLHttpRequest对象的请求发送完成

3：解析，XMLHttpRequest对象开始读取服务器的响应

4：完成，XMLHttpRequest对象读取服务器响应结束

只有在readyState=4的时候，我们才能完整拿到接口传过来的数据，因此我们首先要判断readyState的值是否为4

6、当然，readyState只能表示能读取接口结束，能不能拿到数据还得看接口是否能正常返回数据，而接口返回数据同样有一个状态码status，status分为5大类，分别是：

1xx：信息响应类，表示接收到请求并且继续处理

2xx：处理成功响应类，表示动作被成功接收、理解和接受

3xx：重定向响应类，为了完成指定的动作，必须接受进一步处理

4xx：客户端错误，客户请求包含语法错误或者是不能正确执行

5xx：服务端错误，服务器不能正确执行一个正确的请求

只有当状态码为2xx的时候，接口端才能正常返回数据，所以，我们还要加上status的判断，使其在2xx状态下

当然，为了方便我们处理不同的readyState，我们可以这样写

7、只有在图中的双重条件语句里面才能正常获得接口返回的数据，这时我们调用responseText即可获取接口响应的数据

上面就是JS原生的ajax请求的基本步骤，当然现在原生ajax用的比较少了，现在常用的ajax请求库有jquery、axios、fetch等等，我们在调用接口的时候直接使用库会方便很多，但是我们一定要理解ajax的实现过程，因为这些库都是基于原生ajax进行的进一步封装，例如jquery就是利用ajax，采用了回调函数的方式进行封装，而axios则是采用了Promise等等，无论是什么ajax库，底层的实现原理一定是原生的ajax！