Ajax入门，封装一个简单的Ajax函数

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);
})