Javascript 带有进度条和Gzip响应的Ajax

大家好

我是这个论坛的新手，但我会尽力遵守规则。 我目前正在研究一个更好的解决方案，在发送处理Gzip响应的Ajax请求时，可以使用进度条

为此，我们需要lengthComputable，不幸的是，在PHP中使用header（“Content Encoding:gzip”）时，无法设置内容长度

为了实现它，我使用了这段代码，但是我在ajax中遇到了一个问题，因为即使我收到了一个200 OK状态代码，ajax也被认为是失败的，我必须在fail中进行回调

它工作得很好，pako速度很快，但只有在ajax上才会失败。

我正在使用：

（由巴科负责解开拉链）

（utf8解码组件）

提前感谢您的帮助

javascript代码：

//-----------------------------------
// ajax progress listener method
//-----------------------------------
!function (e) {
"function" == typeof define && define.amd ? define(["jquery"], e) : "object" 
== typeof exports ? module.exports = e(require("jquery")) : e(jQuery)
}(function (e) {
var n = e.ajax.bind(e);
e.ajax = function (r, t) {
    "object" == typeof r && (t = r, r = void 0), t = t || {};
    var o;
    o = t.xhr ? t.xhr() : e.ajaxSettings.xhr(), t.xhr = function () {
        return o
    };
    var s = t.chunking || e.ajaxSettings.chunking;
    o.upload.onprogress = null;
    var i = n(r, t);
    return i.progress = function (e) {
        var n = 0;
        return o.addEventListener("progress", function (r) {
            var t = [r], o = "";
            3 == this.readyState && s && (o = this.responseText.substr(n), n 
            = this.responseText.length, t.push(o)), e.apply(this, t)
        }, !1), this
    }, i.uploadProgress = function (e) {
        return o.upload && o.upload.addEventListener("progress", function 
    (n) {
            e.apply(this, [n])
        }, !1), this
    }, i
}
});


//-----------------------------------
// atos decodeURIComponent for UTF8
//-----------------------------------
function decodeURI(arr) {
for (var i = 0, l = arr.length, s = '', c; c = arr[i++]; )
    s += String.fromCharCode(
            c > 0xdf && c < 0xf0 && i < l - 1
            ? (c & 0xf) << 12 | (arr[i++] & 0x3f) << 6 | arr[i++] & 0x3f
            : c > 0x7f && i < l
            ? (c & 0x1f) << 6 | arr[i++] & 0x3f
            : c
            );
    return s
}

//-----------------------------------
// ajax request
//-----------------------------------
let progressBar = document.querySelector(".progress");

const request = $.ajax({
    type: "GET",
    url: 'test.php',
    dataType: 'json',
    cache: false,
    data: JSON.stringify({test:true}),
    async: true
}).progress(function (e) {
    if (e.lengthComputable) {
        progressBar.style.width = Math.round((e.loaded * 100) / e.total) + "%";
    }
});

request.done(response => {
    console.log('no success despite 200 OK');
    const result = JSON.parse(decodeURI(pako.ungzip(atob(response))));
    parseJson(result);
}).fail(response => {
    parseJsonerror()
});

function parseJson(result) {
    /* do stuff */
}

function parseJsonerror(){
    /* any error */
}

//-----------------------------------
//ajax进程侦听器方法
//-----------------------------------
!职能（e）{
函数“==typeof define&&define.amd？define（[“jquery”]，e）：“对象”
==导出类型？module.exports=e（require（“jquery”）：e（jquery）
}（职能（e）{
var n=e.ajax.bind（e）；
e、 ajax=函数（r，t）{
“object”==typeof r&（t=r，r=void 0），t=t |{}；
var o；
o=t.xhr？t.xhr（）：e.ajaxSettings.xhr（），t.xhr=函数（）{
返回o
};
var s=t.chunking | | e.ajaxSettings.chunking；
o、 upload.onprogress=null；
var i=n（r，t）；
返回i.进度=功能（e）{
var n=0；
返回o.addEventListener（“进度”，函数（r）{
var t=[r]，o=”“；
3==this.readyState&&s&&o=this.responseText.substr（n），n
=this.responseText.length，t.push（o）），e.apply（this，t）
}，！1），这个
}，即上传进度=函数（e）{
返回o.upload&&o.upload.addEventListener（“进度”），函数
（n）{
e、 应用（此[n]）
}，！1），这个
}，我
}
});
//-----------------------------------
//用于UTF8的atos解码组件
//-----------------------------------
函数解码URI（arr）{
对于（变量i=0，l=arr.length，s=''，c；c=arr[i++]；）
s+=String.fromCharCode(
c>0xdf&&c<0xf0&&i

PHP代码：

<?PHP
header('Connection: Keep-Alive');
header("Content-Type: application/json");

/*do stuff*/

$result = json_encode($stuff);
$result64 = base64_encode(gzdeflate($result, 6, ZLIB_ENCODING_DEFLATE));
header("Content-Length:" . mb_strlen($result_list));
echo $result64;