JavaScript Ajax與Comet——“進度事件”的注意要點

ad6623 發(fā)布于2019-08-19 17:40 / 2615人閱讀

摘要：有以下個進度事件在接收到響應(yīng)數(shù)據(jù)的第一個字節(jié)時觸發(fā)。在接收響應(yīng)數(shù)據(jù)期間持續(xù)的觸發(fā)在請求發(fā)生錯誤時觸發(fā)在因調(diào)用方法而終止連接時觸發(fā)在接收到完整的響應(yīng)數(shù)據(jù)時觸發(fā)在通信完成或者觸發(fā)，，事件后觸發(fā)。

有以下6個進度事件：

loadstart: 在接收到響應(yīng)數(shù)據(jù)的第一個字節(jié)時觸發(fā)。

progress: 在接收響應(yīng)數(shù)據(jù)期間持續(xù)的觸發(fā)

error: 在請求發(fā)生錯誤時觸發(fā)

abort: 在因調(diào)用abort() 方法而終止連接時觸發(fā)

load: 在接收到完整的響應(yīng)數(shù)據(jù)時觸發(fā)

loadend: 在通信完成或者觸發(fā)error， abort， load事件后觸發(fā)。

現(xiàn)在所有的主流瀏覽器都支持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);

響應(yīng)接收完畢后將觸發(fā)load事件，因此也就沒有必要去檢查readyState屬性了。

progress事件

onprogress事件處理程序會接收一個event對象，其target屬性是XHR對象，但包含著三個額外屬性：

lengthComputable

position

totalSize

其中l(wèi)engthComputable表示進度信息是否可用的布爾值，position表示已經(jīng)接收的字節(jié)數(shù)，totalSize表示根據(jù)Content-Length響應(yīng)頭部確定的預期字節(jié)數(shù)。

根據(jù)這些信息，就可以創(chuàng)建一個進度指示器：

xhr.onprogress = function () {
    if (event.lengthComputable) {
        document.getElementById("status").innerHTML = "Received " + event.position + " of " + event.totalSize + " bytes.";
    }
};

要注意的是position已改為loaded;totalSize已改為total。