读取 JSON 文件 JavaScript

在 Web 开发中，JSON 是一种常用的数据格式。如果需要在 JavaScript 中读取 JSON 文件，可以使用内置的 XMLHttpRequest 对象或 fetch API。本文将介绍如何使用这些方法读取 JSON 文件，并解析出其中的数据。

使用 XMLHttpRequest 对象

XMLHttpRequest 对象是一个在 JavaScript 中使用 HTTP 请求的 API。它可以用来获取 JSON 文件的内容，并将内容解析成 JavaScript 对象或数组。

1. 创建 XMLHttpRequest 对象

在使用 XMLHttpRequest 对象前，需要先创建一个实例：

const xhr = new XMLHttpRequest();

2. 发送 HTTP 请求

发送 HTTP 请求需要指定请求方法、URL 和是否异步等信息。对于 JSON 文件，通常使用 GET 方法进行请求。

xhr.open('GET', '/path/to/file.json', true);
xhr.send();

3. 解析 JSON 数据

当请求完成时，可以获取响应的数据并解析出其中的 JSON 数据。

xhr.onload = function() {
  if (xhr.status === 200) {
    const data = JSON.parse(xhr.responseText);
    // do something with the data
  }
};

完整代码如下：

const xhr = new XMLHttpRequest();
xhr.open('GET', '/path/to/file.json', true);
xhr.onload = function() {
  if (xhr.status === 200) {
    const data = JSON.parse(xhr.responseText);
    // do something with the data
  }
};
xhr.send();

使用 fetch API

fetch API 是一种更加现代的网络请求 API，它可以用来获取 JSON 文件的内容，并将内容解析成 JavaScript 对象或数组。

1. 发送 HTTP 请求

发送 HTTP 请求需要指定请求方法、URL 和请求参数等信息。对于 JSON 文件，通常使用 GET 方法进行请求。

fetch('/path/to/file.json')
  .then(response => response.json())
  .then(data => {
    // do something with the data
  });

2. 解析 JSON 数据

fetch API 通过 then 方法链式调用，可以在请求完成后将响应的数据解析成 JSON 对象或数组。

response => response.json()

完整代码如下：

fetch('/path/to/file.json')
  .then(response => response.json())
  .then(data => {
    // do something with the data
  });

总结

本文介绍了如何使用 XMLHttpRequest 对象和 fetch API 在 JavaScript 中读取 JSON 文件。使用 XMLHttpRequest 对象可以更加底层地控制请求的过程，而使用 fetch API 可以更加方便地处理异步请求。无论使用哪种方法，都需要将 JSON 数据解析成 JavaScript 对象或数组后才能进行进一步的处理。