一、什么是AJAX
AJAX（ Asynchronous JavaScript And XML）就是异步的 JS 和 XML
通过 AJAX 可以在浏览器中向服务器发送异步请求
最大的优势：无刷新获取数据，就是可以在不刷新网页的情况下向服务器发送请求，用于实现懒加载（按需加载）
AJAX 不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式
二、AJAX的优缺点
优点
- 可以无需刷新页面与服务器端进行通信
- 允许你根据用户行为来更新部分页面内容
缺点
- 没有浏览历史，不能回退
- 存在跨域问题（同源）
- 对SEO 不友好
三、请求流程
如果只是测试的话，可以让浏览器临时禁用 CORS：
WIN+R输入以下启用 关闭浏览器安全策略的Chrome
chrome.exe --disable-web-security --user-data-dir=C:\Temp
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>AJAX GET 请求</title>
<style>
.GETBox {
width: 200px;
height: 100px;
border: 1px solid black;
}
</style>
</head>
<body>
<button class="GETBtn">点击发送GET请求</button>
<div class="GETBox"></div>
<script>
// 获取button元素
const GETBtn = document.getElementsByClassName("GETBtn")[0];
const GETBox = document.getElementsByClassName("GETBox")[0];
// 绑定点击事件
GETBtn.onclick = function () {
// 创建对象
const xhr = new XMLHttpRequest();
// 设置响应体类型
xhr.responseType = "json";
// 请求超时回调
xhr.timeout = function(){
alert("请求超时");
}
// 请求异常回调
xhr.onerror = function(){
alert("网络异常");
}
// 初始化请求：设置请求方法和URL(在这里接query参数)
xhr.open("GET", "http://shanhe.kim/api/za/chouq.php");
// 设置请求头
// xhr.setRequestHeader("Content-Type", "application/json");
// 发送请求(send里放请求体参数)
xhr.send();
// 取消请求
// xhr.abort();
// 事件绑定：处理服务端返回的结果
xhr.onreadystatechange = function () {
// 判断 xhr对象中的状态属性-readyState
// 0 UNSENT 未初始化: XHR对象已创建，但尚未调用open()方法初始化请求
// 1 OPENED 启动: 已调用open()方法建立与服务器的连接，但尚未调用send()发送请求
// 2 HEADERS_RECEIVED 发送完成: 已调用send()方法并发送请求至服务器，且服务器已返回响应头（HTTP状态码和响应头信息可用）
// 3 LOADING 接收中: 正在接收服务器返回的响应体数据，部分数据可能已可用
// 4 DONE 完成: 请求已完成，所有响应数据（包括状态码、响应头和响应体）均已接收并解析完毕
if (xhr.readyState == 4) {
// 判断响应状态码 200 401 403 404 500
// 2xx 成功 3xx 重定向
// 4xx 客户端错误 5xx 服务器错误
if (xhr.status >= 200 && xhr.status < 300) {
// 响应头
console.log(xhr.getAllResponseHeaders());
// 响应体
console.log(xhr.response);
// 将响应信息解析并放到页面中（这是没设置响应体类型时的写法）
// GETBox.textContent = JSON.parse(xhr.response).content;
// 设置了响应体类型之后可以直接用
GETBox.textContent = xhr.response.data.draw;
}
}
};
};
</script>
</body>
</html>
四、AJAX的IE缓存问题
在IE浏览器下，当访问同一个api时，IE浏览器可能会用上一次访问时缓存的数据，并不会更新到新的数据
解决方法：在请求路径中带一个不会重复的query参数，例如：
xhr.open("GET", "http://shanhe.kim/api/za/chouq.php?t="+Date.now());