JavaScript Ajax与Comet——“进度事件”的注意要点

2024年2月21日 156次阅读 来源: JS菌

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

    原文作者：JS菌
    原文地址: https://segmentfault.com/a/1190000004489307
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