异常教程

AJAX 实例（超详细）

更新时间:

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战(已更新的所有项目都能学习) / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

  • 新开坑项目:《Spring AI 项目实战》 正在持续爆肝中，基于 Spring AI + Spring Boot 3.x + JDK 21...， 点击查看 ;
  • 《从零手撸：仿小红书（微服务架构）》 已完结，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;演示链接： http://116.62.199.48:7070 ;
  • 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 90w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 3100+ 小伙伴加入学习 ，欢迎点击围观

在现代 Web 开发中，AJAX 实例是提升用户体验的关键技术之一。它允许网页在不刷新页面的情况下，与服务器进行数据交互，实现动态内容更新。无论是即时聊天功能、搜索建议还是实时数据展示，AJAX 都扮演着重要角色。本文将从基础概念到实战案例，循序渐进地讲解如何通过 AJAX 实例构建高效、流畅的 Web 应用，适合编程初学者和中级开发者逐步掌握。

什么是 AJAX？

AJAX 是 Asynchronous JavaScript and XML 的缩写，但现代实践中已不限于 XML 格式。它的核心是通过 JavaScript 在后台与服务器进行异步通信，从而实现无需刷新页面即可更新部分网页内容。

形象比喻：可以将 AJAX 想象为一位快递员。当你在网页上提交请求时，AJAX 就像快递员一样，悄悄将请求发送到服务器，等待响应后再将数据“送货上门”，而页面的其他部分不会因此暂停或重新加载。

AJAX 的核心组件包括：

  1. XMLHttpRequest 对象（传统方法）
  2. Fetch API（现代标准方法）
  3. JSON 数据格式（轻量且灵活）

AJAX 的核心组件详解

XMLHttpRequst 对象：AJAX 的传统实现

XMLHttpRequest（简称 XHR）是 JavaScript 中用于发送 HTTP 请求的内置对象。以下是一个基础示例：

// 创建 XHR 对象  
const xhr = new XMLHttpRequest();  

// 定义请求完成时的回调函数  
xhr.onload = function() {  
  if (xhr.status === 200) {  
    console.log("成功响应：", xhr.responseText);  
  } else {  
    console.error("请求失败，状态码：", xhr.status);  
  }  
};  

// 配置请求方法和 URL  
xhr.open("GET", "https://api.example.com/data");  

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

关键步骤解释：

  1. 创建对象：new XMLHttpRequest() 初始化一个请求实例。
  2. 绑定回调：通过 onload 或 onreadystatechange 监听请求状态。
  3. 配置请求：open() 方法指定 HTTP 方法（GET/POST 等）和目标 URL。
  4. 发送请求：send() 触发请求，参数用于 POST 数据。

Fetch API：现代的 AJAX 实现方式

Fetch API 是 ES6 引入的更简洁的异步请求方式，基于 Promise，代码更易读。以下是一个对比示例：

// 使用 Fetch API 实现相同功能  
fetch("https://api.example.com/data")  
  .then(response => {  
    if (!response.ok) {  
      throw new Error("HTTP 错误：" + response.status);  
    }  
    return response.json(); // 解析 JSON 响应  
  })  
  .then(data => {  
    console.log("成功数据：", data);  
  })  
  .catch(error => {  
    console.error("请求失败：", error);  
  });

优势总结：

  • 基于 Promise：链式调用更清晰，避免回调地狱。
  • 支持多种响应类型：如 .json()、.text() 等。
  • 标准化：浏览器兼容性更好，无需额外库支持。

第一个 AJAX 实例：获取并展示数据

假设我们有一个简单的 Web 页面，需要从服务器获取用户列表并动态渲染到页面中。

HTML 结构

<div id="user-list"></div>

JavaScript 实现（使用 Fetch API）

