首页 / 知识

关于javascript：如何从XMLHttpRequest获取进度

2023-04-16 05:07:00

How to get progress from XMLHttpRequest

是否可以获取XMLHttpRequest的进度(上传的字节数，下载的字节数)？

当用户上传大文件时，这对于显示进度栏很有用。标准API似乎不支持它，但是也许在任何浏览器中都有一些非标准扩展？毕竟，这似乎是一个非常明显的功能，因为客户端知道上载/下载了多少字节。

注意：我知道"轮询服务器以获取进度"替代方案(这是我现在正在做的事情)。这样做的主要问题(除了复杂的服务器端代码)是，通常，在上传大文件时，用户的连接已完全断开，因为大多数ISP的上游情况较差。因此，发出额外的请求并不像我希望的那样迅速。我希望有一种方法(可能是非标准的)来获取此信息，而浏览器始终都有。

对于上传的字节，这非常容易。只需监视xhr.upload.onprogress事件。浏览器知道它必须上传的文件的大小以及上传的数据的大小，因此它可以提供进度信息。

对于下载的字节(使用xhr.responseText获取信息时)，要困难一些，因为浏览器不知道服务器请求中将发送多少字节。在这种情况下，浏览器唯一知道的就是它接收的字节大小。

有一个解决方案，在服务器脚本上设置Content-Length标头就足够了，以便获得浏览器将要接收的字节的总大小。

有关更多信息，请访问https://developer.mozilla.org/en/Using_XMLHttpRequest。

例：
我的服务器脚本读取一个zip文件(需要5秒钟)：

1
2
3
4
5
6

$filesize=filesize('test.zip');

header("Content-Length:" . $filesize); // set header length
// if the headers is not set then the evt.loaded will be 0
readfile('test.zip');
exit 0;

现在，我可以监视服务器脚本的下载过程，因为我知道它的总长度：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

Firefox支持XHR下载进度事件。

这里对AJAX模式的进度指示器进行了很好的讨论：

http://ajaxpatterns.org/Progress_Indicator

最有前途的方法之一似乎是向服务器打开第二条通信通道，询问服务器已完成多少传输。

Firefox 3.5将支持上传进度事件

对于上载的总数，似乎没有一种处理方法，但是有些与您要下载的内容相似。一旦readyState为3，您就可以定期查询responseText以下载所有内容，直到一个String为止(这在IE中不起作用)，直到所有内容都可用时为止，它将转换到readyState 4。在任何给定时间下载的字节数将等于存储在responseText中的字符串中的总字节数。

对于上载问题的全有或全无的方法，由于您必须传递一个用于上载的字符串(并且可以确定该字符串的总字节数)，为readyState 0和1发送的总字节数将为0，而为readyState发送的总数为0 2是您传入的字符串中的总字节。在readyState 3和4中发送和接收的总字节将是原始字符串中的字节总和加上responseText中的总字节。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

<!DOCTYPE html>
<html>
<body>
<p id="demo">result
</p>
<button type="button" onclick="get_post_ajax();">Change Content</button>
<script type="text/javascript">
function update_progress(e)
{
if (e.lengthComputable)
{
var percentage = Math.round((e.loaded/e.total)*100);
console.log("percent" + percentage + '%' );
}
else
{
console.log("Unable to compute progress information since the total size is unknown");
}
}
function transfer_complete(e){console.log("The transfer is complete.");}
function transfer_failed(e){console.log("An error occurred while transferring the file.");}
function transfer_canceled(e){console.log("The transfer has been canceled by the user.");}
function get_post_ajax()
{
var xhttp;
if (window.XMLHttpRequest){xhttp = new XMLHttpRequest();}//code for modern browsers}
else{xhttp = new ActiveXObject("Microsoft.XMLHTTP");}// code for IE6, IE5
xhttp.onprogress = update_progress;
xhttp.addEventListener("load", transfer_complete, false);
xhttp.addEventListener("error", transfer_failed, false);
xhttp.addEventListener("abort", transfer_canceled, false);
xhttp.onreadystatechange = function()
{
if (xhttp.readyState == 4 && xhttp.status == 200)
{
document.getElementById("demo").innerHTML = xhttp.responseText;
}
};
xhttp.open("GET","http://it-tu.com/ajax_test.php", true);
xhttp.send();
}

</body>
</html>

Result