AJAX 简单使用

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打印出来，逐个研究...