JS之AJAXXHR对象

AJAX是Asynchronous JavasSript And XML的简写，这项技术能够在不卸载页面的情况下发出HTTP请求，虽然名字中包含XML，但AJAX通信与数据格式无关

AJAX通信通常包含4个步骤：

1. 创建XMLHttpRequest对象
2. 发送HTTP请求
3. 接收服务器返回的数据
4. 更新网页数据

创建

AJAX技术的核心是XMLHttpRequest对象（简称XHR），可以直接使用new关键字实例化一个XHR对象

var xhr = new XMLHttpRequest()

注意： 如果要建立N个不同的请求，理论上需要使用N个不同的XHR对象。如果重用已存在的XHR对象，会终止之前通过该对象挂起的任何请求

发送请求

open()

XHR对象的open()方法用于发送请求，该方法接收三个参数：请求方式、请求地址和一个布尔值

xhr.open("GET","/api/test", true);

请求方式：请求方式比较常用的是GET和POST，也可以是PATCH、DELETE、OPTIONS等。这个字符串是不区分大小写的，但通常使用大写字母。

请求地址：请求地址通常是相对于执行代码的当前页面。如果需要发出跨域请求，后端要支持CORS，否则会报错

布尔值：布尔值表示是否异步发送请求的布尔值，默认为true，表示异步发送

其他：如果请求一个受密码保护的URL，可以把用于认证的用户名和密码作为第4和第5个参数传递给open()方法

send()

open()方法调用后，必须执行send()方法才会真正发送请求。如果是GET方式，send()方法无参数，或参数为null；如果是POST方式，send()方法的参数为要发送的数据

xhr.open('GET', 'https://www.86886.wang/api/tags', true); 
xhr.send(null);

接收响应

一个完整的HTTP请求由响应状态码、响应头集合和响应主体组成。在收到响应后，这些都可以通过XHR对象的属性和方法使用，主要有以下4个属性

responseText:    作为响应主体被返回的文本(文本形式)
responseXML:     如果响应的内容类型是'text/xml'或'application/xml'，这个属性中将保存着响应数据的XML DOM文档(document形式)
status:          HTTP状态码(数字形式)，比如200
statusText:      HTTP状态说明(文本形式)，比如OK

在接收到响应后，第一步是检测status状态，HTTP状态码为200表示请求成功，此时responseText属性的内容已经就绪。另外状态码304表示资源没有被修改，可以直接从浏览器缓存获取，这个响应也是有效的

无论内容类型是什么，响应主体的内容都会保存到responseText属性中。对于非XML数据而言（如JSON），responseXML属性的值将为null

if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
  console.log(xhr.responseText);
}else{
  console.log('Request fail:' + xhr.status);
}

同步请求

把open()方法的第三个参数设置为false，表示是同步请求，此时send()方法将会阻塞直到请求完成。由于JS是单线程的，所以会导致整个浏览器UI冻结，如果连接的服务器响应慢，那么用户的浏览器将冻结

开发中要避免使用同步请求，下面是同步请求的示例

<div id="result"></div>
<button id="btn">GET同步请求</button>
<script>
  btn.onclick = function() {
    var data = ajax();
    result.innerHTML = data;
  }
  function ajax() {
    var xhr = new XMLHttpRequest();
    if(xhr.readyState == 4) {
      if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
        return xhr.responseText;
      }
    }
    // 同步请求
    xhr.open('GET', 'https://www.86886.wang/api/tags', false);
    xhr.send();
  }
</script>

异步请求

异步请求需要检测XHR对象的readyState属性，该属性表示请求/响应过程的当前活动阶段，取值如下：

0(UNSENT):未初始化。尚未调用open()方法
1(OPENED):启动。已经调用open()方法，但尚未调用send()方法
2(HEADERS_RECEIVED):发送。己经调用send()方法，且接收到头信息
3(LOADING):接收。已经接收到部分响应主体信息
4(DONE):完成。已经接收到全部响应数据，而且已经可以在客户端使用了

只要readyState属性值发生变化，就会触发onreadystatechange事件，通常只需要对值为4时做判断，此时表示数据已经准备就绪

注意： 必须在调用open()之前指定onreadystatechange 事件处理程序才能确保跨浏览器兼容性，否则将无法接收readyState属性为0和1的情况

异步请求示例

<div id="result"></div>
<button id="btn">GET异步请求</button>
<script>
  btn.onclick = function() {
    ajax(function(data) {
      result.innerHTML = data;
    });
  }
  function ajax(cb) {
    var xhr = new XMLHttpRequest();
    // 异步请求
    xhr.onreadystatechange = function() {
      if(xhr.readyState == 4) {
        if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
          cb(xhr.responseText);
        }
      }
    }
    xhr.open('GET', 'https://www.86886.wang/api/tags', true);
    xhr.send();
  }
</script>

超时

XHR对象有一个timeout属性，表示多少毫秒后，如果请求仍然没有得到结果就会自动终止。默认值0，表示没有限制

如果请求超时，会触发ontimeout事件

function ajax(cb) {
  var xhr = new XMLHttpRequest();
  // 异步请求
  xhr.onreadystatechange = function() {
    if(xhr.readyState == 4) {
      if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
        cb(xhr.responseText);
      }
    }
  }
  xhr.open('GET', 'https://www.86886.wang/api/tags', true);
  xhr.ontimeout = function() {
    console.log('The request timed out.');
  }
  xhr.timeout = 5000; // 5s
  xhr.send();
}