LabEx
登录免费加入

使用 XMLHttpRequest 创建 AJAX 请求

HTMLHTMLBeginner
立即练习

💡 本教程由 AI 辅助翻译自英文原版。如需查看原文，您可以 切换至英文原版

简介

在本实验中，参与者将探索 AJAX（Asynchronous JavaScript and XML）的强大世界，并学习如何使用 XMLHttpRequest 创建动态 Web 应用程序。本教程涵盖了异步 Web 通信的基本概念，引导学习者了解如何在不重新加载页面的情况下从服务器发送和接收数据。

参与者将获得创建 XMLHttpRequest 对象、配置 HTTP 请求方法、处理服务器响应状态以及实现基本 AJAX 数据检索技术的实用技能。通过理解这些核心原理，开发者将能够构建更具响应性和交互性的 Web 体验，从而提升用户参与度和应用程序性能。

理解 AJAX 和异步请求

在这一步中，你将学习 AJAX（Asynchronous JavaScript and XML）以及它如何革新 Web 通信。AJAX 允许网页动态更新内容而无需重新加载整个页面，从而创建更流畅、响应更快的用户体验。

什么是 AJAX？

AJAX 是一种 Web 开发技术，它使 Web 应用程序能够异步（在后台）从服务器发送和接收数据，而不会干扰现有页面的显示和行为。这意味着你可以更新网页的某些部分而无需刷新整个页面。

异步请求的关键特性

  1. 非阻塞性：与传统的同步请求不同，AJAX 允许浏览器在等待服务器响应的同时继续执行其他任务。
  2. 后台通信：可以在不中断用户当前交互的情况下与服务器交换数据。
  3. 部分页面更新：仅更新网页的特定部分，从而提高性能和用户体验。

简单的 AJAX 概念演示

让我们创建一个简单的 HTML 文件来演示异步请求的概念。我们将使用 WebIDE 来创建这个示例。

打开 WebIDE 并创建一个新文件 ~/project/ajax-demo.html：

<!doctype html>
<html>
  <head>
    <title>AJAX Demonstration</title>
  </head>
  <body>
    <h1>AJAX Example</h1>
    <button id="loadData">Load Data</button>
    <div id="result"></div>

    <script>
      document
        .getElementById("loadData")
        .addEventListener("click", function () {
          console.log("Button clicked: Initiating AJAX request");
          // Asynchronous request will be implemented in later steps
        });
    </script>
  </body>
</html>

实际应用中的 AJAX 用例

  • 自动补全搜索建议
  • 实时内容更新
  • 无需页面重载的表单提交
  • 轮询新通知
  • 从 API 获取数据

为什么异步请求很重要

异步请求解决了 Web 开发中的几个挑战：

  • 提升用户体验
  • 减少服务器负载
  • 更快、响应更快的 Web 应用程序
  • 更高效的数据交换

创建 XMLHttpRequest 对象

在这一步中，你将学习如何创建 XMLHttpRequest 对象，这是 JavaScript 中实现异步请求的核心机制。我们将基于上一步的 HTML 文件，添加 XMLHttpRequest 功能。

在 WebIDE 中打开 ~/project/ajax-demo.html 文件，并更新脚本部分以创建 XMLHttpRequest 对象：

<!doctype html>
<html>
  <head>
    <title>XMLHttpRequest Demonstration</title>
  </head>
  <body>
    <h1>AJAX Request Example</h1>
    <button id="loadData">Load Data</button>
    <div id="result"></div>

    <script>
      document
        .getElementById("loadData")
        .addEventListener("click", function () {
          // 创建 XMLHttpRequest 对象
          var xhr = new XMLHttpRequest();

          // 记录 XMLHttpRequest 对象的创建
          console.log("XMLHttpRequest object created:", xhr);
        });
    </script>
  </body>
</html>

理解 XMLHttpRequest 对象

XMLHttpRequest（XHR）对象是一个内置的浏览器 API，它允许你：

  • 创建 HTTP 请求
  • 向服务器发送数据
  • 从服务器接收数据
  • 在不重新加载页面的情况下更新网页的部分内容

XMLHttpRequest 的关键方法

  1. open()：初始化一个新的请求
  2. send()：将请求发送到服务器
  3. onreadystatechange：跟踪请求的状态

浏览器兼容性

XMLHttpRequest 在所有现代浏览器中都得到支持，使其成为 AJAX 通信的可靠选择。现代 Web 开发也使用 Fetch API，但 XMLHttpRequest 仍然被广泛使用。

