如何对 URL 进行 JSON 调用 - Javascript

在 Javascript 中，我们可以通过向 URL 发送 HTTP 请求来获取 JSON 格式的数据，然后在应用程序中使用这些数据。这些数据可以来自 API、服务器或其他来源，可以使用 XMLHttpRequest 对象或 Fetch API 进行获取。下面我们将介绍如何使用这些方法来进行 JSON 调用。

使用 XMLHttpRequest 对象

XMLHttpRequest 是一种用于获取 Web 服务器数据的对象。通过它，我们可以发送 HTTP 请求，并在接收到服务器响应后获取响应数据。以下是使用 XMLHttpRequest 对象进行 JSON 调用的示例代码：

let xhr = new XMLHttpRequest();
xhr.open('GET', 'https://example.com/api/data.json');
xhr.onload = function() {
  if (xhr.status === 200) {
    let data = JSON.parse(xhr.responseText);
    console.log(data);
  }
  else {
    console.log('Error!');
  }
};
xhr.send();

在上面的代码中，我们使用了 XMLHttpRequest 对象来发送 GET 请求，指定了目标 URL 是 'https://example.com/api/data.json'。然后，我们使用 onload 方法来监听 XMLHttpRequest 的 readyState 变更事件，当 readyState 变为 4 时，我们检查返回的状态码 xhr.status 是否为 200，然后使用 JSON.parse 方法从响应文本中解析数据。

使用 Fetch API

Fetch API 是一种现代化的 Web API，为开发者提供了更简洁、更直观的方法来获取 Web 服务器数据。使用 Fetch API 进行 JSON 调用的代码如下：

fetch('https://example.com/api/data.json')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

在上面的代码中，我们使用 fetch 方法来发送 GET 请求，指定了目标 URL 是 'https://example.com/api/data.json'。然后，我们使用 then 方法连接两个回调函数，第一个回调函数解析 JSON 响应数据，并将其传递给第二个回调函数以进行处理。catch 方法用于捕获可能发生的错误，以便进行处理。

这些是使用 Javascript 进行 JSON 调用的两种主要方法。选择适当的方法取决于你的应用程序需求和个人偏好。