进度事件定义了客户端服务器之间通信相关的事件,用以表示从接收响应数据到通信完成过程的不同阶段的进度情况。
有6个进度事件:
- loadstart:接收到响应数据的第一个字节时触发
- progress:接收到响应期间持续不断触发
- error:在请求发生错误时触发
- abort:因为调用abort()方法而终止连接时触发
- load:接收到完整响应数据时触发
- loadend:通信完成或触发error,abort,load事件后触发
请求最先触发loadstart事件,之后触发一个或多个progress事件,再之后触发error,abort,load事件,最后触发loadend事件。
progress 事件
progress事件会在浏览器接收数据期间周期性的触发,并且事件处理程序接收到event对象。event的target是XHR对象,并且还有三个属性:
- lengthComputable:进度信息是否可用的布尔值
- position:已接收的字节数
- totalSize:根据响应头部确定的预期字节数
根据这些信息可以知道当前接收到数据的进度
xhr.onprogress = function(event){
if(event.lengthComputable){
alert(event.position+"/"+event.totalSize);
}
}
onprogress事件处理程序必须在调用open()方法之前调用。
absort事件
XHR对象的absort方法能够停止已经发送的请求。请求停止时readyState状态置为0,并且不会触发readystatechange事件。
absort方法经过以下几个阶段:
1.停止请求
2.如果readyState是0,将opened的send() flag重置,或者状态是已完成(readyState是4),进入下一步;
否则,运行以下几步:
a.改变readyState为4
b.重置send() flag
c.触发readystatechange事件
d.如果upload complete flag 是false,执行以下几步:
设置upload complete flag 为true;
依次触发进度事件progress,abort,loadend。
e.触发进度事件progress
f.触发进度事件abort
g.触发进度事件loadend
3.重置readyState为0
load事件
响应接收完毕会触发load事件,可以用以代替readystatechange事件,不需要检查readyState属性,避免了每次readyState的改变都需要触发readystatechange事件。onload事件处理程序会接收到event对象,target属性指向XHR对象实例,但是不是所有浏览器都实现了event对象,因此仍然需要使用XHR对象变量。
xhr.onload = function(){
if(status == 200||status == 304){
alert(xhr.responseText);
}
}