进度事件

最新推荐文章于 2024-03-12 19:30:34 发布

kalinara

最新推荐文章于 2024-03-12 19:30:34 发布

阅读量253

点赞数

分类专栏： JavaScript 文章标签：进度事件

本文链接：https://blog.csdn.net/kalinara/article/details/76256118

版权

JavaScript 专栏收录该内容

45 篇文章 0 订阅

订阅专栏

Process Events规范定义了与客户端服务器通信有关的事件。

【进度事件】：

1. loadstart   在接收到响应数据的第一个字节时触发
2. progress    在接收响应期间持续触发
3. load        在接收到完整的响应数据时触发
4. error       在请求发生错误时触发
5. abort       调用abort()方法后触发
6. loadend     在通信完成时或者error、abort、load事件后触发

【进度事件触发顺序】

当调用send()方法时，每个请求从触发loadstart事件开始 –>
一个或多个progress事件 –>
（load、error、abort）事件中的一个 –>
loadend事件

【load事件】

var xhr = createXHR();
xhr.onload = function(){
        if((xhr.status >= 200 && xhr.status < 300)||xhr.status == 304){
            console.log(xhr.responseText);
            }
        else{
            console.log("请求失败："+xhr.status);
        }
};
xhr.open("get","url",true);
xhr.send(null);

用load事件替代了readystatechange事件，免去判断readyState是否等于4。参见博文《Ajax》发送异步请求的代码
其target属性是XHR对象实例。
只要浏览器接收到服务器的响应，不管响应的状态如何，都会触发load事件，所以还是要检查status属性，确保数据可使用。

【progress事件】

progress事件会在浏览器接收数据期间周期性地触发。
其target属性是XHR对象；
lengthComputable属性表示进度信息是否可用；
position属性表示已经接收的字节数；
totalSize属性表示预期字节数（由响应头部Content-Length确定）。

【创建进度指示器】

var xhr = createXHR();
xhr.onload = function(){
        if((xhr.status >= 200 && xhr.status < 300)||xhr.status == 304){
            console.log(xhr.responseText);
            }
        else{
            console.log("请求失败："+xhr.status);
        }
};
xhr.progress = function(){
    var progressBar = document.getElementById("进度条ID")；
    if(event.lengthComputable){
        progressBar.innerHTML = "已接收:"+event.position;
    }
};
xhr.open("get","url",true);
xhr.send(null);