JavaScript 怎样获取 JSON 文件

在现代Web开发中，JSON（JavaScript Object Notation）文件被广泛用于存储和传输数据。JavaScript提供了多种方法来获取JSON文件中的数据，本文将介绍几种常见的方式。

1. 使用XMLHttpRequest对象（XHR）

这是一种传统的获取JSON文件的方法，适用于较旧的浏览器。以下是一个简单的示例：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'data.json', true);
xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
        var data = JSON.parse(xhr.responseText);
        console.log(data);
    }
};
xhr.send();

在上述代码中，首先创建了一个XMLHttpRequest对象，然后使用open方法指定请求的类型、URL和是否异步。当请求状态改变时，会触发onreadystatechange事件，在请求完成且状态码为200时，将响应文本解析为JSON对象。

2. 使用fetch API

fetch是一种更现代的获取数据的方法，它返回一个Promise对象，使得异步操作更加方便。示例如下：

fetch('data.json')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

在这个例子中，fetch函数发起一个GET请求，返回一个响应对象。然后使用json方法将响应体解析为JSON格式，最后在控制台输出数据。如果发生错误，会在catch块中捕获并打印错误信息。

3. 动态导入（import）

如果你的环境支持ES6模块，还可以使用动态导入的方式获取JSON文件。例如：

async function getData() {
    const data = await import('data.json');
    console.log(data);
}
getData();

这种方式简洁明了，但需要注意浏览器的兼容性。

根据不同的项目需求和浏览器支持情况，选择合适的方法来获取JSON文件。掌握这些方法，能够更有效地处理和利用JSON数据，提升Web应用的开发效率和性能。