AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
常用于： 网页局部更新
Ajax工作原理
解析原理
1. 创建XHR对象(由于现在IE5,IE6已不在使用，所以不做过多的判断)
let xhr = new XMLHttpRequest();
2. XHR的用法
在使用XHR对象时，要调用的第一个方法open()， 接收3个参数： 要发送的请求类型（get、post 等）、请求的URL和表示是否异步的布尔值
xhr.open("get","data.php",true);
send()方法接收一个参数，即要作为请求主体发送的数据，如果不需要通过请求主体发送数据，则必须传入null
xhr.send(null);
3. 调用send()后，请求就回被分到服务器。在收到响应后，响应的数据会自动填充XHR对象，相关属性如下：
1) responseText: 作为响应主体被返回的文本
2) respoonseXML: 如果响应的内容类型时xml,这个属性中将保存包含的响应数据的XML DOM 文档
3) status: 响应的HTTP状态
4) statusText: HTTP状态的说明
4. 但是在多数情况下我们会先检查readyState属性，该属性表示请求/响应过程的当前活动阶段
0: 为初始化。尚未调用open()方法
1: 启动。已经调用open()方法，但尚未调用send()方法
2: 发送。已经调用send()方法，但尚未接收到响应
3: 接收。已经接收到部分响应数据。
4: 完成。已经接收到全部响应数据，而且已经在客户端使用了
只要readState属性的值发生变化，都会触发一次readystatechange事件
案例
<div class="box"></div>
<div class="tips" style="display: none">数据加载中...</div>
<script>
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if(xhr.readyState==1){
document.querySelector('.tips').style.display = 'block';
}
if (xhr.readyState == 4) {
if(xhr.status >= 200 && xhr.status < 300 || xhr.status == 304){
document.querySelector('.box').innerText = xhr.responseText;
document.querySelector('.tips').style.display = 'none';
}else{
console.log('error:' + xhr.status);
}
}
}
xhr.open('get', 'data02.php', true);
xhr.send(null);
</script>
服务器端
<?php
// 写业务主体
sleep(2); // 为了交互效果，睡2s
echo "success";
XHR 对象更好玩的属性可以把XHR打印出来，逐个研究...
