javascript---为ajax创建一个进度条指示器

xhr的progress事件

在XMLHttpRequest2级中添加了一个progress事件, 这个事件会在浏览器接收新数据期间周期性的触发. 而onprogress事件处理程序会接收到一个event对象, 其target属性是XHR对象, 但会额外包含三个属性: lengthComputable, position和totalSize. 其中, lengthComputable是一个表示进度信息是否可用的布尔值, position表示已经接收的字节数, totalSize表示根据Content-Length响应头部确定的预期字节数, 有了这些信息, 我们就可以创建一个进度条指示器

let xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
  if (xhr.readyState == 4) {
    if ((xhr.status >= 200) && (xhr.status <= 300) || xhr.status == 304) {
      alert('ok');
    } else {
      alert('error');
    }
  }
}

xhr.onprogress = function (event) {
  let divstatus = document.getElementById('status');
  if (event.lengthComputable) {
    divstatus.innerHTML = `received ${event.position} of ${event.totalSize} bytes}`;
  }
}