如何使用JavaScript从JSON文件中获取数据

在前端开发中，获取JSON文件是一项常见的需求，通常用于从服务器端加载配置信息、数据等。JavaScript中获取JSON文件主要有两种方式：`XMLHttpRequest`和现代的`fetch` API。

使用 `XMLHttpRequest` 获取JSON

`XMLHttpRequest`是传统的获取服务器数据的方法，尽管现代开发中已经逐渐被`fetch` API所取代，但它仍然在一些老旧项目中广泛使用。

下面是一个使用`XMLHttpRequest`获取JSON文件的示例：

var xhr = new XMLHttpRequest();
// 初始化一个GET请求
xhr.open('GET', 'data.json', true);

// 设置响应类型为json，这样返回的数据会被自动解析为JSON对象
xhr.responseType = 'json';

// 设置请求完成后的回调函数
xhr.onload = function() {
if (xhr.status >= 200 && xhr.status < 300) {
// 请求成功时执行的代码
console.log(xhr.response);
} else {
// 请求失败时执行的代码
console.error('The request failed!');
}
};

// 设置请求发生错误时的回调函数
xhr.onerror = function() {
console.error('There was an error making the request.');
};

// 发送请求
xhr.send();

使用 `fetch` API 获取JSON

`fetch`是一个现代的、原生提供的方式，用于发起网络请求。它返回一个Promise，使得异步操作更加方便。

以下是一个使用`fetch`获取JSON文件的例子：

// 使用fetch API获取JSON文件
fetch('data.json')
.then(response => {
// 检查响应状态码是否代表成功的请求
if (!response.ok) {
throw new Error('Network response was not ok ' + response.statusText);
}
// 解析JSON数据
return response.json();
})
.then(data => {
// 处理JSON数据
console.log(data);
})
.catch(error => {
// 处理错误
console.error('There has been a problem with your fetch operation:', error);
});