JavaScript Ajax与Comet——“进度事宜”的注重要点

2024年5月1日 193次阅读 来源: 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
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