progress 相关事件 异步 ajax

loadstart — Fires when the fi rst byte of the response has been received.
progress — Fires repeatedly as a response is being received.
error — Fires when there was an error attempting the request.
abort — Fires when the connection was terminated by calling abort().
load — Fires when the response has been fully received.
loadend — Fires when the communication is complete and after fi ring error, abort, or load.

 

opera11和ie8以上只支持load事件，暂时没有浏览器支持loadend事件

 

load事件:
当响应被完全接收以后，就会触发该事件，因此不用去检测readystate属性。虽然该事件会有event对象，它的target指向xhr实例，但不是所有浏览器都支持，所以里面还是用xhr.state:
var xhr = createXHR();
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);

 

progress事件:
浏览器接受到响应数据时周期性触发该事件，和load事件一样，应该在open方法之前配置，该事件的事件对象里面有三个额外的属性:
lengthComputable:  判断处理信息是否可用
position:  目前已经接收到的字节数量
totalSize:  由Content-Length 头部信息返回的预计总共会接收到的字节数（假设有返回这个header)
var xhr = createXHR();
xhr.onprogress = function(event){
var 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);