版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/CooliYellow/article/details/82941839
封装一个ajax请求
// 创建xhr
function createXHR(){
if(window.XMLHttpRequest){
return new XMLHttpRequest();
}
return new ActiveXObject("Microsoft.XMLHTTP");
}
// params: 对象的属性 转成 &拼接的键值对字符串
function params(data){
var arr = [];
for(var i in data){
var str = i + "=" + data[i];// type=send
arr.push(str);
}
return arr.join("&");
}
// ajax封装
function ajax(obj){
// 1. 创建XHR;
var xhr = createXHR();
// 2. http请求配置
// 参数预处理
obj.dataStr = params(obj.data);
if(/get/i.test(obj.method)){// 是否为GET请求;
obj.url += obj.dataStr.length>0 ? ("?"+ obj.dataStr) : "";// 参数拼接到url后面
}
// http请求配置
xhr.open(obj.method, obj.url, obj.async);
// 3. 调用send()方法
if(/get/i.test(obj.method)){// 是否为GET请求;
xhr.send(null);
}else{//如果是post请求
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoder");
xhr.send(obj.dataStr);
}
// 4. 监听状态
if(obj.async){// 异步请求
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
callBack();
}
}
}else{// 同步请求
callBack();
}
// 5. 结果处理
function callBack(){
if(xhr.status == 200){
// success函数
var res = xhr.responseText
obj.success(res);
}else{
// failure函数
var err = "xhr.status="+ xhr.status +",xhr.readyState="+ xhr.readyState
obj.failure(err);
}
}
}
// 使用demo
ajax({
method: "GET",
url: "requireUrl",
data: {
regname: "jack",
age: 18
},
async: true,
success: function(responseText){
console.log("服务器返回数据: "+responseText);
},
failure: function(code){
console.log("请求失败: " + code);
}
});