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

最新推荐文章于 2022-04-06 22:34:09 发布

刘翾

最新推荐文章于 2022-04-06 22:34:09 发布

阅读量732

点赞数

分类专栏： JavaScript javascript入门到进阶文章标签： ajax xmlhttprequest

本文链接：https://blog.csdn.net/c_kite/article/details/78473331

版权

JavaScript 同时被 2 个专栏收录

84 篇文章 2 订阅

订阅专栏

javascript入门到进阶

71 篇文章 19 订阅

订阅专栏

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}`;
  }
}