Javascript读取json文件方法实例总结

我们来详细讲解一下“Javascript读取json文件方法实例总结”。

什么是 JSON 文件

JSON 是一种轻量级的数据交换格式，使用易读易写的文本格式，可用于保存和传输结构化数据。JSON 中的键值对使用双引号包围，各个键值对之间用逗号分隔，而整个对象则使用花括号包围。以下是一个 JSON 对象的例子：

{
  "name": "John",
  "age": 30,
  "city": "New York"
}

Javascript 读取 JSON 文件

方法一：使用 XMLHttpRequest（XHR）对象

XMLHttpRequest 是一个在浏览器中使用的 API，它可以用于在后台与服务器交换数据。可以使用 XMLHttpRequest 对象来读取JSON文件。

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

// 调用
loadJSON('example.json', function(data) {
  console.log(data);
});

在上面的例子中，loadJSON 函数使用 XMLHttpRequest 对象来获取 JSON 文件，并在成功获取文件后将文件内容传递给回调函数。在回调函数中，可以将传递来的 JSON 字符串通过 JSON.parse() 方法转换为 JavaScript 对象。

方法二：使用 Fetch API

Fetch API 是一种从网络获取资源的新方法，它基于 Promise 设计，可用于获取文本、JSON 等数据。可以使用 Fetch API 来读取JSON文件。

fetch('example.json')
  .then(function(response) {
    return response.json();
  })
  .then(function(data) {
    console.log(data);
  });

在上面的例子中，fetch 函数发送一个 GET 请求来获取 JSON 文件，然后使用 response.json() 来将响应转换为 JSON 对象。最终，可以在回调函数中访问 JSON 对象。

总结

通过上面两个示例，我们学习了两种常用的读取 JSON 文件的方法，分别是使用 XMLHttpRequest 和 Fetch API。在具体场景中可以根据需要选择适合的方法，从而更好地读取和使用 JSON 文件。