ajax实现步骤之XMLHttpRequest

我们现在开发一直在使用ajax或者是axios与后台进行交互，这两个在浏览器工作的时候都是基于XMLHttpRequest，只不过是封装了便于使用。axios 是一个基于 Promise 的http请求库，可以用在浏览器和node.js中，很多不知道的是，高版本的jQuery中，ajax也是一个Promise对象。今天我们主要了解一下XMLHttpRequest的过程。

建立对象：

首先建立一个XMLHttpRequest对象，就是new一个对象出来。这个步骤没什么好说的，但是要注意IE早期版本使用的是ActiveXObject。

调用open方法：

Open方法就是与服务器建立连接，有三个方法XMLHttpRequest.open(Method, URL, Asyn)，第一个是get、post等方法，第二个是地址，第三个是同步异步。调用 open()方法并不会真正发送请求， 而只是启动一个请求以备发送。只有客户端必须等待服务器返回加载完毕之后，才能继续之下往下的操作。

调用send方法：

Open成功了，表示可以发送数据给后台，也可以不发送，不需要通过请求主体发送 数据，则必须传入 null，因为这个参数对有些浏览器来说是必需的。

回调函数onreadystatechange

当send成功发送，我们可以通过readyState来监听当前状态，readyState有五个状态：

0：未初始化。尚未调用 open()方法。

1：启动。已经调用 open()方法，但尚未调用 send()方法。 q

2：发送。已经调用 send()方法，但尚未接收到响应。 q

3：接收。已经接收到部分响应数据。 q

4：完成。已经接收到全部响应数据，而且已经可以在客户端使用了。

readyState状态切换的时候会触发onreadystatechange方法。也就是在这个方法里面判断状态是否为4。

当readyState为4的时候，我们还需要判断status，只有通过这个状态判断才能确定得到的数据是正确的，否则有可能得到的是错误的数据。一般成功状态是200，很多封装的时候判断是大于等于200和小于300就是成功，还有一个特殊304也是成功的标志。

当然，另外有什么设置头部、超时设定、跨域资源共享等，这边就不说了，本人自己也没有理解完全。

概括来说，ajax和axios请求过程分成5步，创建对象、设置回调函数、建立连接、发送请求、回调函数进行操作。为什么设置回调函数要放第二步呢，因为onreadystatechange是在readyState状态切换的时候都会触发，所以建立对象之后就要设置回调函数。

欢迎关注Coding个人笔记公众号