function ajaxFun(opt){
//初始化
var type = "post"; // 发送方式post|get
var asyn = true; // 是否异步
var withCredentials = false; // 跨域
var data = {}; // 查询参数
var url = ""; // 访问地址
var outtime = 10000; // 超时时间 单位毫秒
var success = function(){}; // 返回成功后的处理函数
var error = function(){}; // 错误后的处理函数
var onouttime = function(){}; // 超时后的处理函数
if(!opt.url){
console.log('必填访问地址');
return false;
}
//替换传入值
if(opt.type){ type = opt.type; }
if(opt.asyn){ asyn = opt.asyn; }
if(opt.withCredentials){ withCredentials = opt.withCredentials; }
if(opt.data){ data = opt.data; }
if(opt.url){ url = opt.url; }
if(opt.outtime){ outtime = opt.outtime; }
if(opt.success){ success = opt.success; }
if(opt.error){ error = opt.error; }
if(opt.onouttime){ onouttime = opt.onouttime; }
//拼接查询字符串
var datastr = "";
for(key in data){
if(datastr) { datastr += "&"; }
datastr = datastr + `${key}=${data[key]}`;
}
// 获取 XMLHttpRequest对象
var xmlHttp = new XMLHttpRequest();
// 连接服务器
xmlHttp.open(type, url, asyn); //api地址
// 跨域
if(withCredentials){
xmlHttp.withCredentials = withCredentials;
}
// 设置请求头的Content-Type
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
// 发送数据
xmlHttp.send(datastr);
// 回调函数 success
xmlHttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
success(this.responseText);
}
};
xmlHttp.ontimeout = function(){
onouttime();
};
xmlHttp.onerror = function (){
error();
console.log(arguments);
}
}
//调用
ajaxFun({
type : "post",
asyn : true,
withCredentials : true,
data : {"id":3,"proid":5},
url : "api.txt",
success : function(re){
console.log(re);
},
outtime : 2000,
onouttime : function(){
console.log('超时了');
}
})
原生ajax封装
最新推荐文章于 2023-09-20 10:27:08 发布