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 超负荷 [一般是服务器的问题]

 * 

 *   项目中所谓的请求失败 分为两种，

 *     网络层面: 服务器没有返回任何的信息(或者和服务器都没有连接上)[根据不同的状态码，可以分析不同的原因]

 *     业务层面:  已经从服务器获取数据，只不过获取的数据不符合业务逻辑需要的，也算是 失败

*/