访问已下载的数据答案

【问题标题】：Accessing already downloaded data访问已下载的数据
【发布时间】：2013-03-08 15:16:13
【问题描述】：

我需要通过XmlHttpRequest 下载一个大型 (>100MB) 数据文件。数据来自第三方，我想在内容下载后逐渐显示。

所以我认为以下方法会起作用：

var req = new XMLHttpRequest();
req.open( "GET", mirror.url, true );
req.responseType = "arraybuffer";

req.onload = function( oEvent ) {
    console.log( "DONE" );
};
var current_offset = 0;
req.addEventListener("progress", function(event) {
    if( event.lengthComputable ) {
        var percentComplete = Math.round(event.loaded * 100 / event.total);
    }
    var data = req.response;
    // Fails here: req.response is null till load is called

    var dataView = new DataView( data );
    while( current_offset < dataView.byteLength ) {
        // do work
        ++current_offset;
    }

    console.log( "OFFSET " + current_offset + " [" + percentComplete + "%]" );

}, false);
try {
    req.send( null );
} catch( er ) {
    console.log( er );
}

遗憾的是，根据规范，.response 不可用。

有没有什么方法可以访问已经下载的数据，而不需要像使用Flash 这样可怕的变通方法？

编辑：

找到至少一个适用于 Firefox 的非标准解决方案：

responseType = "moz-chunked-arraybuffer";

另请参阅：WebKit equivalent to Firefox's "moz-chunked-arraybuffer" xhr responseType

【问题讨论】：

等等，你想发送 100MB 到我的浏览器？！哪个可能在我的手机上？
@DOK 我相信你足够聪明，不会在我们的手机上调用带宽和计算密集型网站。
你试过用 req.responseText 代替吗？
@JamieJag 不，我需要二进制数据。

标签： javascript html

【解决方案1】：

一种解决方案是使用范围请求仅下载文件的一部分以仅下载文件的一部分。有关详细信息，请参阅以下博客文章 HTTP Status: 206 Partial Content and Range Requests。

如果您可以控制服务器，您还可以在服务器端拆分文件并下载它的块。这样您就可以在收到不同的块时访问响应。

第三种方法是使用WebSockets 下载数据。

如果您无法控制要从中下载的服务器，并且其他选项都不起作用，您可能需要实现一个代理服务，该服务将充当中间并允许您仅下载其中的一部分。

【讨论】：

遗憾的是数据来自第三方，所以我必须按照他们提供的方式使用文件。
添加了另外两个可能的解决方案，当您无法控制服务器时可能会起作用。
只要 Chrome 不实现 Streams API，这似乎是唯一的解决方案。将不得不查看部分内容解决方法，因为我不想承担托管费用。

【解决方案2】：

您是否考虑过为此使用库？

我从来没有用它来加载 100MB 的文件，但是 PreloadJS 非常适合加载各种资产。

【讨论】：

有没有提到，你可以访问部分下载的状态？找不到。
嗯。我想我记得你可以，但也许你是对的。在数据加载完成之前可能无法实现。您可以访问 XHR.response，它是一个 ArrayBuffer 对象，但它可能仅在加载后才会填充。