AJAX 基础

// 1 创建AJAX 实例对象 let xhr = new XMLHttpRequest;
// 2 打开 URL(发送请求前的一些处理)  xhr.open('get','./data.json',true);
// 3 监听 ajax 状态信息 xhr.onreadystatechange = function(){     // xhr.readyState AJAX 状态 0 - 4     // xhr.status xhr.statusText 服务器返回的网络状态码 2/3/4/5
    // if(xhr.readyState === 4 && xhr.status === 200){     //     console.log(xhr.response);     // }
    if(xhr.status === 200){         let n = xhr.readyState;         if(n === 2){             console.log('响应头信息先回来:',xhr.getAllResponseHeaders());         }else if( n === 4){             console.log('响应主体信息回来',xhr.responseText);             console.log('响应主体信息回来',JSON.parse(xhr.responseText));         }     }
    }
// 4 发送请求(请求主体的信息会基于 send 的时候发送给服务器) xhr.send(null);
/**  *  请求方式  *     GET   get,delete,head,options  *     post  post/put   *    */
/***  *  ajax 的状态 xhr.readyState  *    *    DONE:    4  响应主体信息返回  *    LOADING: 3  响应主体正在加载返回中  *    HEADERS_RECEIVED: 2 服务器已返回响应头的信息  *    OPENED:  1  已打开 执行了 OPEN  *    UNSENT:  0  未发送 开始创建 Xhr,默认状态就是0  *   */
/**  *  HTTP 网络状态码 xhr.status  *   *    以2开始的 200 服务正常返回数据(客户端向服务器发送请求，  *      服务器正常把数据给客户端了，但是数据是否为想要的就不一定了)  *   *    以3开始的  *          301 永久重定向(一般用于域名的转移)  *          302/307 临时转移或者临时重定向(一般用于服务器的 负载均衡)  *          304 读取的是协商缓存的数据  *   *    以4开始的  *          400 请求参数有误   *          401 无权访问  *          403 服务器拒绝执行  *          404 地址错误  *     *    以5开始的     *          500 服务器发生未知错误  *          503 超负荷 [一般是服务器的问题]  *   *   项目中所谓的请求失败 分为两种，  *     网络层面: 服务器没有返回任何的信息(或者和服务器都没有连接上)[根据不同的状态码，可以分析不同的原因]  *     业务层面:  已经从服务器获取数据，只不过获取的数据不符合业务逻辑需要的，也算是 失败 */