如何从 JavaScript 中的 API 获取 JSON 对象

在 Web 开发中，我们通常需要从 API 中获取 JSON 对象，以便于客户端进行数据展示、操作等。本文将介绍在 JavaScript 中如何获取 JSON 对象。

XMLHttpRequest

XMLHttpRequest 是一种用于在客户端与服务器之间发送 HTTP 请求的 API。它可以获取各种类型的数据，包括 JSON 对象。下面是一个简单的例子：

var xhr = new XMLHttpRequest();
xhr.open('GET', '/api/data', true);

xhr.onload = function() {
    if (xhr.status === 200) {
        var data = JSON.parse(xhr.responseText);
        console.log(data);
    }
};

xhr.send();

在例子中，首先创建了一个 XMLHttpRequest 实例，并使用 open() 方法指定了请求类型、URL 和是否异步处理。然后，使用 onload 事件监听器检查响应状态，如果状态码为 200，则将响应文本解析为 JSON 对象，并输出到控制台中。

Fetch API

Fetch API 是另一种获取网络资源的 JavaScript API。它提供了更简单、更灵活的方式，使得我们可以方便地获取 JSON 对象。下面是一个 Fetch API 示例：

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

在例子中，首先我们使用 fetch() 方法指定了要获取的 URL。然后，使用 then() 方法将响应转换为 JSON 对象，并输出到控制台。如果发生错误，则使用 catch() 方法来处理异常。

jQuery AJAX

如果你使用 jQuery，那么 AJAX 方法也是获取 JSON 对象的好方法。下面是一个简单的示例：

$.ajax({
    url: '/api/data',
    dataType: 'json',
    success: function(data) {
        console.log(data);
    },
    error: function(error) {
        console.error(error);
    }
});

在例子中，我们使用 ajax() 方法来发送请求，并指定 URL 和数据类型。然后，使用 success() 方法来处理成功响应，并将数据输出到控制台中。如果发生错误，则使用 error() 方法来处理异常。

总结

以上介绍了在 JavaScript 中获取 JSON 对象的三种常见方式：XMLHttpRequest、Fetch API 和 jQuery AJAX。每种方式都有其优点和适用场景，你可以根据实际情况选择合适的方式。无论哪种方式，获取 JSON 对象的关键是：在得到响应之后，将响应文本解析为 JSON 对象，并使用它来实现自己的业务逻辑。