XMLHttpRequest展示请求进度

进度条

# progress 事件

该事件会在浏览器接收新数据期间周期性的触发。它接收一个event对象，还包含三个额外的属性：

• lengthComputable：表示进度信息是否可用
• loaded： 表示已经接收的字节数
• total: 表示根据Content-Length确定的总字节数

# HTML 代码

<div style="border:1px solid #ccc;height:20px;width:300px;padding: 2px;">
    <div id="progress" style="background:#3eaf7c;height:20px;width:0"></div>
</div>

# js 代码

window.onload = function() {
    var progressDiv = document.getElementById('progress')
    var http = new XMLHttpRequest()
    http.onprogress = function(event) {
        if (event.lengthComputable) {
            let progress = event.loaded / event.total * 300
            progressDiv.style.width = progress + 'px'
        }
    }
    http.onload = function(event) {
        console.log(http.status) // 200
        // console.log(http.responseText);
    }
    http.open('get', '/img/a.jpeg', true)
    http.send()
}