从本地文件系统加载 JSON 文件时出现“JSON 输入意外结束”错误

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;

                }
            }

title.json

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

我通过 ajax 调用将我的 h1 更新为“stackoverflow”以及错误

未捕获的 SyntaxError：JSON 输入意外结束 在 JSON.parse() 在 XMLHttpRequest.xhr.onreadystatechange

以下是我的疑问： 1.我希望AJAX用于客户端和服务器之间的通信。虽然我通过修改浏览器设置避免使用服务器，但 ajax 调用对我来说是如何工作的？合乎逻辑吗？ 2.JSON文件包含数据作为对象。那我为什么要使用JSON.parse（responseText）？（JSON.parse（）用于将字符串从服务器转换为我希望的客户端对象）。如果我直接给@987654324 @我不确定。 3.readystate变成了4，但是status一直是0，为什么会这样？怎么解决呢。

请简要说明这种无服务器 ajax 调用的工作原理。我对 ajax 很陌生，对此感到困惑。

Answer 1

这是因为 readystate 更改会触发多次，而您希望它触发一次。您需要检查 readystate 是否等于 4 并且 status 是否为 200 （或者在您的情况下为零，因为您使用的是文件协议）。或者改用 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))

解析错误发生在您正在加载的文件返回其他内容（如错误页面）或它具有导致解析器阻塞的特殊隐藏字符。