HTML | DOM onprogress 事件

HTML DOM onprogress 事件指在接收数据时触发。在使用 Ajax 对服务器进行长时间请求（例如，向服务器做回调请求时），该事件非常有用。

语法

obj.onprogress = function(){myScript};

参数

• obj: 要触发 onprogress 事件的 XMLHttpRequest 对象。

示例

下面是一个使用 XMLHttpRequest 和 onprogress 事件获取文件的示例：

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    document.getElementById("myDiv").innerHTML =
    this.responseText;
  }
};
xhr.onprogress = function(event) {
  if (event.lengthComputable) {
    var percentComplete = event.loaded / event.total * 100;
    document.getElementById("demo").innerHTML = percentComplete + '% downloaded';
  }
};
xhr.open("GET", "ajax_info.txt", true);
xhr.send();

上面的代码中，XMLHttpRequest 对象 xhr 响应的 onreadystatechange 事件在每次状态改变（readyState）时都会被触发，但是在传输数据时，我们需要知道当前的传输进度，这时就需要使用 onprogress 事件。

当数据正在传输时，浏览器会多次触发 onprogress 事件，同时传递一个 event 对象。通过这个对象，我们可以得到当前已经传输的字节数（event.loaded）和总字节数（event.total），从而可以计算出当前传输的进度百分比，然后将这个值显示在页面上。如果无法得到总字节数，则 event.total 返回 0。

总结

HTML DOM onprogress 事件是一个非常有用的事件，可以在长时间请求时帮助我们获取数据传输的进度。我们只需要在 XMLHttpRequest 对象上添加一个 onprogress 事件处理程序并计算数据传输的进度百分比即可。