示例输出

当你点击“Load Data”按钮时，你将看到控制台日志，显示 XMLHttpRequest 对象的创建：

XMLHttpRequest object created: XMLHttpRequest {...}

配置 HTTP 请求方法

在这一步中，你将学习如何使用 XMLHttpRequest 配置 HTTP 请求方法。我们将更新 ajax-demo.html 文件，演示如何设置不同类型的 HTTP 请求。

在 WebIDE 中打开 ~/project/ajax-demo.html 文件，并修改脚本部分：

<!doctype html>
<html>
  <head>
    <title>HTTP Request Methods</title>
  </head>
  <body>
    <h1>AJAX Request Methods</h1>
    <button id="getButton">GET Request</button>
    <button id="postButton">POST Request</button>
    <div id="result"></div>

    <script>
      // GET 请求配置
      document
        .getElementById("getButton")
        .addEventListener("click", function () {
          var xhr = new XMLHttpRequest();

          // 配置 GET 请求
          xhr.open("GET", "https://jsonplaceholder.typicode.com/posts/1", true);

          // 设置请求头
          xhr.setRequestHeader("Content-Type", "application/json");

          // 记录请求详情
          console.log("GET Request Configured");

          // 发送请求
          xhr.send();
        });

      // POST 请求配置
      document
        .getElementById("postButton")
        .addEventListener("click", function () {
          var xhr = new XMLHttpRequest();

          // 配置 POST 请求
          xhr.open("POST", "https://jsonplaceholder.typicode.com/posts", true);

          // 设置请求头
          xhr.setRequestHeader("Content-Type", "application/json");

          // 准备要发送的数据
          var data = JSON.stringify({
            title: "foo",
            body: "bar",
            userId: 1
          });

          // 记录请求详情
          console.log("POST Request Configured");

          // 发送请求并附带数据
          xhr.send(data);
        });
    </script>
  </body>
</html>

HTTP 请求方法

最常见的 HTTP 请求方法包括：

  1. GET：从服务器检索数据
  2. POST：提交数据以供服务器处理
  3. PUT：更新现有数据
  4. DELETE：删除数据

配置请求的关键方法

  • open(method, url, async):

    • method：HTTP 方法（GET、POST 等）
    • url：服务器端点
    • async：异步请求的布尔值（通常为 true）

  • setRequestHeader()：设置请求头

  • send()：发送请求（可附带数据）

示例输出

当你点击按钮时，你将看到控制台日志：

GET Request Configured
POST Request Configured

处理服务器响应状态

在这一步中，你将学习如何处理 XMLHttpRequest 的不同状态并处理服务器响应。我们将更新 ajax-demo.html 文件，演示响应处理。

在 WebIDE 中打开 ~/project/ajax-demo.html 文件，并修改脚本部分：

<!doctype html>
<html>
  <head>
    <title>Server Response Handling</title>
  </head>
  <body>
    <h1>AJAX Response States</h1>
    <button id="fetchData">Fetch Data</button>
    <div id="result"></div>

    <script>
      document
        .getElementById("fetchData")
        .addEventListener("click", function () {
          var xhr = new XMLHttpRequest();
          var resultDiv = document.getElementById("result");

          // 跟踪请求状态
          xhr.onreadystatechange = function () {
            // 记录当前 ready state
            console.log("Ready State:", xhr.readyState);

            // 检查请求是否完成且成功
            if (xhr.readyState === 4) {
              if (xhr.status === 200) {
                // 成功响应
                try {
                  var data = JSON.parse(xhr.responseText);
                  resultDiv.innerHTML = `
                                <h3>Data Received:</h3>
                                <pre>${JSON.stringify(data, null, 2)}</pre>
                            `;
                  console.log("Request Successful");
                } catch (error) {
                  resultDiv.innerHTML = "Error parsing response";
                  console.error("Parsing Error:", error);
                }
              } else {
                // 错误处理
                resultDiv.innerHTML = `Error: ${xhr.status}`;
                console.error("Request Failed", xhr.status);
              }
            }
          };

          // 配置并发送请求
          xhr.open("GET", "https://jsonplaceholder.typicode.com/posts/1", true);
          xhr.send();
        });
    </script>
  </body>
</html>

XMLHttpRequest 的 Ready States

