主要内容
ajax的封装
内附详细注释
function $ajax(obj) {
function objtostring(obj) {//判断传入的值是否为对象
if (Object.prototype.toString.call(obj).slice(8, -1) === "Object") {
let arr = []
for (var atter in obj) {
arr.push(atter + "=" + obj[atter]);
}
return arr.join("&");
} else {
throw new Error("你输入的不是一个纯碎的对象");
}
}
let ajax = new XMLHttpRequest();
//1.默认get请求,此参数可以省略。
obj.type = obj.type || "get";
//2.接口地址不能为空
if (!obj.url) {
throw new Error("接口地址有误!");
}
//3.发送数据get和post的兼容问题
if (obj.date) {//判断数据是否存在,同时判断数据是否是对象
if (Object.prototype.toString.call(obj.date).slice(8, -1)) {
obj.date = objtostring(obj.date);
} else {
obj.date = obj.date;
}
}
//4.数据存在,get传输数据方式?
if (obj.date && obj.type === "get") {
obj.url += "?" + obj.date;
}
//6.是否异步,如果同步的话,无需进行onreadystatechange事件监听。
if (obj.async === "false" || obj.async === false) {
obj.async = false;
} else {
obj.async = true;
}
ajax.open(obj.type, obj.url, obj.async);
//5.数据存在,post方式传输数据?
if (obj.date && obj.type === "post") {
ajax.setRequestHeader("content-type", "application/x-www-form-urlencoded");
ajax.send(obj.date);
} else {
ajax.send();//发送解析
}
//7.同步和异步的判断方法
//8.获取接口数据
//想办法把获取接口数据传出去,不能将处理数据的过程放到函数内部
//在函数调用中操作数据,必须在函数调用中获取数据
if (obj.async) {//异步
ajax.onreadystatechange = function () {
if (ajax.readyState === 4) {
if (ajax.status === 200) {
obj.success && typeof obj.success === "function" && obj.success(ajax.responseText);
//console.log(ajax.responseText);
} else {//接口错误!
obj.error && typeof obj.error === "function" && obj.error("异步——接口地址有误" + ajax.status);
}
}
}
} else {//同步
if (ajax.status === 200) {
//console.log(ajax.responseText);
obj.success && typeof obj.success === "function" && obj.success(ajax.responseText);
} else {//接口错误!
//throw new Error("接口地址有误" + ajax.status);
obj.error && typeof obj.error === "function" && obj.error("同步——接口地址有误" + ajax.status);
}
}
}
//对象做参数:
//对象是无序的,顺序可变的。
//如果直接在函数单个设置参数:顺序不能乱。
$ajax({
type: "get",//请求方式(类型)
url: "http://localhost/NZ-1903/0303/13conn.php1",
date: {//传输的数据,默认没有数据
a: 4,
b: 5,
c: 6
},
async: true,//是否异步 , 默认异步! 值不是false就是true
success: function (str) {//请求成功的回调函数, str:数据,随意对数据进行操作。
console.log(str);
},
error: function (err) {//请求失败的回调函数 err:失败的错误信息
throw new Error(err);
}
})