散扯Ajax

一、 闲来无事，带你手写简单的demo并代码解释

    // new XMLHttpRequest 实例
    let xhr = new XMLHttpRequest();

    // 使用open方式发送请求
    xhr.open('GET',"https://api.github.com/repos/Microsoft/TypeScript",true);
    xhr.responseType = "json";
 
    // 监听readystatechange
    xhr.onreadystatechange = function(){
        if(xhr.readyState === 4 && xhr.status === 200){
            console.log(xhr.response)
        }
    }

    // 发送请求 参数为传送数据
    xhr.send(null);

• XMLHttpRequest：Ajax 就是通过XMLHttpRequest 对象发送请求

• open：初始化XMLHttpRequest

        void open(
          string method, // 请求方式 GET、POST、HEAD、PUT、POST、DELETE
          string url,  // 请求地址
          optional boolean async, // 是不是异步 默认是 true
          optional string user, // 表示用于认证的用户名，默认为空字符串。该参数可选
          optional string password // 表示用于认证的密码，默认为空字符串。该参数可选。
        );
  

• onreadystatechange：监听函数，readystatechange事件发生时（实例的readyState属性变化），终止XMLHttpRequest请求，导致readyState变化，它也监听到

• readyState：实例对象的当前状态，有以下值：

  • 0：XMLHttpRequest实例创建，但是没有执行open()
  • 1：执行了open()，但是还没有执行send()
  • 2：执行了send()，并且服务端返回的状态码和头部信息
  • 3：接受body数据
  • 4：接受body数据完成或者接受失败信息

• status：服务器返回的状态码

  • 200, OK，访问正常
  • 301, Moved Permanently，永久移动
  • 302, Move temporarily，暂时移动
  • 304, Not Modified，未修改
  • 307, Temporary Redirect，暂时重定向
  • 401, Unauthorized，未授权
  • 403, Forbidden，禁止访问
  • 404, Not Found，未发现指定网址
  • 500, Internal Server Error，服务器发生错误

二、上面的demo，我发现应该给我的是JSON格式，然而给的是字符串形式，那怎么解决呢？

• XMLHttpReques提供了一个responseType这个属性，告诉服务器，返回制定的类型数据

• responseType有以下的值：

• ”“（空字符串）：等同于text，表示服务器返回文本数据。
• “arraybuffer”：ArrayBuffer 对象，表示服务器返回二进制数组。
• “blob”：Blob 对象，表示服务器返回二进制对象。
• “document”：Document 对象，表示服务器返回一个文档对象。
• “json”：JSON 对象。
• “text”：字符串。

三、突然有一天，后端小哥跟我说，你传的值应该是json类型的，而且还将验证数据token添加头部，瞬间感觉不好了，得继续找阮一峰老师了

• 一看文档，原来XMLHttpRequest还提供了一个方法：setRequestHeader()，接下就去解决后端小哥的需求了

  xhr.setRequestHeader("Content-type","application/json") // 传的值应该是json类型
  xhr.setRequestHeader("token","xxxx-xxxx-xxxx-xxxx") // 将验证数据token添加头部传给后端小哥
  

  头部有哪些，请自行查找吧

四、项目经理，突然有一天来看我们项目做的如何了，不给力的事发生了，后端小哥查询的数据时间太长了，导致页面出现好久的loading，项目经理说，这用户体验太差了，不能让用户等太着急……

• 经过讨论，后端小哥也不能解决长时间等待问题，但是我们大前端可以啊，设置一下超时就不访问

  xhr.timeout = 2000 // 以毫秒为单位，2000ms之后，后端小哥还不给数据，就终止请求了
  

• 突然请求终止了，我想让用户知道为什么突然没数据了，XMLHttpRequest 还提供了 ontimeout 事件，超时了，就执行这个时间

  xhr.ontimeout = function(){
    alert("请求超时，请稍后重试！")
  }
  

五、项目经理又来需求了，不吹了，我得去写代码了，剩下的请看阮一峰老师对Ajax的详细是说

戳一下，进入阮一峰老师的博客---AJAX