/*
函数功能:ajax请求发送数据
参数(对象):method:请求方式,字符串;
url:请求的地址,字符串;
datas:要传递的参数,对象结构,可选参数;
success:响应成功后要执行的函数;
error:响应失败后要执行的函数;
*/
function ajax(options) {
//1.参数处理:设置参数的默认值;
var method=options.method||'GET';
var url=options.url;
var datas=options.datas||{};
var success=options.success;
var error=options.error;
method = method.toUpperCase();
var arr=[];
for (var k in datas) {
arr.push(k+'='+datas[k]);
}
datas=arr.join('&');
//2.进行正常的请求发送;
var xhr=new XMLHttpRequest();
xhr.open(method,method==='GET'?url+'?'+datas:url);
if (xhr.method==='method') {
xhr.setRequestHeader('Content-Type','application/x-www-form-urlendecode');
}
xhr.send(method==='POST'?datas:null);
//3.进行响应体处理
xhr.onreadystatechange=function(){
//检测响应是否完毕
if (xhr.readyState===4) {
//对服务器返回的html页面的状态码检测
if(xhr.status===200||xhr.status===302){
//对成功进行操作-1.对响应体的数据进行JSON处理
if (xhr.getResponseHeader('Content-Type').indexOf('json')!==-1) {
success&&success(JSON.parse(xhr.responseText));
}else{
success&&success(xhr.responseText);
}
}else {
//对失败进行操作
error&&error();
}
}
};
}
//ajax函数调用:
ajax({
url:'./ajaxfn.php',
success:function(a){
console.log(a);
},
error : function(){
console.log('网络开小差了~~~~');
}
})
ajax请求的函数封装
最新推荐文章于 2022-06-21 10:07:36 发布