初学HTML/CSS/JS：解析JSON遇语法错误及数组值获取undefined问题

我来帮你拆解下遇到的两个问题，其实它们都和你处理响应数据的方式有关，咱们一步步来解决：

问题2：无法通过myArr[i].src获取值，返回undefined #

你代码里有个关键错误：var response = JSON.stringify(this.responseText);

this.responseText本身就是服务器返回的JSON格式字符串，你再用JSON.stringify()处理它，相当于把这个字符串又转成了带引号的“字符串的字符串”——比如原本的[{"src":"sample.jpg"...}]会变成"[{\"src\":\"sample.jpg\"...}]"。之后JSON.parse(response)得到的不是数组，而是一个普通字符串，字符串的[0]是第一个字符[，自然没有src属性，所以返回undefined。

问题1：Firefox提示XML解析错误 #

这个错误是因为浏览器误把JSON内容当成XML来解析了。当你用XMLHttpRequest请求文件时，如果没有明确指定期望的响应类型，Firefox可能会根据文件扩展名或者默认的MIME类型尝试用XML解析器处理，而JSON语法不符合XML规范，就会抛出这个错误。

修正后的完整代码 #

function getHighlights() {
  var highlightsJSON = "highlights.json";
  var xmlhttp = new XMLHttpRequest();
  
  xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      // 直接解析responseText，不需要额外stringify
      var myArr = JSON.parse(this.responseText);
      // 这里可以正常访问数组元素的属性了
      document.getElementById("highlights-container").innerHTML = myArr[0].src;
      
      // 如果要渲染所有条目，可以用循环构建内容，比如：
      // let container = document.getElementById("highlights-container");
      // let content = "";
      // myArr.forEach(item => {
      //   content += `
      //     <div class="highlight-item">
      //       <img src="${item.src}" alt="${item.title}">
      //       <h3>${item.title}</h3>
      //       <p>${item.desc}</p>
      //     </div>
      //   `;
      // });
      // container.innerHTML = content;
    }
  };
  
  xmlhttp.open("GET", highlightsJSON, true);
  // 设置请求头，明确告诉服务器我们要JSON格式的响应
  xmlhttp.setRequestHeader("Accept", "application/json");
  xmlhttp.send();
}

额外提示 #

如果是在本地用file://协议打开页面测试，部分浏览器的安全策略可能会限制XMLHttpRequest读取本地文件，导致请求失败。这时候可以启动一个简单的本地服务器：

• Python：在项目目录运行python -m http.server（Python3）或python -m SimpleHTTPServer（Python2）
• Node.js：先安装http-server（npm install -g http-server），然后在项目目录运行http-server

这样用http://localhost:8000访问页面，就能正常请求JSON文件了。

内容的提问来源于stack exchange，提问作者user539820