可以计算AJAX加载了多少数据？

Question

我一直在忙着一些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 );
            }                               

        });
    };

抱歉我的英语不好.

Answer 1

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

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处理程序.当readyStateXHR对象变为2(*HEADERS_RECEIVED*)时,您可以访问Content-Length标题以获取总大小,然后等待事件触发xhr.readyState == 3(LOADING).

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