javascript - 从本地文件系统加载 JSON 文件时出现 "Unexpected end of JSON input"错误

Question

您好，我正在尝试使用 AJAX 调用将 title.JSON 文件中的数据检索到 index.html 文件中。这两个文件都驻留在我的本地文件系统中。我已经创建了一个新的 chrome 实例并已设置其目标属性为 "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe"--disable-web-security --user-data-dir="c:/chromedev"(我知道这不是一个好的做法。只是尝试一种无服务器的方式)。下面是我的代码

<h1><a id="headName" href="#">Name</a></h1>
<p onclick="spaLoad()">NameChange</p>

function spaLoad(){
            var xhr = new XMLHttpRequest();
            xhr.open('GET','title.json',true);
            xhr.send();

                xhr.onreadystatechange=function () {
                    //var obj=xhr.responseText;
                     var obj = JSON.parse(xhr.responseText);
                    console.log(obj);
                    console.log(xhr.readyState);
                    console.log(xhr.status);
                    console.log(xhr.statusText);
                    //document.getElementById('headName').innerHTML = obj;
                    document.getElementById('headName').innerHTML = obj.name;

                }
            }

标题.json

{"name":"stackoverflow","age":"100"}

我通过 ajax 调用将我的 h1 更新为“stackoverflow”并出现错误

Uncaught SyntaxError: Unexpected end of JSON input at JSON.parse () at XMLHttpRequest.xhr.onreadystatechange

我的疑问是: 1.我希望AJAX用于客户端和服务器之间的通信。虽然我通过修改浏览器设置来避免使用服务器，但 ajax 调用对我来说是如何工作的？这符合逻辑吗？ 2.JSON文件包含作为对象的数据。那么为什么我应该使用JSON.parse(responseText)？(JSON.parse()用于将字符串从服务器转换为客户端的对象，我希望)。如果我直接给出var obj=xhr.responseText;我未定义。 3.readystate变成4了，但是status一直是0，为什么会这样？如何解决。

请简要解释一下这个无服务器ajax调用是如何工作的。我对ajax很陌生，对此感到困惑。

Answer 1

这是因为就绪状态更改会触发多次，而您希望它触发一次。您需要检查readystate是否等于4，状态是否为200(或者在您的情况下为零，因为您使用的是文件协议(protocol))。或者改用 onload 和 onerror 事件。

如果您仍然遇到解析错误，则需要调试返回的内容。

//see what is returned
console.log(xhr.responseText)
//Look to see if you have hidden characters in the file.
console.log(escape(xhr.responseText))

发生解析错误的原因可能是您正在加载的文件返回其他内容(例如错误页面)，或者它具有导致解析器阻塞的特殊隐藏字符。