目录
无论是使用jquery、axios还是fetch，前端工程师每天都要使用Ajax从后端拉数据。不过，如果你遇到的是这样的面试官：
面试官：能用原生JS写一个Ajax么？
Ajax概述
Ajax是Asynchronous JavaScript And XML的简称，它允许我们在不刷新整个页面的情况下，就可以异步获取数据，并更新页面的部分内容。
那么Ajax的工作流程是怎样的呢？大体来说，可以分为四步：
- 页面当中的事件或者函数触发Ajax请求的时候，建立XMLHttpRequest对象，以进行接下来的Ajax请求。
- 调用XMLHttpRequest的open函数
- XMLHttpRequest向服务器发送请求
- 服务器处理请求之后，会把响应返回到网页，此时，XMLHttpRequest会监听到这个响应，并执行响应的代码。
接下来，根据上面的四步，我们实现自己的Ajax。
1.第一步：创建XMLHttpRequest对象
Ajax实际是使用XMLHttpRequest对象来发送请求的。所有现代浏览器都支持XMLHttpRequest对象，我们可以使用如下代码创建一个XMLHttpRequest对象：
var xhttp = new XMLHttpRequest();不过，需要处理老版本浏览器的朋友们就没有那么幸运了，IE6当中就没有内置XMLHttpRequest这个对象。不过IE6中有一个ActiveX对象可供我们使用，我们可以使用if条件来处理兼容性：
var xhttp;
if (window.XMLHttpRequest) {
// 现代浏览器
xhttp = new XMLHttpRequest();
} else {
// IE6等老版本浏览器
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}2.第二步：调用XMLHttpRequest的open函数
XMLHttpRequest对象上有open这个函数来声明请求的方法：open(method, url, async)
这个方法有三个参数：
- 第一个参数method说明了使用哪种请求方法，是GET还是POST，还是其他方法。对于已经熟悉使用插件发送ajax的我们，无需赘述。
- 第二个参数是url，请求文件的地址。
- 第三个参数是async，这是一个boolean值，表明是否要发送异步请求，应该被设置成为true（true也是默认值），false非必要时不要使用，因为会阻塞JS执行，直到收到响应为止。目前，我们的代码如下：
var xhttp;
if (window.XMLHttpRequest) {
// 现代浏览器
xhttp = new XMLHttpRequest();
} else {
// IE6等老版本浏览器
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.open('GET', '/smileyFace');3.第三步：XMLHttpRequest向服务器发送请求
这一步很简单：
xhttp.send();send方法首先连接到了服务器，然后把请求发送到服务器。不过如果使用的是POST方法，则需要把请求body传入send中作为参数。
4.第四步：处理响应
XMLHttpRequest上有一个方法，名叫onreadystatechange，当请求接收到响应的时候便会触发，在这个方法内部，我们来定义对响应的处理：
xhttp.onreadystatechange = function() {
if (xhttp.readyState === 4) {
if (xhttp.status === 200) {
// successFunc(xhttp.responseText)
} else {
// failFunc(xhttp.responseText)
}
}
};其中，readyState存储XMLHttpRequest的五种状态：
- 0：UNSENT：代理被创建，但尚未调用open()方法
- 1：OPENED：open() 方法已经被调用
- 2：HEADERS_RECEIVED：send() 方法已经被调用，并且头部和状态已经可获得
- 3：LOADING：下载中； responseText 属性已经包含部分数据
- 4：DONE：下载操作已完成
readyState这五个状态是顺序执行的，每次都会触发onreadystatechange。readyState变为4之后，整个响应就接收完成了。
XMLHttpRequest的status属性是HTTP状态码，我们应该都比较熟悉，200代表请求成功。
responseText：得到字符串形式的响应数据。（responseXML则是XML格式的响应数据）
5.代码封装
可以把以上代码封装成一个函数，这样我们可以通过：
ajax('/smileyFace', mySuccessFunc, myFailFunc)来调用。
最终代码如下：
function ajax(url, fnSucc, fnFaild) {
var xhttp;
// 第一步：创建XMLHttpRequest对象
if (window.XMLHttpRequest) {
// 现代浏览器
xhttp = new XMLHttpRequest();
} else {
// IE6等老版本浏览器
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
// 第四步：处理响应
xhttp.onreadystatechange = function() {
if (xhttp.readyState === 4) {
if (xhttp.status === 200) {
fnSucc(xhttp.responseText)
} else {
if (fnFaild) fnFaild(xhttp.responseText)
}
}
};
// 第二步：初始化XMLHttpRequest方法
xhttp.open('GET', url);
// 第三步：XMLHttpRequest向服务器发送请求
xhttp.send();
}这就是关于自己实现Ajax最基本的内容。希望看完这篇文章之后，你也能写出自己的Ajax。