在完成加载之前获取 AJAX 响应的大小答案

【问题标题】：Get the size of an AJAX response before it finishes loading在完成加载之前获取 AJAX 响应的大小
【发布时间】：2014-10-13 17:24:46
【问题描述】：

我正在使用 jQuery 通过 AJAX 从服务器加载数据，这是一个相当正常的用例。诀窍是我想在请求完成之前从请求中获取预期的内容长度；我希望能够在加载数据时显示进度条。

有什么办法可以做到这一点吗？我不得不想象有。谢谢！

更新：服务器必须做很多工作才能生成响应，所以我不想用两个请求来命中它，这会破坏目的。

【问题讨论】：

使用HEAD 请求
搜索lengthComputable
正如@StephenThomas 指出的，尝试HEAD request ；解析Content-Length 标头的响应（如果存在）？
我应该指定这一点，服务器必须做很多工作来生成响应，无论如何它都不是静态页面。我宁愿不要打两次。有时页面可能需要 15 秒才能生成（因此需要一个进度条哈哈）。

标签： javascript jquery ajax content-length

【解决方案1】：

您可以在ajax 调用中使用xhr 事件，然后将progress event 连接到该事件，并检查event.lengthComputable= true 是否会获得价值，否则您将无法获得价值。您可以查看以下代码。

$.ajax({
    type: 'POST',
    dataType: 'json',
    url: URL,
    cache: false,
    error: function (xhr, ajaxOptions, thrownError) {
        alert(xhr.responseText);
        alert(thrownError);
    },
    xhr: function () {
        var xhr = new window.XMLHttpRequest();
        //Download progress
        xhr.addEventListener("progress", function (evt) {
            console.log(evt.lengthComputable);
            if (evt.lengthComputable) {
                var percentComplete = evt.loaded / evt.total;
                console.log(percentComplete );
            }
        }, false);
        return xhr;
    },
    beforeSend: function () {
      // before send
    },
    complete: function () {
       // complete.
    },
    success: function (json) {
       // success;
    }
});

【讨论】：