字符串替换不适用于从 XMLHttpRequest 请求返回的值答案

【问题标题】：String replace not working with value returned from a XMLHttpRequest request字符串替换不适用于从 XMLHttpRequest 请求返回的值
【发布时间】：2017-12-07 19:23:09
【问题描述】：

我有一个 (Laravel) PHP 代码，它以这种方式返回一个长字符串：

echo json_encode([
    'created' => $count,
    'total' => $num_stores,
    'progressValue' => round((100 / $num_stores) * $count, 2),
    'token' => str_repeat('|',1024*64)
]);

我需要在 javascript 中获取这个字符串并清理它，删除所有“|”特点。但它似乎不起作用。

这是我的 javascript 代码：

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
    try {
        if (xhr.readyState == 4) {
            alert('[XHR] Done');
        } else if (xhr.readyState > 2) {
            var new_response = xhr.responseText.substring(xhr.previous_text.length);
            var cleanedResponse = new_response.replace(/[|]/g, '');

            console.log('CLEANED RESPONSE: ' + cleanedResponse);
            var result = JSON.parse( cleanedResponse );
            console.log('AFTER THE PARSE');

            xhr.previous_text = xhr.responseText;
        }
    } catch (e) {
        console.log(xhr.responseText);
        alert("[XHR STATECHANGE] Exception: " + e);
    }
};
xhr.open("POST", "...", true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.setRequestHeader("X-CSRF-TOKEN", jQuery('meta[name="csrf-token"]').attr('content'));
xhr.send(params);

当我尝试解析 JSON 时，我总是遇到异常，并且在控制台中我仍然看到“|” “cleanedResponse”变量中的字符。

如果我更换它们怎么可能？

【问题讨论】：

标签： javascript php json laravel output-buffering

【解决方案1】：

当xhr.readyState == 3 时，xhr.responseText 仅保存部分数据 - 3 表示响应尚未完全下载。您可能尝试仅解析不完整的部分 JSON 字符串，因此无效且不可解析。等待下载完整响应 (xhr.readyState == 4)，然后尝试清理和解析 JSON。

有关 XHR 状态的进一步说明，请参阅 https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/readyState。

【讨论】：

我需要解析部分数据，我需要实现一个进度条。当我处于状态 == 4 时，过程结束。
当然可以。在 state > 2 中更改进度条，但在字符串完全加载之前不要执行JSON.parse，此时 state == 4。
此外，XHR 有一个特殊事件，当下载一段数据时会触发该事件，并为您提供有关已加载多少以及剩余多少要加载的数字。它特别适用于像您这样的情况。您无需测量 responseText 的长度。更多信息请参见developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/…
xhr.addEventListener("progress", function(p) { console.log("Loaded " + p.loaded + " of " + p.total); });