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

xhr的progress事件

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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}`;
}
}
越来越多的平台(微信公众平台,新浪微博,简书,百度打赏等)支持打赏功能,付费阅读时代越来越近,特此增加了打赏功能,支持微信打赏和支付宝打赏。坚持原创技术分享,您的支持将鼓励我继续创作!