四时宝库

原生ajax核心是XMLHttpRequest这个对象，用于于服务器进行交互。

基础使用步骤:

// 1. 创建XMLHttpRequest对象
let xhr = new XMLHttpRequest();
// 2. 配置请求信息
// 参数 method 是请求方法,url是服务器接口地址
xhr.open(method,url);
// 3. 配置请求头 (可以不配置，主要看接口的要求)
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
// 4. 发送请求
// 如果是get 请求，则没有body
xhr.send(body)
// 5. 处理响应结果
xhr.onreadystatechange = function(){
    if(xhr.readyState==4&&xhr.status==200){
        let text=xhr.responseText;   // 文本形式接收响应结果
        let xml=xhr.responseXML;    // xml形式接收响应结果
        let resultJson = xhr.response;  // Json格式的响应（需要后台支持）
        let result = JSON.parse(xhr.response)  //手动转成Json
    }
}
// 6.其他的一些配置
// 请求超时
xhr.timeout=2000
xhr.ontimeout = function(){
     alert("网络异常, 请稍后重试!!");
}
//网络异常回调    
xhr.onerror = function(){    
alert("你的网络似乎出了一些问题!");    
} 
// 取消请求
xhr.abort()

请求缓存问题（不发送新请求）：

因为一些浏览器的缓存问题，ajax请求只会使用第一次的请求，后续直接使用第一次请求的缓存结果。因此，解决方法是在请求接口后面添加动态的数据参数，比如时间戳

// demo
// Date.now() 时间戳
xhr.open('get','/api/info?t='+Date.now());

响应状态：

xhr.readyState

重复请求问题

当发送请求还没完成响应完成，又发出新的请求的解决方法,设置一个变量标记

const btns = document.querySelectorAll('button');
let xhr = null;
//标识变量
let isSending = false; // 是否正在发送AJAX请求
btns[0].onclick = function() {
    //判断标识变量
    if (isSending) xhr.abort(); // 如果正在发送, 则取消该请求, 创建一个新的请求
    xhr = new XMLHttpRequest();
    xhr.open("GET", '/api');
    xhr.send();
    //修改 标识变量的值
    isSending = true;
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4) {
            //修改标识变量
            isSending = false;
        }
    }
}