fetch("https://jsonplaceholder.typicode.com/users")  
  .then(response => response.json())  
  .then(users => {  
    const userList = document.getElementById("user-list");  
    users.forEach(user => {  
      const item = document.createElement("div");  
      item.textContent = `ID: ${user.id}, Name: ${user.name}`;  
      userList.appendChild(item);  
    });  
  })  
  .catch(error => console.error("Error:", error));

运行效果：

  • 页面加载时自动请求用户数据。
  • 将 JSON 格式的数据解析后，逐条添加到 <div id="user-list"> 中。

进阶 AJAX 实例：表单异步提交

接下来，我们实现一个无需刷新页面即可提交表单的案例。

HTML 表单

<form id="contact-form">  
  <input type="text" id="name" placeholder="姓名" required>  
  <input type="email" id="email" placeholder="邮箱" required>  
  <textarea id="message" placeholder="留言内容" required></textarea>  
  <button type="submit">提交</button>  
</form>  
<div id="response-message"></div>

JavaScript 实现（使用 Fetch API）

document.getElementById("contact-form").addEventListener("submit", function(event) {  
  event.preventDefault(); // 阻止默认提交行为  

  const name = document.getElementById("name").value;  
  const email = document.getElementById("email").value;  
  const message = document.getElementById("message").value;  

  // 构造请求体  
  const formData = {  
    name,  
    email,  
    message  
  };  

  fetch("/submit-form", {  
    method: "POST",  
    headers: {  
      "Content-Type": "application/json"  
    },  
    body: JSON.stringify(formData)  
  })  
  .then(response => {  
    if (response.ok) {  
      return response.json();  
    }  
    throw new Error("提交失败");  
  })  
  .then(data => {  
    document.getElementById("response-message").textContent =  
      `成功提交！服务器返回信息：${data.message}`;  
  })  
  .catch(error => {  
    document.getElementById("response-message").textContent =  
      `错误：${error.message}`;  
  });  
});

关键点解析：

  1. 阻止默认提交：通过 event.preventDefault() 避免页面刷新。
  2. 构造请求体：使用 JSON.stringify() 将表单数据转换为 JSON 格式。
  3. 错误处理：通过 .catch() 捕获并展示提交失败的提示。

AJAX 的常见问题与解决方案

问题 1：跨域请求（CORS）

当请求的服务器与当前页面域名不一致时，浏览器会触发 CORS 安全限制。

解决方案：

  • 后端配置：在服务器响应头中添加 Access-Control-Allow-Origin: *（生产环境需限制具体域名）。
  • 代理服务器：通过本域的代理接口转发请求。

问题 2：处理异步请求的性能

频繁的 AJAX 请求可能导致服务器压力过大或页面卡顿。

优化建议：

  • 节流/防抖：限制请求频率（例如搜索框输入时每 300ms 发送一次）。
  • 缓存数据：对不频繁变化的数据使用本地缓存。

问题 3：错误状态码的处理

服务器可能返回 404、500 等状态码，需在代码中捕获并提示用户。

代码示例：

fetch("https://api.example.com/error-endpoint")  
  .then(response => {  
    if (!response.ok) {  
      throw new Error(`HTTP 错误 ${response.status}`);  
    }  
    return response.json();  
  })  
  .catch(error => {  
    console.error("请求失败：", error);  
  });

结论

通过本文的 AJAX 实例，我们掌握了从基础概念到实战应用的完整流程。无论是使用传统的 XMLHttpRequst 还是现代的 Fetch API，AJAX 都能帮助开发者构建更流畅的 Web 应用。

关键总结：

  • 核心思想：异步通信、局部更新。
  • 工具选择：优先使用 Fetch API，兼容性不足时再考虑 XHR。
  • 最佳实践：合理处理错误、优化性能、关注安全性。

掌握 AJAX 实例 后，读者可以尝试更复杂的场景，例如实时聊天、动态地图加载或数据可视化更新。通过持续练习和项目实践，AJAX 将成为你 Web 开发工具箱中不可或缺的利器。

最新发布

查看更多文章