AJAX复习记录
一、什么是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());