有以下6个进度事宜:
loadstart: 在吸收到相应数据的第一个字节时触发。
progress: 在吸收相应数据时期延续的触发
error: 在要求发作错误时触发
abort: 在因挪用abort() 要领而停止衔接时触发
load: 在吸收到完全的相应数据时触发
loadend: 在通讯完成或许触发error, abort, load事宜后触发。
如今一切的主流浏览器都支撑load事宜, 前五个除了IE其他的都支撑
load事宜
下面是运用示例:
xhr.onload = function() {
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
alert(xhr.responseText);
} else {
alert("Request was unsuccessful:" + xhr.status);
}
}
放到open要领之前。
如:
var xhr = new XMLHttpRequest();
// xhr.onreadystatechange = function () {
// if (xhr.readyState == 4) {
// if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
// console.log(xhr.responseText);
// } else {
// console.log("error");
// }
// }
// };
xhr.onload = function () {
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
console.log(xhr.responseText);
} else {
console.log("error");
}
};
xhr.open("get", "getexample.php", true);
xhr.send(null);
相应吸收终了后将触发load事宜,因而也就没有必要去搜检readyState属性了。
progress事宜
onprogress事宜处置惩罚顺序会吸收一个event对象,其target属性是XHR对象,但包含着三个分外属性:
lengthComputable
position
totalSize
个中lengthComputable示意进度信息是不是可用的布尔值,position示意已吸收的字节数,totalSize示意依据Content-Length相应头部肯定的预期字节数。
依据这些信息,就能够建立一个进度指示器:
xhr.onprogress = function () {
if (event.lengthComputable) {
document.getElementById("status").innerHTML = "Received " + event.position + " of " + event.totalSize + " bytes.";
}
};
要注意的是position
已改成loaded
;totalSize
已改成total
。