可以计算出使用 AJAX 加载了多少数据？答案

【问题标题】：Possible to calculate how much data been loaded with AJAX?可以计算出使用 AJAX 加载了多少数据？
【发布时间】：2012-05-11 22:09:09
【问题描述】：

我一直忙于一些 AJAX 代码。我想计算已加载的数据量，并以百分比显示。

我所有的预加载信息都在“反馈”中。我可以计算它包含多少 DATA（以字节为单位），我还可以查看进度吗？就像它加载时一样：10kb、20kb、30kb 等

我的代码：

function calc(page)
    {
    $('#pageLoad h2').animate({ marginTop : '0px'}, 200);
        $.ajax(
        {
            url:            './pages/page.php',
            type:           'POST',
            data:           'page='+page,
            success:        function( feedback )
            {
                $('#content').html( feedback );
            }                               

        });
    };

对不起，我的英语不好。

【问题讨论】：

首先你应该修复代码中的语法错误并使用data: {page: page} insetead of data: 'page='+page
@ThiefMaster 后者是完全有效的语法（但在问题中它不应该有额外的+'
法律，我的错。我曾经有 2 个帖子值，但我删除了一个。
@tandu：确实如此，但我高度怀疑他在转义字符串中的& 等字符。所以最好让 jQuery 来做。

标签： javascript jquery ajax

【解决方案1】：

这是可能的。 XHR 有一个progress event。唯一的问题是访问 XHR 对象 - 不幸的是，beforeSend 只接收jqXHR 对象，而不是底层的 XHR 对象。它也不能作为包装器的属性访问。但是，您可以通过将以下选项添加到 $.ajax() 来挂钩 XHR 对象的创建过程：

xhr: function () {
    var xhr = $.ajaxSettings.xhr(); // call the original function
    xhr.addEventListener('progress', function (e) {
        if (e.lengthComputable) {
            var percentComplete = e.loaded / e.total;
            // Do something with download progress
        }
    }, false);
    return xhr;
}

这是我最初的解决方案。与 jQuery 结合起来非常困难，因为您不能轻易地挂接到 onreadystatechange 处理程序，并且在设置后无法安全地替换它：

您需要添加一个自定义的onreadystatechange 处理程序。当 XHR 对象的 readyState 变为 2 (*HEADERS_RECEIVED*) 时，您可以访问 Content-Length 标头以获取总大小，然后等待事件触发 xhr.readyState == 3 (LOADING em>).

然后你可以通过查看xhr.responseText.length来计算进度。
但是，这只会触发一次。所以你需要启动一个计时器（使用setInterval()），它将检查就绪状态和响应大小，例如每 100 毫秒。请求完成后，您将再次使用 clearInterval() 停止间隔。

【讨论】：

+1 打败我，这是要走的路，在 here 上还有更多代码示例等。
感谢您向我指出这些事件。比使用计时器更清洁。
是的，我实际上并没有看到您的回答不是关于进度事件，而是关于间隔，直到我发表评论之后。我刚刚注意到你的 cmets 关于旧 jQ 版本等的一个老问题，并认为你可能也找到了进度事件，在我发布之后，我想你会看看它并更新你的答案，所以一切都是好吧，我想这会很好。