ajax的两种请求方式

ajax是前后端交互的一种方式(在不提交整个页面的情况下,向服务器发送请求,实现页面的局部属性)

创建 ajax请求
 var xhr= new XMLHttpRequest();
    xhr.readyState  前端请求状态码
    xhr.status      服务器返回的结果的状态码 
    console.log(xhr.readyState); 
     // 0  未初始化状态(创建一个请求  并没有配置请求的相关信息)

配置 ajax请求 
xhr.open(请求方式 get/post , 请求地址url(get放地址之后也可以接数据?user=&pwd=&phone=&email=), 是否异步) 
同步(基本已经废弃)/异步   true=>异步  false=>同步(建议不要用)
console.log(xhr.readyState); 
// 1 正在加载状态  (请求信息已经配置完毕  并和服务器建立连接(TCP连接)  请求还没有发送)

发送 ajax请求 
    xhr.send();
    console.log(xhr.readyState);   //  1发送请求状态

ajax创建的方式、配置方式、发送方式是一样的 请求方式有两种

1.xhr.onreadystatechange方法

//监听状态变化
   xhr.onreadystatechange = function () {
         //请求时的  返回的请求状态以及响应的状态码 
       //  2  加载完毕 (服务器已经接受到请求的相关信息)
       //  3  交互     (请求正在处理)
       //  4  完成     (服务器会返回响应结果 =>进行中|成功|重定向|失败|服务器有问题)
       //                                      1**  200   3**    4**  5**   **=>不确定后两位
        console.log(xhr.readyState); 
        //会触发3次  只有当请求状态码为4时  服务器处理完成并返回
        //当服务器响应状态码为200才是请求成功  失败原因 看上两行  
        
        if (xhr.readyState === 4 && xhr.status === 200) {
     
        //xhr.readyState === 4 && xhr.status === 200     
        //只有当请求状态码为4并且响应状态码为200时  ajax请求一定是成功的 
            console.log(xhr.responseText);
            //xhr.responseText 返回响应的数据
        }
    }
     /*响应的具体 HTTP 状态码
             200 - 服务器成功返回网页
             404 - 请求的网页不存在
             503 - 服务器暂时不可用 */

当你在onreadystatechange判断中只出现xhr.status === 200条件时

  xhr.onreadystatechange = function () {
      
     if (xhr.status === 200) {
        
            console.log(xhr.responseText);
        }
    }

ajax可能也会请求成功，但是控制台会出现以下报错
出现两次是因为里面有请求状态的变化 处理请求状态以及处理完成时都会返回数据

2.xhr.onload方法

  xhr.onload = function () {
     
        console.log(xhr.readyState);
        console.log(xhr.responseText);
       //req.responseText 返回响应的数据
    }

进入onload之后，请求状态码只会出现了4。只有处于状态码4，请求说明已完成，响应已就绪的情况下，才会进入onload。只要进入onload请求中，一定是已经到4这个状态了。
但是 进入onload状态之后的 响应状态码 就不确定了 当请求地址输入错误时，也可能会进入onload状态

如果想实现页面尚未加载的状态，加载页面实现进度条或转圈。

则使用onprogress方法
 xhr.onprogress = function(){
     
                console.log("加载状态时"+ xhr.readyState);
            }