在本教程中，我们将看到如何使用纯Javascript在本地加载JSON文件。在Web应用程序中包含或加载JSON文件的正确方法，我们将使用XMLHttpRequest而不是JQuery来使用正确的方法

替代jQuery的JavaScript

有一个纯JavaScript替代jQuery的 $ .getJSON（） 和 $ .parseJSON（）。到目前为止，主要的麻烦制造者是这样的信念： .JSON 您可以在HTML文档的head标签之间插入文件，然后访问结构化JSON。

不正当的方式

<script type="text/javascript" src="appDataServices.json"></script>

许多示例将证明您可以使用以下简单功能访问数据。实际上，这实际上不是加载JSON文档而是创建Javascript对象。此技术不适用于真正的JSON文件。

// 'JSON' data included as above
data = '[{"Spider-man" : "is ok", "Need-For-Speed" : "Is My Favourate Game"}]';

// Function to 'load JSON' data
function load() {
  var someData_notJSON = JSON.parse(data);
  console.log(someData_notJSON[0].Need-For-Speed); // Will log "Is My Favourate Game"
}

如果您不打算使用实际的JSON文件，则可以在单独的位置创建Javascript对象 .js 文件可能是要走的路。如果像我一样，您确实需要使用纯Javascript处理JSON，这是您需要做的。

正确的方法

–创建一个新的XMLHttpRequest

这里的线索是jQuery方法 $ .getJSON（） 这是简写 $ .ajax（）。以这种方式请求本地文件似乎是一种奇怪的方式，但它提供了最大的灵活性，同时也减少了混乱。

 function loadJSON(callback) {   

    var xobj = new XMLHttpRequest();
        xobj.overrideMimeType("application/json");
    xobj.open('GET', 'appDataServices.json', true); // Replace 'appDataServices' with the path to your file
    xobj.onreadystatechange = function () {
          if (xobj.readyState == 4 && xobj.status == "200") {
            // Required use of an anonymous callback as .open will NOT return a value but simply returns undefined in asynchronous mode
            callback(xobj.responseText);
          }
    };
    xobj.send(null);  
 }

上面的函数将创建一个新的 XMLHttpRequest 并异步加载 appDataServices.json。我已经使用异步方法了，但是如果要同步加载，可以将参数更改为false。幸运的是，所有现代浏览器都支持本机 JSON.parse 方法。还记得我们的匿名回调吗？使用方法如下。

用法

–将JSON字符串解析为对象

function init() {
 loadJSON(function(response) {
  // Parsing JSON string into object
    var actual_JSON = JSON.parse(response);
 });
}

获取更多帖子 的JavaScript