如何封装一个Ajax函数

如何封装Ajax函数

一个Ajax函数：

// 一个Ajax函数
var xhr = null;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest;
}else{
xhr = new ActiveXObject(\”Microsoft.XMLHTTP\”);
}
xhr.open(\”GET\”,\”https://jsonplaceholder.typicode.com/users\”);
xhr.send(null);
xhr.onreadystatechange = function(){
if(this.readyState === 4){
console.log(xhr.responseText)
}
}

封装自己的 Ajax 函数

参数1：{string} 请求方法–method
参数2：{string} 请求地址–url
参数3：{object} 请求参数–params
参数4：{function} 请求完成后，执行的回调函数–done

function ajax(method,url,params,done){
// 统一将method方法中的字母转成大写，后面判断GET方法时就简单点
method = method.toUpperCase();
//IE6的兼容
var xhr = window.XMLHttpRequest
? new XMLHttpRequest()
: new ActiveXObject(\”Microsoft.XMLHTTP\”);

//创建打开一个连接 open

//将对象格式的参数转为urlencoded模式
//新建一个数组，使用for循环，将对象格式的参数，
//以（id = 1）的形式，每一个键值对用 & 符号连接
var pairs = [];
for(var k in params){
pairs.push(k + \”=\” + params[k]);
}
var str = pairs.join(\”&\”);
//判断是否是get方法， get方法的话，需要更改url的值
if(method == \”GET\”){
url += \”?\” + str;
}

//创建打开一个连接
xhr.open(method,url);

var data = null;
if(method == \”POST\”){
//post方法还需要设置请求头、请求体
xhr.setRequestHeader(\”Content-Type\”,
\”application/x-www-form-urlencoded\”);
data = str;

}
xhr.send(data);

//执行回调函数
xhr.onreadystatechange = function(){
if(this.readyState == 4) {
done(JSON.parse(this.responseText));
}return;
// 执行外部传进来的回调函数即可
// 需要用到响应体
}
}

//调用函数
//get方法
// ajax(\”GET\”,\”http://localhost:3000/users\”,
// {\”id\”:1},
// function(data){
// console.log(data);
// });

//post方法
ajax(\”POST\”, \”http://localhost:3000/users\”,
{ \”name\”: \”lucky\”,\”class\”:2,\”age\”:20 },
function (data) {
console.log(data);
});

以上就是如何封装一个Ajax函数的详细内容，更多关于封装Ajax函数的资料请关注悠久资源网其它相关文章！

您可能感兴趣的文章: