无需下载即可打开 JSON 文件 - JavaScript

简介

在 Web 开发中，JSON 文件是经常需要使用的。通常情况下，我们需要将 JSON 文件下载到本地并使用工具打开。但是，使用 JavaScript 可以实现在浏览器中直接打开 JSON 文件，无需下载。

实现方法

通过 XMLHttpRequest 对象加载 JSON 文件，再通过解析 JSON 数据渲染到页面中，即可实现在浏览器中直接打开 JSON 文件的效果。

以下是一个基本的实现方法：

function loadJSON(callback) {

    var xobj = new XMLHttpRequest();
    xobj.overrideMimeType("application/json");
    xobj.open('GET', 'example.json', true);
    xobj.onreadystatechange = function () {
          if (xobj.readyState == 4 && xobj.status == "200") {
            callback(JSON.parse(xobj.responseText));
          }
    };
    xobj.send(null);
}

loadJSON(function(response) {
  // 渲染 JSON 数据到页面
  document.getElementById("output").innerHTML = JSON.stringify(response);
});

该方法通过创建一个 XMLHttpRequest 对象来加载 JSON 文件，然后解析 JSON 数据并将其渲染到 DOM 元素中。

注意事项

• 在使用 XMLHttpRequest 对象时，需注意浏览器的跨域安全策略，如果访问的 JSON 文件不在本域，则需在服务器端设置 CORS。
• 在解析 JSON 数据时，需注意 JSON 字符串需要符合格式规范，否则会抛出异常。

参考资料

• MDN - XMLHttpRequest
• JSON.org