Progress Events 是W3C 的工作草案,定义了客户端服务器端通信。这些事件最初只针对XHR,现
在也推广到了其他类似的API。有以下6 个进度相关的事件。
loadstart:在接收到响应的第一个字节时触发。
progress:在接收响应期间反复触发。
error:在请求出错时触发。
abort:在调用abort()终止连接时触发。
load:在成功接收完响应时触发。
loadend:在通信完成时,且在error、abort 或load 之后触发。
每次请求都会首先触发loadstart 事件,之后是一个或多个progress 事件,接着是error、abort
或load 中的一个,最后以loadend 事件结束。
这些事件大部分都很好理解,但其中有两个需要说明一下。
load 事件
Firefox 最初在实现XHR 的时候,曾致力于简化交互模式。最终,增加了一个load 事件用于替代
readystatechange 事件。load 事件在响应接收完成后立即触发,这样就不用检查readyState 属性
了。onload 事件处理程序会收到一个event 对象,其target 属性设置为XHR 实例,在这个实例上
可以访问所有XHR 对象属性和方法。不过,并不是所有浏览器都实现了这个事件的event 对象。考虑
到跨浏览器兼容,还是需要像下面这样使用XHR 对象变量:
let xhr = new XMLHttpRequest();
xhr.onload = function() {
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
alert(xhr.responseText);
} else {
alert("Request was unsuccessful: " + xhr.status);
}
};
xhr.open(“get”, “altevents.php”, true);
xhr.send(null);
只要是从服务器收到响应,无论状态码是什么,都会触发load 事件。这意味着还需要检查status
属性才能确定数据是否有效。Firefox、Opera、Chrome 和Safari 都支持load 事件。
progress 事件
Mozilla 在XHR 对象上另一个创新是progress 事件,在浏览器接收数据期间,这个事件会反复触
发。每次触发时,onprogress 事件处理程序都会收到event 对象,其target 属性是XHR 对象,且
包含3 个额外属性:lengthComputable、position 和totalSize。其中,lengthComputable 是
一个布尔值,表示进度信息是否可用;position 是接收到的字节数;totalSize 是响应的Content-
Length 头部定义的总字节数。有了这些信息,就可以给用户提供进度条了。以下代码演示了如何向用
户展示进度:
let xhr = new XMLHttpRequest();
xhr.onload = function(event) {
if ((xhr.status >= 200 && xhr.status < 300) ||
xhr.status == 304) {
alert(xhr.responseText);
} else {
alert("Request was unsuccessful: " + xhr.status);
}
};
xhr.onprogress = function(event) {
let divStatus = document.getElementById(“status”);
if (event.lengthComputable) {
divStatus.innerHTML = “Received " + event.position + " of " +
event.totalSize +
" bytes”;
}
};
xhr.open(“get”, “altevents.php”, true);
xhr.send(null);
为了保证正确执行,必须在调用open()之前添加onprogress 事件处理程序。在前面的例子中,
每次触发progress 事件都会更新HTML 元素中的信息。假设响应有Content-Length 头部,就可以
利用这些信息计算出已经收到响应的百分比。
javascript基础从小白到高手系列一千三十二:进度事件
最新推荐文章于 2024-08-22 14:32:34 发布