📅 最后修改于: 2023-12-03 15:37:57.583000 🧑 作者: Mango
在现代 web 开发中，AJAX 是一项非常重要的技术。它可以使网页在不需要刷新的情况下，从服务器异步地获取数据并更新 DOM。在本文中，我们将介绍如何使用 AJAX 来使用简单的 API，以便在你的网站中获取和更新数据。
在介绍 AJAX 如何使用简单的 API 之前，我们需要先了解什么是 AJAX。AJAX（Asynchronous JavaScript And XML）是一种用于创建异步请求的技术。这意味着你可以在网页中发送一个请求，并在不刷新整个页面的情况下接收并处理服务器的响应。
为了理解 AJAX 工作方式的基本原理，考虑以下代码片段：
const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts/1');
xhr.send();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText);
}
};
我们首先创建了一个 XMLHttpRequest 对象。然后我们调用 open 方法来指定要获取的 URL，并使用 send 方法发送请求。最后，我们为 onreadystatechange 事件指定了一个回调函数，以便在收到响应时进行处理。
当服务器响应我们的请求时触发 onreadystatechange 事件。我们检查 readyState 和 status 是否符合预期条件，以确保服务器响应成功。在这种情况下，我们可以使用 responseText 属性访问响应的内容。
有许多网站提供 API，以便开发人员可以使用它们的数据。在这里，我们将使用一个非常简单且易于使用的 API：JSONPlaceholder。
JSONPlaceholder 提供了一些 API 路径，可用于获取和更新假数据。例如，你可以使用以下 URL 获取所有帖子：
https://jsonplaceholder.typicode.com/posts
你可以通过向 URL 添加来获取一个特定的帖子：
https://jsonplaceholder.typicode.com/posts/1
以上 URL 将返回帖子标识符为 1 的帖子。
现在我们已经了解了 AJAX 和 API 的基本原理，让我们来看看如何结合使用它们。
假设我们有一个在页面上显示帖子的简单网站。我们可以使用以下代码获取并显示由 JSONPlaceholder 提供的帖子：
<!DOCTYPE html>
<html>
<head>
<title>使用 AJAX 调用 API</title>
</head>
<body>
<div id="content"></div>
<script>
const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts/1');
xhr.send();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
const post = JSON.parse(xhr.responseText);
const content = document.querySelector('#content');
content.innerHTML = `
<h1>${post.title}</h1>
<p>${post.body}</p>
`;
}
};
</script>
</body>
</html>
我们创建了一个 XMLHttpRequest 对象，并向 JSONPlaceholder 的 API 发送了一个简单的 GET 请求。当我们接收到响应时，在回调函数中解析并使用响应的数据。
要验证它是否有效，只需将上面的代码片段复制并在浏览器中运行。你应该看到页面显示 ID 为 1 的帖子的标题和正文。
AJAX 是一项重要的技术，可帮助我们在不刷新整个页面的情况下从服务器获取和更新数据。使用 JSONPlaceholder 这样的 API 可以轻松地向你的网站中添加数据，并在你的网站中获取这些数据。现在你掌握了如何使用 AJAX 和 API，你可以开始构建更强大和交互性更高的 Web 应用程序。