XMLHttpRequest 进度事件总数 = 0

Posted 2023-02-19

【中文标题】XMLHttpRequest 进度事件总数 = 0

【英文标题】：XMLHttpRequest progress event total = 0

【发布时间】：2021-07-31 09:40:48

【问题描述】：

我正在为使用 php 加载一些数据的 XMLHttpRequest 创建进度条，但进度事件显示总共为 0

这是我的代码：

const xhr = new XMLHttpRequest 
xhr.open('POST','../XML/ap.re.load.php')
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded",true);
xhr.send('id ='+lastid)
xhr.addEventListener('progress',(e) =>
    console.log(e);
)
xhr.onload = () => 

【问题讨论】：

响应中的 content-length 标头的值是多少？

尝试在发送前设置进度监听器

仍然无法工作@James

响应@bel3atar 上没有内容长度

没有进度监听器是否可以正常工作？如果没有，请先做好其余的工作。

【参考方案1】：

要使进度事件正常工作，您应该在响应标头中包含 Content-Length 标头。此标头的值用于填充进度事件中的total 值。如果缺少标头，则事件中的总值将丢失。

如果您的响应中缺少 Content-Length 标头，则可能是因为正在“分块”发送文件（检查响应中的 Transfer-Encoding 标头以获取值 chunked）。

在这种情况下，Content-Length 标头被省略。

有关此主题的参考请参阅this page about Transfer-Encoding on MDN：

数据以一系列块的形式发送。在这种情况下，Content-Length 标头被省略...

在我们的案例中，我们通过在响应中添加自定义 X-File-Length 标头来解决此问题，并在计算进度时将其用作 total 值的后备。