AJAX详解，面试带着它风雨无阻

出现背景:

了解每一个技术之前就要知道它的出现的动机是什么？它解决了什么问题？这是也就是我在学习每一项技术必须要弄懂的原因。

传统的网页(不使用AJAX),如果需更新内容，必须重新加载整个页面，这也就意味着用户每次提交请求时，都必须刷新页面，用户体验极差，又很浪费带宽，并且每次应用沟通时，都需要请求服务器，等待其响应结果，应用的回应时间依赖于服务器的响应时间。。。。。

AJAX是什么？

MDN地址

async javascript and xml ——异步javascript和xml

这里的小伙伴可能会问了，那么异步javascript是不是指的是异步编程呢？答案显然是错的。

ajax发送请求的时候是既可以走同步和走异步请求的。这里的异步js指的是基于js实现的局部刷新。那么xml是指我们最后最早是用xml返回的数据，但是后来我们发现处理xml起来比较麻烦，所以后来就改用json格式返回数据了。。。那不是AJAX该叫AJAJ了,那可能是我们懒得给他改名字了，所以一直保留到现在。

AJAX的基本操作:

AJAX请求的四步

//1.创建AJAX实例对象(在低版本浏览器中基于 new ActiveObject() 处理
 let xhr = new XMLHttpReuqest();
//2\. 打开url（发送请求前的一些处理）
 xhr.open('get','data.json',true);
// 3\. 监听ajax的状态信息
 xhr.onreadyStateChange = function(){
    if(xhr.readyState === 4 && xhr.status === 200){
         console.log(xhr.response)
}
}
// 4.发送请求（请求主体的信息会基于SEND的时候发送给服务器）
 xhr.end(null);

注：要保证本地的web服务是http协议，不能是file协议。

xhr(对象)XMLHttpRequest

是什么

一个为向服务器发送请求和解析服务器响应提供了流畅的接口。

属性

onreadystatechange

一个JavaScript函数对象，当readyState属性改变时会调用它。详情了解

readyState

0：未初始化。尚未调用open()
1：已经调用open()，尚未调用send()
2：已经调用send()，响应头信息返回给客户端
3：待服务器返回响应内容
4：响应主体信息已经返回给客户端

status

响应的HTTP 状态。

如 200 表示成功，而 404 表示 "Not Found" 错误。当 readyState 小于 3 的时候读取这一属性会导致一个异常。

statusText

HTTP 状态的说明。

当状态为 200 的时候它是 "OK"，当状态为 404 的时候它是 "Not Found"。和 status 属性一样，当 readyState 小于 3 的时候读取这一属性会导致一个异常。

responseText

作为响应主体被返回的文本。

如果 readyState 小于 3，这个属性就是一个空字符串。当 readyState 为 3，这个属性返回目前已经接收的响应部分。如果 readyState 为 4，这个属性保存了完整的响应体。

responseXML

返回一个 Document，其中包含该请求的响应，如果请求未成功、尚未发送或时不能被解析为 XML 或 HTML，则返回 null。如果响应的内容类型是"text/xml"或"application/xml"，这个属性将保存着响应数据的XML DOM文档。

timeout

一个无符号长整型（unsigned long）数字，表示该请求的最大请求时间（毫秒），若超出该时间，请求会自动终止。

方法

open()

作用：初始化请求

xhr.open(method,url,async,user,password)

method 请求方式，如get,post,put等等
url 请求路径，可以是相对路径也可以是绝对
async 是否异步请求 传布尔值，默认true
user 用户名,可选参数,为授权使用;默认参数为空string.
password 密码,可选参数,为授权使用;默认参数为空string.
复制代码

send()

作用：发送请求

参数为发送的请求体，不传请求体的话最好传个null

setRequestHeader()

作用：设置请求头

参数两个，第一个请求体名称header，第二个要赋的值value

abort()

作用：取消当前响应，关闭连接并且结束任何未决的网络活动。

这个方法把 XMLHttpRequest 对象重置为 readyState 为 0 的状态，并且取消所有未决的网络活动。例如，如果请求用了太长时间，而且响应不再必要的时候，可以调用这个方法。

小例子:

let xhr = new XMLHttpRequest;
xhr.timeout = 1; //=>设置AJAX等待时间，超过这个时间算AJAX延迟
xhr.ontimeout = function () {
	console.log('请求超时~~'); //如果超过时间就会输出;
	xhr.abort(); //=>手动中断AJAX的请求
}
xhr.withCredentials = true; //=>在跨域请求中是否允许携带证书（携带COOKIE）
xhr.open('GET', 'json/data.json');
xhr.send();

getResponseHeader()

作用：返回指定响应头的值,readyState状态值为2时可以返回

参数：响应头的名称

getAllResponseHeaders()

作用：返回所有头部信息的字符串

请求方式

我理解我请求方式分为两大种:

get系列: delete/head/options
post系列:post/put

所有请求都可以基于请求头把信息传给服务器

GET请求传递给服务器一般基于问号参数,例:

xhr.open('get','./json.data?XXX=111');

POST请求方式传递给服务器的信息一般基于"请求体",例:

// xhr.send({请求主体信息})
xhr.send()

总结

从以上的几个方面来回答的话，保证让面试官为你露出甜美的笑容