加载JSON数据 - JavaScript

JSON（JavaScript Object Notation，JavaScript对象表示法）是一种轻量级的数据交换格式，被广泛用于Web应用程序中传输和存储数据。在JavaScript中，可以使用内置的JSON对象将JSON数据与JavaScript对象进行相互转换。在本篇文章中，我们将学习如何使用JavaScript读取和加载JSON数据。

加载JSON数据

在JavaScript中，可以使用XMLHttpRequest对象或fetch API异步从服务器中加载JSON数据。JSON数据通常存储于服务器端，而以HTML、CSS和JavaScript为基础的Web应用程序通常存储在客户端。为了获取JSON数据，我们需要执行一个HTTP请求。XMLHttpRequest对象和fetch API提供了可用于这一目的的API。

XMLHttpRequest对象

XMLHttpRequest对象是通过XMLHttpRequest()构造函数创建的。该对象提供了许多方法来发送HTTP请求、获取服务器的相应以及处理响应。

const xhr = new XMLHttpRequest();
xhr.open('GET', 'example.json', true);
xhr.onload = function() {
  if (this.status === 200) {
    const data = JSON.parse(this.responseText);
    console.log(data);
  }
};
xhr.send();

在上面的代码示例中，我们首先创建了一个XHR对象。我们使用open()方法打开一个GET请求以获取JSON数据。加载完成后，我们会检查responseText属性的状态码是否为200，表示响应的成功状态。如果成功，我们使用JSON.parse()将responseText属性传递给JSON.parse()方法，将JSON数据解析为JavaScript对象，可以随意使用。

Fetch API

Fetch API提供了一种更简单、更强大的方式来处理HTTP请求和响应。使用Fetch API发送请求，我们只需调用fetch()函数并传递请求URL即可。

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

在上述代码示例中，我们使用fetch()函数，它返回一个Promise。我们使用then()方法处理响应，并将响应转换为JSON对象。我们最后使用console.log()来日志打印数据并使用catch()方法处理请求出现的错误。

结论

JSON数据作为Web开发中的一部分，为我们提供了一种有效的方式来存储和传输数据。在JavaScript中，我们可以使用XMLHttpRequest对象或fetch API来加载JSON数据。尽管这两者都是用于获取JSON数据的有效方式，但Fetch API更加简单和强大。