AJAX封装

Title

// 1. 明白你做什么;

// 2. 尝试；

functionajax(options) {

// 1. 初始化一个默认的对象；

let_default= {

url:"",

type:"get",

async:true,

cache:true,

data:null,

success:null

};

// 2.对默认对象进行赋值；

for(letkeyinoptions){

_default[key] = options[key];

}

//3. 创建ajax,发送请求

letxhr=newXMLHttpRequest();

// 判断确保是get请求，保证data不是空的；

if(_default.type==="get"){

letflag=true;

if(_default.data){

letstr="";

for(letkeyin_default.data){

// key ---> 字符串；

str+=key+"="+_default.data[key] +"&";

}

str=str.slice(,str.length-1);

_default.url+="?"+str;

}else{

_default.url+="?"

if(!_default.cache){

_default.url+="tt="+Date.now();

flag=false;

}

}

if(!_default.cache&&flag){

_default.url+="&tt="+Date.now();

};

}

//如果cache是false，不让其get请求走缓存； 在url后面加一个时间戳；

xhr.open(_default.type,_default.url,_default.async);

xhr.onreadystatechange=function() {

if(xhr.readyState===4&&/^2\d/.test(xhr.status)){

// 数据成功返回

_default.success.call(xhr,xhr.responseText);

}

};

if(_default.type==="get"){

_default.data=null;

}

xhr.send(_default.data);// 请求体中的数据；

};

ajax({

url:"aside.json",

type:"get",

data:{

user:11,

word:22

},

cache:false,

async:false,

success:function() {

}

});

ajax的阶段性参数readyState的含义，

0 － （未初始化）还没有调用send()方法

1 － （载入）已调用send()方法，正在发送请求

2 － （载入完成）send()方法执行完成，已经接收到全部响应内容

3 － （交互）正在解析响应内容

4 － （完成）响应内容解析完成，可以在客户端调用了

ES6-->promise