AJAX请求
ajax请求？那么什么是ajax呢？
一.了解 Ajax
ajax全名async javascript and XML，是前后台交互的能力，也就是我们客户端给服务端发送消息的工具，以及接受响应的工具是一个默认异步执行机制的功能。ajax 就是 JS 这个语言和服务端 交互的手段。
ajax的优势:（1）不需要插件的支持，原生js就可以使用;（2）用户体验好（不需要刷新页面就可以更新数据）;（3）减轻服务端和带宽的负担;ajax的缺点:搜索引擎的支持度不够，因为数据都不在页面上，搜索引擎搜索到。
二.AJAX 的使用
在js中有内置的构造函数来创建ajax对象创建ajax对象以后，我们就使用ajax对象的方法去发送请求和接受响应。那么到底怎么编写呢？
1.创建一个ajax对象
const xhr = new XMLHttpRequest()；// IE9及以上
const xhr = new ActiveXObject('Mricosoft.XMLHTTP')；// IE9以下
上面就是有了一个 ajax 对象，我们就可以使用这个xhr对象来发送 ajax 请求了。
2.配置请求信息
xhr.open('请求方式', '请求地址', 是否异步);
第一个参数是本次请求的请求方式 get / post / put / ...;第二个参数是本次请求的url;第三个参数是本次请求是否异步，默认true表示异步，false表示同步。
示例:xhr.open(‘GET’, ‘./test.php’, true);
3.发送请求
xhr.send();//使用xhr对象中的send方法来发送请求
4.接收响应
（1）xhr.onload = function () { console.log(xhr.responseText) }；
ajax 对象中的 responseText 成员就是用来记录服务端给我们的响应体内容的，所以我们就用这个成员来获取响应体内容就可以。
（2）xhr.onreadyStateChange = function () {if (xhr.readyState === 4 && /^2\d{2|$/.test(xhr.status)) {}}；
在ajax对象中有一个事件，叫做readyStateChange事件这个事件是专门用来监听ajax对象的readyState值改变的的行为也就是说只要readyState的值发生变化了，那么就会触发该事件 所以我们就在这个事件中来监听ajax的 readyState是不是到 4 了。那么readyState是什么呢？status是什么呢？
5.readyState和status
ajax 状态码 - xhr.readyState，是用来表示一个ajax请求的全部过程中的某一个状态。
（1）readyState === 0;表示未初始化完成，也就是open方法还没有执行
（2）readyState === 1;表示配置信息已经完成，也就是执行完open之后
（3）readyState === 2;表示send方法已经执行完成
（4）readyState === 3;表示正在解析响应内容
（5）readyState === 4;表示响应内容已经解析完毕，可以在客户端使用了
这个时候我们就会发现，当一个 ajax 请求的全部过程中，只有当readyState === 4的时候，我们才可以正常使用服务端给我们的数据。
一个ajax对象中有一个成员叫做xhr.status，这个成员就是记录本次请求的 http 状态码的。
两个条件都满足的时候，才是本次请求正常完成。
三.AJAX封装
1.兼容问题
（1）创建ajax对象的兼容
let xhr = new XMLHttpRequest()；// 标准浏览器
let xhr = new ActiveXObject(‘Microsoft.XMLHTTP’)；//IE低版本
（2）响应接收的事件处理函数
xhr.onload = function () { console.log(xhr.responseText) }；// 标准浏览器
xhr.onreadystatechange = function () { if (xhr.readyState === 4 && /^\d{2}$/.test(xhr.status)) { console.log(xhr.responseText) } }；// IE 低版本
2.ajax封装代码
function isObject( data ){
return (typeof data === "object" && data !== null && data.constructor && data.constructor === Object)
}
function toUrlData( obj , url , method){
if( isObject(obj) ){
var str = "";
for(var attr in obj){
str += "&" + attr + "=" + obj[attr]
}
str = str.slice(1);
// 如果数据发送方式是POST，那么直接返回str就可以了;
method = method || "";
if( method.toUpperCase() === "POST"){
return str;
}
url += "?" + str;
return url;
}
return url;
}
function assign(){
var target = arguments[0];
for(var i = 1 ; i < arguments.length ; i ++){
for(var attr in arguments[i]){
target[attr] = arguments[i][attr];
}
}
return target;
}
function ajax( options ){
var _default = {
type : "GET",
url : "",
data : null,
dataType : "text",
status : null,
success : function(){},
complete : function(){},
error : function(){}
}
options = assign( _default , options );
options.type = options.type.toLowerCase();
if( isObject(options.context) ){
var callback_list = ["success","complete","error"];
callback_list.forEach( function( item ){
options[item] = options[item].bind( options.context );
})
}
var xhr = null;
if(typeof XMLHttpRequest === "function"){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
// 1. 如果请求方式为get，那么我们把数据拼接到url上;
if(options.type === "get"){
options.url = toUrlData( options.data , options.url , options.type)
}
// 2. 如果请求方式为post，那么我们把数据拼接到data上;
if(options.type === "post"){
options.data = toUrlData( options.data , options.url , options.type)
}
// 2. 根据数据进行方法的调用;
xhr.open( options.type , options.url , true ) ;
options.type === "post" ? xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded") : "";
// 3. 调用send方法;
xhr.send( options.type=== "get" ? null : options.data );
// 4. 调用回调函数;
xhr.onreadystatechange = function(){
// xhr程序运行结束;
if( xhr.readyState === 4 ){
options.complete();
if( /^2\d{2}$/.test(xhr.status) ){
// 5.传递数据
try{
var res = options.dataType === "json" ? JSON.parse(xhr.responseText) : xhr.responseText;
options.success(res);
}catch(e){
options.error(e,xhr.status);
}
}else{
options.error("error",xhr.status);
}
// 策略模式调用
if( isObject(options.status) ){
typeof options.status[xhr.status] === "function" ? options.status[xhr.status]() : "";
}
}
}
}
不想别人否定，自己就更加努力。【逆战】
