javascript - 可以计算使用 AJAX 加载了多少数据吗？

Question

我一直忙于处理一些 AJAX 代码。我想计算已加载了多少数据，并想用百分比显示它。

我所有预加载的信息都在“反馈”中。我可以计算它包含多少数据(以字节为单位)并且我还可以查看进度吗？就像加载时一样: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 );
            }                               

        });
    };

抱歉我的英语不好。

Answer 1

这是可能的。 XHR 有一个 progress event .唯一的问题是访问 XHR 对象——不幸的是 beforeSend 只接收 jqXHR 对象而不是底层的 XHR 对象。它也不能作为包装器的属性访问。但是，您可以通过向 $.ajax() 添加以下选项来 Hook 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 header 以获取总大小，然后使用 xhr.readyState == 3 ( LOADING) 等待事件触发。

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