AJAX
AJAX是什么?
AJAX是Asynchronous JavaScript and XML 的简称,是一项允许JavaScript脚本向服务器发送HTTP请求,能够在不刷新页面的情况下获取后端数据的技术。AJAX不是一项新技术,而是许多成熟技术的集合。
AJAX技术包括:
- HTML
- CSS
- JavaScript
- The Document Object Model
- XML、XSLT、JSON(数据传输方式)
- XMLHttpRequest Object(AJAX核心对象)
AJAX的实现(四个步骤)
// 1 创建ajax核心对象
const xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
// 2 打开链接
xhr.open(
"get",
"https://www.fastmock.site/mock/01811b5c80dcd90570734587f22b934c/students/getStudents",
strue
);
// 3 发送(post请求时,数据放在请求体中--即send方法括号内)
xhr.send();
// 4 监听请求状态,接收数据
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
const data = xhr.responseText;
const result = JSON.parse(data);
// 处理数据
。。。
}
};
封装AJAX
考虑因素:
- 需要传入的参数,使用对象解构参数形式方便传参
- 使用不同的方法get/post请求时,携带数据的位置不同
- 传输的数据为字符串的键值对形式,如:name=zs&age=18
// 参数(请求类型、地址、是否异步、请求携带的数据、处理数据的回调)
const ajax = ({ type = "get", url, async = true, data = "", success }) => {
const xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
if (typeof data === "object") {
data = toStr(data);
}
if (type.toLowerCase === "get") {
xhr.open(type, url + "?" + data, async);
xhr.send();
} else {
xhr.open(type, url, async);
xhr.send(data);
}
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
const data = xhr.responseText;
const result = JSON.parse(data);
success(result);
}
};
};
// 将对象转为字符串的键值对形式:name=zs&age=18
function toStr(obj) {
let str = "";
for (const key in obj) {
if (Object.hasOwnProperty.call(obj, key)) {
const value = obj[key];
str += `&${key}=${value}`;
}
}
str = str.substring(1);
return str;
}
// 调用
ajax({
url:"https://www.fastmock.site/mock/01811b5c80dcd90570734587f22b934c/students/getStudents",
data: { name: "zs", age: 18 },
success(result) {
stusList.innerHTML = result.stus
.map((v) => {
return `<tr>
<td>${v.id}</td>
<td>${v.name}</td>
<td>${v.age}</td>
<td>${v.gender}</td>
<td>${v.address}</td>
</tr>
`;
}).join("");
},
});