XMLHttpRequest 有 5 种 ready state：

  • 0: UNSENT（请求未初始化）
  • 1: OPENED（连接已建立）
  • 2: HEADERS_RECEIVED（请求已接收）
  • 3: LOADING（正在处理请求）
  • 4: DONE（请求完成）

响应处理的关键概念

  1. 使用 onreadystatechange 跟踪请求进度
  2. 检查 readyState === 4 以确认请求完成
  3. 验证 status === 200 以确保响应成功
  4. 使用 responseText 或 responseXML 访问数据
  5. 针对不同的状态码实现错误处理

示例输出

当你点击“Fetch Data”时，你将看到控制台日志：

Ready State: 1
Ready State: 2
Ready State: 3
Ready State: 4
Request Successful

实现基本的 AJAX 数据检索

在这一步中，你将学习如何使用 AJAX 从 API 检索并显示数据。我们将创建一个简单的用户管理应用程序，用于获取并显示用户信息。

在 WebIDE 中打开 ~/project/ajax-demo.html 文件，并将其内容替换为以下代码：

<!doctype html>
<html>
  <head>
    <title>User Management App</title>
    <style>
      #userList {
        margin-top: 20px;
        border: 1px solid #ddd;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <h1>User Management</h1>
    <button id="fetchUsers">Fetch Users</button>
    <div id="userList"></div>

    <script>
      document
        .getElementById("fetchUsers")
        .addEventListener("click", function () {
          var xhr = new XMLHttpRequest();
          var userListDiv = document.getElementById("userList");

          xhr.onreadystatechange = function () {
            if (xhr.readyState === 4) {
              if (xhr.status === 200) {
                try {
                  var users = JSON.parse(xhr.responseText);

                  // 清除之前的内容
                  userListDiv.innerHTML = "<h2>User List</h2>";

                  // 创建用户列表
                  users.forEach(function (user) {
                    var userDiv = document.createElement("div");
                    userDiv.innerHTML = `
                                    <p>
                                        <strong>Name:</strong> ${user.name}<br>
                                        <strong>Email:</strong> ${user.email}<br>
                                        <strong>Company:</strong> ${user.company.name}
                                    </p>
                                `;
                    userListDiv.appendChild(userDiv);
                  });
                } catch (error) {
                  userListDiv.innerHTML = "Error parsing user data";
                }
              } else {
                userListDiv.innerHTML = `Error fetching users: ${xhr.status}`;
              }
            }
          };

          // 从 JSONPlaceholder API 获取用户数据
          xhr.open("GET", "https://jsonplaceholder.typicode.com/users", true);
          xhr.send();
        });
    </script>
  </body>
</html>

数据检索的关键概念

  1. 使用公共 API（JSONPlaceholder）进行演示
  2. 获取多个用户记录
  3. 解析 JSON 响应
  4. 动态创建 HTML 元素
  5. 处理潜在错误

示例输出

当你点击“Fetch Users”时，你将看到一个包含用户详细信息的列表：

User List
Name: Leanne Graham
Email: [email protected]
Company: Romaguera-Crona

Name: Ervin Howell
Email: [email protected]
Company: Deckow-Crist

... (更多用户)

最佳实践

  • 始终验证和清理数据
  • 实现错误处理
  • 使用 try-catch 解析 JSON
  • 创建动态且响应式的 UI

总结

在本实验中，参与者探索了 AJAX 和异步 Web 通信的基础知识，学习了如何在不重新加载整个页面的情况下创建动态 Web 体验。实验介绍了非阻塞请求、后台数据交换和部分页面更新等关键概念，展示了 XMLHttpRequest 如何实现 Web 客户端与服务器之间的无缝交互。

通过实际示例的演练和对 AJAX 核心原理的理解，学习者能够掌握如何实现响应式 Web 应用程序，动态获取和显示数据。实验涵盖了创建 XMLHttpRequest 对象、配置 HTTP 方法、处理服务器响应以及异步检索数据的基本技术，为现代 Web 开发实践提供了全面的基础。

相关 HTML 课程
HTML 入门教程

HTML 入门教程

HTML
初级
HTML 快速入门

HTML 快速入门

HTML
初级
构建一个井字棋网页应用

构建一个井字棋网页应用

HTMLCSSJavaScript
初级

We use cookies for a number of reasons, such as keeping the website reliable and secure, to improve your experience on our website and to see how you interact with it. By accepting, you agree to our use of such cookies. Privacy Policy