Question

你真的了解XMLHttpRequest么？

Answer 1

说起浏览器和服务器的通信，最先想到的技术必然就是Ajax了。在ES6中还提供了fetch API，相当于把Ajax用Promise封装起来，看起来更像同步操作了。先大概看下这两种方式：

很明显 fetch 方法看起来更加简洁，而且fetch也有很多自己很好的特性。想仔细了解fetch的童鞋可以去看看 阮一峰老师 的博客： Fetch API教程 （ps:前端不识阮一峰，学遍技术也枉然）。本篇文章主要是讲ES5中Ajax技术的核心 XMLHttpRequst 对象的用法（下文都把XMLHttpRequest对象称为XHR对象）以及XHR对象的一些属性。

既然要使用XHR对象，当然要先new一个XHR对象了

tip: 对于IE7之前的浏览器会有兼容问题，但我觉得如果现在还有人用IE7之前的浏览器，他也不配用2021年的程序员写的网页。

先说下XHR的readyState属性，该属性表示请求/响应过程的当前阶段，也就是请求/响应事件大概进行到什么程度了。该属性有5个取值：

只要readyState的值改变一次，就会触发onreadystatechange事件。也就是说，其实一次的请求/响应会触发4次onreadystatechange事件，但通常情况我们只对 完成 阶段感兴趣，也就是readyState为4的阶段。然后再说下XHR的另一个属性status。这个属性的值为http请求的响应码，没错，就是那些什么200啊，304啊，404啊，500什么的。还有一个responseText属性，这个属性作为响应主体被返回的文本。明确了这几个概念，就可以为XHR对象的onreadystatechange事件绑定事件响应函数了。

当为onreadystatechange事件绑定事件响应函数后，就要发起请求了。与发起请求有关的第一个函数就是 open() 。这个函数接收三个参数：

但要明确一点，调用open()方法以后并没有真正发送请求，而是做好了发送请求的准备。

这个时候大军已经通过open()方法做好出征的准备了，粮草装备什么的都齐全了，就等总指挥下令了，也就是调用 send() 方法。

send()方法就是用来真正发送一个请求。send()方法接收一个对象参数，这个参数就是作为请求体一起发送给服务器（ POST方法和GET方法的区别 )。如果是使用get请求方式这里直接为空也可以，但是为了兼容有些浏览器最好传一个null。

到此为止，一个XHR对象的Ajax的基本步骤就做完了，至于设置请求头和收到响应后的其他方法，这里就不多做介绍了，最后放一个封装的Ajax函数来结束本篇文章吧