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

Posted 2023-03-14

【中文标题】字符串替换不适用于从 XMLHttpRequest 请求返回的值

【英文标题】：String replace not working with value returned from a XMLHttpRequest request

【发布时间】：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”变量中的字符。

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

【参考方案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); );