原生Javascript封装的一个AJAX函数分享(2)
//在send之前重置onreadystatechange方法,否则会出现新的同步请求会执行两次成功回调(chrome等在同步请求时也会执行onreadystatechange)
req.onreadystatechange = async ? function () {
// console.log('async true');
if (req.readyState ==4){
complete();
if(req.status == 200) {
root.success(req[type]);
} else {
root.error(req.status);
}
}
} : null;
req.send(sendstring);
if(!async) {
//console.log('async false');
complete();
root.success(req[type]);
}
}
root.url && root.send();
};
return function(ops) {return new AJAX(ops);}
}();
参数说明:
1.url:请求地址.可以不填,请求就不会发起,但如果不填又强行send,出了错不怪我
2.method: ‘GET'或'POST',全大写,默认GET
3.data: 要附带发送的数据,格式是一个object
4.async: 是否异步,默认true
5.type: 返回的数据类型,只有responseText或responseXML,默认responseText
6.complete: 请求完成时执行的函数
7.success: 请求成功时执行的函数
8.error: 请求失败时执行的函数
注:其中的type参数,并没有jquery的dataType那么丰富,只有原生AJAX有的responseText或responseXML.要是返回的是json数据,你需要在success函数中自己处理一下把text转成json.
函数说明:
一个实例化的xhr对象有两个函数可使用,一个是send,调用方法是:xhr.send(),无参数,其作用是发起请求过程.如果初始化时没有url,则不会执行send方法,这样你就可以在后面再加入url,并手动发起send—-如果send的时候没有url,那么请求会失败并且我没有处理这个错误,出了错只有你自己找了.
另一个方法是setData,调用方法是xhr.setData(data_obj),其参数是一个object. setData方法的作用是局部替换xhr的data属性里的值,比如xhr.data中已有一个page:1,你可以用xhr.setData({page:2})来更新他的值,而不影响data中已存在的其他属性值.
调用方法:
var a1 = xhr({
url:'2.php',
data:{
'username':'lix',
'password':'123456',
'gender':'male',
'interset':'play'
},
async:false,
method:'GET',
success: function (data) {
var obj = JSON.parse(data);
//....
}
});
注:不用写new
特色介绍:
