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+ 小伙伴加入学习 ，欢迎点击围观

前言：为什么学习 AJAX 教程？

在现代 Web 开发中，用户对交互体验的要求越来越高。想象一下，当你在填写一份表单时，如果每次点击提交按钮都需要页面完全刷新，体验会多么糟糕。AJAX（Asynchronous JavaScript and XML） 的出现，正是为了解决这一痛点。它允许网页在不重新加载整个页面的情况下，与服务器进行数据交换并更新局部内容，从而提升用户体验。无论是即时聊天、动态加载评论，还是实时表单验证，AJAX 都是实现这些功能的核心技术。

作为编程初学者，学习 AJAX 能帮助你理解如何让网页“活起来”；而中级开发者则可以通过深入掌握其进阶用法，进一步优化项目性能。本文将从零开始，通过案例和代码示例，带你逐步掌握 AJAX 的核心概念与实践技巧。

一、AJAX 的基本概念：什么是异步通信？

1.1 异步与同步的比喻

我们可以将网页请求比作点外卖的过程：

• 同步请求：就像打电话订餐后，必须一直守在电话旁等待对方回复，期间无法做其他事情。
• 异步请求：如同使用外卖平台下单后，可以继续刷手机或做家务，系统会通过短信通知你餐品已送达。

AJAX 的“异步”特性，正是让网页在发送请求后无需等待响应，继续执行其他任务，直到收到服务器返回的数据后，再更新页面内容。

1.2 AJAX 的技术组成

AJAX 并非一种独立技术，而是以下技术的集合：
| 技术 | 作用 |
|---------------|----------------------------------------|
| JavaScript | 控制页面行为和数据交互 |
| XML/JSON | 传输数据的格式 |
| DOM | 动态更新页面内容 |
| XMLHttpRequest 或 Fetch API | 发送和接收 HTTP 请求 |

1.3 AJAX 的典型应用场景

• 实时搜索建议（如搜索引擎输入时的联想词）
• 动态加载分页数据（如社交媒体的无限滚动）
• 表单验证（如注册时检查用户名是否已被占用）
• 实时聊天功能（如 Web 版微信的消息推送）

二、AJAX 的核心步骤与代码实现

2.1 第一个 AJAX 请求：GET 方法

步骤 1：创建 XMLHttpRequest 对象

// 创建 XMLHttpRequest 对象（所有浏览器通用写法）  
const xhr = new XMLHttpRequest();  

步骤 2：配置请求

// open 方法的参数：请求方法、URL、是否异步（默认 true）  
xhr.open('GET', '/api/data', true);  

步骤 3：定义响应处理函数

// 当 readyState 变为 4（完成状态），且状态码为 200（成功）时执行  
xhr.onreadystatechange = function() {  
  if (xhr.readyState === 4 && xhr.status === 200) {  
    const response = JSON.parse(xhr.responseText);  
    console.log('服务器返回的数据：', response);  
  }  
};  

步骤 4：发送请求

xhr.send();  

完整代码示例

function fetchData() {  
  const xhr = new XMLHttpRequest();  
  xhr.open('GET', '/api/data', true);  
  xhr.onreadystatechange = function() {  
    if (xhr.readyState === 4) {  
      if (xhr.status === 200) {  
        // 成功时更新页面  
        document.getElementById('result').innerHTML = xhr.responseText;  
      } else {  
        // 处理错误（如网络问题或服务器错误）  
        console.error('请求失败:', xhr.status);  
      }  
    }  
  };  
  xhr.send();  
}  

三、深入理解：XMLHttpRequest 的状态与方法

3.1 readyState 的五个状态值

3.2 常见 HTTP 状态码解析

3.3 处理 POST 请求

function submitForm() {  
  const xhr = new XMLHttpRequest();  
  const formData = new FormData(document.querySelector('#myForm'));  
  xhr.open('POST', '/api/submit', true);  
  xhr.setRequestHeader('Content-Type', 'application/json'); // 设置请求头  
  xhr.onload = function() {  
    if (xhr.status === 200) {  
      alert('提交成功！');  
    }  
  };  
  // 将表单数据序列化为 JSON 格式  
  const data = JSON.stringify(formData);  
  xhr.send(data);  
}  

四、进阶：使用 Fetch API 简化 AJAX 开发

4.1 Fetch API 的优势

• 基于 Promise，代码更简洁
• 原生支持 JSON 数据格式
• 支持流式响应（Streaming）

4.2 Fetch 的 GET 请求示例

fetch('/api/data')  
  .then(response => {  
    if (!response.ok) throw new Error('网络请求失败');  
    return response.json(); // 自动解析 JSON 数据  
  })  
  .then(data => {  
    console.log('数据已接收:', data);  
    updateUI(data); // 更新页面内容  
  })  
  .catch(error => {  
    console.error('错误:', error);  
  });  

4.3 Fetch 的 POST 请求示例

fetch('/api/submit', {  
  method: 'POST',  
  headers: {  
    'Content-Type': 'application/json'  
  },  
  body: JSON.stringify({ name: '张三', email: 'zhangsan@example.com' })  
})  
.then(response => response.json())  
.then(data => console.log('提交成功:', data))  
.catch(error => console.error('错误:', error));  

五、实战案例：实时表单验证

5.1 需求：检查用户名是否已被注册

当用户在注册页面输入用户名时，AJAX 可以实时向服务器发送请求，验证用户名是否可用。

5.2 HTML 表单结构

<input type="text" id="username" placeholder="请输入用户名">  
<div id="validation-message"></div>  

5.3 JavaScript 实现（使用 Fetch API）

document.getElementById('username').addEventListener('input', function() {  
  const username = this.value.trim();  
  if (username === '') {  
    document.getElementById('validation-message').textContent = '';  
    return;  
  }  
  fetch(`/api/check-username?name=${username}`)  
    .then(response => response.json())  
    .then(data => {  
      if (data.available) {  
        setMessage('用户名可用！', 'success');  
      } else {  
        setMessage('用户名已被占用', 'error');  
      }  
    })  
    .catch(() => setMessage('请求失败，请重试', 'error'));  
});  

function setMessage(text, type) {  
  const messageElement = document.getElementById('validation-message');  
  messageElement.textContent = text;  
  messageElement.className = type; // 根据类型设置不同样式  
}  

六、性能优化与常见问题解决

6.1 防止请求堆积

当用户快速输入时（如实时搜索），可能会触发大量 AJAX 请求。可通过设置 setTimeout 或使用 AbortController 取消未完成的请求：

let timeoutId;  
document.getElementById('search').addEventListener('input', function() {  
  clearTimeout(timeoutId); // 取消之前的定时器  
  timeoutId = setTimeout(() => {  
    const query = this.value;  
    // 发送请求的代码  
  }, 300); // 300ms 内未输入则触发请求  
});  

6.2 跨域问题（CORS）

当请求的 URL 域名与当前页面不同时，浏览器会触发跨域限制。解决方案包括：

1. 服务器设置 Access-Control-Allow-Origin 响应头
2. 使用代理服务器转发请求

结论：AJAX 教程的实践价值

通过本文，你已掌握了从基础到进阶的 AJAX 技术，并通过案例理解了其实战应用。无论是使用传统的 XMLHttpRequest 还是现代化的 Fetch API，AJAX 都是构建交互式 Web 应用的核心工具。

下一步行动建议：

1. 尝试将本文的代码示例部署到本地服务器（如使用 Node.js 的 http-server）
2. 在自己的项目中实现一个动态加载数据的组件（如天气预报或股票信息）
3. 探索更复杂的场景，如 WebSocket 的实时通信

AJAX 的学习是一个循序渐进的过程，通过不断实践，你将能够灵活运用这一技术，为用户提供更流畅的 Web 体验。