[练习] 模拟ajax
2017-09-04 本文已影响47人
Top_Chenxi
模拟ajax
// 封装一个简单的Ajax
// options是一个对象,里面可以包括的参数为:
// type: post或者get,可以有一个默认值
// data: 发送的数据,为一个键值对象或者为一个用&连接的赋值字符串
// onsuccess: 成功时的调用函数
// onfail: 失败时的调用函数
let myAjax = (url, options) => {
let ajax,
data,
param = "",
type;
// create XML object
ajax = window.XMLHttpRequest ? new XMLHttpRequest() : new activeXObject("Microsoft.XMLHTTP");
// parse data
data = options.data ? options.data : -1;
if (typeof data == "object") {
for (let key in data) {
param += `${key}=${data[key]}&`;
}
} else {
param = `${data}?timeStamp=${new Date().getTime()}`;
}
param = param.replace(/&$/, "");
type = options.type ? options.type.toUpperCase() : "GET";
if (type == "GET") {
ajax.open("GET", `${url}?${param}`, true);
ajax.send();
} else {
ajax.open("POST", url, true);
ajax.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
ajax.send(param);
}
//solve result
ajax.onreadystatechange = () => {
if (ajax.readyState === 4) {
if (ajax.status === 200) {
options.onsuccess(ajax.responseText, ajax);
} else {
if (options.onfail) {
options.onfail(ajax);
}
}
}
};
return ajax;
}