有以下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。