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

版权声明:原创文章,如想转载,请注明原文网址,注明出处;否则,禁止转载;谢谢配合! https://blog.csdn.net/c_kite/article/details/78473331

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}`;
  }
}
阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页