4

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

        });
    };

对不起我糟糕的英语。

4

1 回答 1

7

这是可能的。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()。

于 2012-05-11T22:31:45.077 回答