跳到主要内容

HTML AJAX 请求

在现代 Web 开发中，AJAX（Asynchronous JavaScript and XML）是一种关键技术，它允许网页在不重新加载整个页面的情况下与服务器进行异步通信。通过 AJAX，开发者可以创建更快速、更流畅的用户体验。本文将详细介绍如何在 HTML 中使用 JavaScript 发送 AJAX 请求，并通过实际案例展示其应用。

什么是 AJAX？​

AJAX 是一种使用 JavaScript 和 XML（现在通常使用 JSON）在后台与服务器进行通信的技术。它允许网页在不重新加载的情况下更新部分内容。AJAX 的核心是 XMLHttpRequest 对象，它用于在浏览器和服务器之间发送和接收数据。

备注

尽管 AJAX 最初是为 XML 设计的，但现在 JSON 已成为更常用的数据格式。

如何使用 AJAX 发送请求​

1. 创建 XMLHttpRequest 对象​

要发送 AJAX 请求，首先需要创建一个 XMLHttpRequest 对象：

javascript
const xhr = new XMLHttpRequest();

2. 配置请求​

接下来，使用 open 方法配置请求。该方法接受三个参数：请求方法（如 GET 或 POST）、请求的 URL 和一个布尔值，表示请求是否异步（通常为 true）。

javascript
xhr.open('GET', 'https://api.example.com/data', true);

3. 发送请求​

配置好请求后，使用 send 方法发送请求：

javascript
xhr.send();

4. 处理响应​

为了处理服务器的响应，需要为 onreadystatechange 事件添加一个回调函数。当请求的状态发生变化时，该函数会被调用。

javascript
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(xhr.responseText);
    }
};
提示

readyState 属性表示请求的状态，4 表示请求已完成。status 属性表示 HTTP 状态码，200 表示请求成功。

实际案例：获取并显示用户数据​

假设我们有一个 API，可以返回用户数据。我们将使用 AJAX 请求获取这些数据，并将其显示在网页上。

HTML 结构​

html
<div id="user-data"></div>
<button id="load-data">加载用户数据</button>

JavaScript 代码​

javascript
document.getElementById('load-data').addEventListener('click', function() {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', 'https://api.example.com/users', true);
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
            const users = JSON.parse(xhr.responseText);
            let html = '';
            users.forEach(user => {
                html += `<p>${user.name} - ${user.email}</p>`;
            });
            document.getElementById('user-data').innerHTML = html;
        }
    };
    xhr.send();
});

输出​

当用户点击“加载用户数据”按钮时，页面将显示从 API 获取的用户数据，而无需刷新整个页面。

总结​

AJAX 是一种强大的技术，它允许网页在不重新加载的情况下与服务器进行通信。通过使用 XMLHttpRequest 对象，开发者可以轻松地发送异步请求并处理响应。本文介绍了如何使用 AJAX 发送请求，并通过一个实际案例展示了其应用。

附加资源​

练习​

  1. 修改上述代码，使其使用 POST 方法发送数据到服务器。
  2. 尝试使用 fetch API 替代 XMLHttpRequest 实现相同的功能。

通过完成这些练习，你将更深入地理解 AJAX 的工作原理及其在现代 Web 开发中的应用。