通过 JavaScript 获取 JSON 数据

JSON(JavaScript 对象表示法) 是一种常用的数据交换格式。在适当的情况下，您可能需要使用 JavaScript 来读取 JSON 数据，以方便与您的网站或应用程序集成。

1. 使用 XMLHttpRequest 对象进行请求

虽然您可以使用多种技术来获取 JSON 数据，但是最常见的方法是使用 XMLHttpRequest 对象来发起 AJAX 请求。

var xhr = new XMLHttpRequest();
xhr.open('GET', '/data.json', true);
xhr.responseType = 'json';
xhr.onload = function() {
  var status = xhr.status;
  if (status === 200) {
    var data = xhr.response;
    console.log(data);
  } else {
    console.error('请求失败 ' + status);
  }
};
xhr.send();

这将从与当前页面相同的目录中获取一个名为 data.json 的文件，并将其解析为一个 JavaScript 对象。您可以使用 xhr.responseType 来设置期望的响应类型。在此示例中，我们将其设置为 json。

2. 使用 fetch API 进行请求

fetch API 是一种新的 JavaScript API，用于获取资源。它支持 Promise，并且是一种更简洁的方法来进行 AJAX 请求。

fetch('/data.json')
  .then(function(response) {
    return response.json();
  })
  .then(function(data) {
    console.log(data);
  })
  .catch(function(error) {
    console.error('请求失败 ', error);
  });

这将从与当前页面相同的目录中获取一个名为 data.json 的文件，并将其解析为一个 JavaScript 对象。在此示例中，我们使用了 response.json() 来解析响应。

3. 使用 jQuery 进行请求

jQuery 是一种广泛使用的 JavaScript 库，它提供了许多有用的 AJAX 功能。使用 jQuery 时，可以使用 $.getJSON() 方法轻松获取 JSON 数据。

$.getJSON('/data.json', function(data) {
  console.log(data);
});

这将从与当前页面相同的目录中获取一个名为 data.json 的文件，并将其解析为一个 JavaScript 对象。您可以在回调函数中访问返回的数据。

结论

以上是三种常见的方法来获取 JSON 数据。无论您选择哪种方法，都应该考虑错误处理和兼容性。在使用 XMLHttpRequest 时，您可以检查 xhr.status 属性来获取 HTTP 响应代码。在使用 fetch 时，您可以使用 .catch() 方法来处理任何错误。在使用 jQuery 时，您可以使用 .fail() 方法来处理错误。

通过这些技术，您可以轻松地从服务器获取 JSON 数据，并在 JavaScript 中使用它们。