Ajax封装
先来搂一眼四行的Ajax吧
var xhr = new XMLHttpRequest();
xhr.addEventListener("readystatechange", readyStateHandler);
xhr.open("POST", "http://10.20.159.168:4001");
xhr.send("a=1&b=2");
虽然这个方式很简单,但没有对是否连接成功进行判定不符合规范
函数需要的参数
ajax封装,这是一个带有判断功能的ajax函数
- url : 你要访问的服务器地址
- data : 需要上传的数据
- method : 和服务器传输的方式,默认是POST
function ajax(url,data,method="POST"){
return new Promise(function(resolve, reject){
//判断如果是使用get传输就在url后面添加?和要传输的数据
if(method.toLowerCase() === "get"){
//QueryString.stringify(data)方法是将对象转成地址栏的数据传输形式
url+="?"+QueryString.stringify(data);
//将data置空,因为data在之后要用send传输但get不需要使用
data="";
}else if(method.toLocaleLowerCase() === "post"){
//如果是post传输就吧对象转成字符串
data=JSON.stringify(data);
}else return;
var xhr=new XMLHttpRequest();
xhr.open(method, url);
xhr.send(data);
//绑定状态事件
xhr.onreadystatechange=function(){
// 判断如果xhr.readyState是4且xhr.status等于200就是说明传输成功
if(xhr.readyState===4 && xhr.status===200){
//成功就执行resolve并把服务器返回结果传入
resolve(xhr.response);
//xhr.status也表示不成功
}else if(xhr.readyState===4){
reject(xhr);
}
}
xhr.onerror = function(){
reject(xhr);
}
})
}
函数使用方式
来举个例子
- url : http://10.20.159.168:4001
- data : {a:1,b:2}
- method : 没有传值 ,默认是POST
ajax("http://10.20.159.168:4001", {a:1,b:2}).then(function(res){
console.log(res);
}).catch(function(xhr){
console.log(xhr);
})