Ajax-进度事件

进度事件定义了客户端服务器之间通信相关的事件，用以表示从接收响应数据到通信完成过程的不同阶段的进度情况。
有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);
    }
}