xhr 一些事件

• timeout -- Level 2 新增，IE8+支持，用于设置请求的超时时间，单位是毫秒

  xhr.timeout = 15;
  

• ontimeout -- Level 2 新增，IE10+支持，如果请求超时了，会触发 ontimeout 事件

  xhr.ontimeout = function () {
      // 超过 15毫秒，响应结果还没有得到，就会触发这个超时事件
      alert('请求超时，请刷新重试');
    }
  

• onload -- 请求成功后触发的事件
• onerror -- 请求失败后触发的事件
• onloadstart -- 请求开始的时候，触发的事件
• onloadend -- 请求完成(包括成功和失败)后触发的事件
• onprogress -- 客户端下载（接收）数据的时候，触发的事件 相当于 readyState=3的时候
  • 场景 进度条 <progress max="0" value="0"></progress>

xhr.onprogress = function (e) {
      console.log(e); // e.loaded 表示已经接收到了多少数据  e.total 表示数据总量
      let pro = document.querySelector('progress');
      pro.max = e.total;     // pro.max 进度条最大值
      pro.value = e.loaded;  // pro.value 进度条当前值
      // 接收响应结果的时候，才会触发，如果接收的数据量特别多，
      客户端要分块接收，每接收一部分数据，这个事件就触发一次
    
    }
    

• upload.onprogress --上传进度事件 (上传文件)

 xhr.upload.onprogress = function (e) {
      // console.log(e.loaded); // 上传了多少
      // console.log(e.total); // 文件总大小     
            }