当前位置：首页 > news >正文

AJAX 知识

news 2025/10/24 8:18:18

一、初识 AJAX

1. 什么是 AJAX？

定义：AJAX（Asynchronous JavaScript and XML，异步 JavaScript 和 XML）是一种无需重新加载整个网页，就能实现局部更新页面数据的技术。
核心价值：
- 减少网络数据传输量，提升页面响应速度。
- 实现 “无刷新交互”，优化用户体验（如实时搜索、表单异步提交、动态加载内容）。
- 本质是原生 JavaScript 与服务器进行异步通信的技术集合（核心依赖 XMLHttpRequest 对象或现代的 fetch API）。

2. AJAX 工作原理

核心流程（通过 XMLHttpRequest 为例）：
1. 客户端发起请求：浏览器通过 JavaScript 创建 XMLHttpRequest 对象（或 fetch），向服务器发送异步请求（无需阻塞页面渲染）。
2. 服务器处理请求：服务器接收请求后，处理数据（如查询数据库、计算结果），并返回响应数据（早期常用 XML，现在多为 JSON）。
3. 客户端接收并处理响应：浏览器通过回调函数接收服务器返回的数据，再用 JavaScript 动态更新 DOM（局部刷新页面）。
图示简化逻辑：用户操作 → JS 创建请求 → 服务器处理 → 返回数据 → JS 更新页面（全程无页面刷新）。

二、AJAX 使用

1. 环境准备

前端环境：无需特殊配置，直接在 HTML 中通过 <script> 标签编写 JavaScript 代码即可。
后端环境：需要一个运行中的服务器（如 Node.js、Apache、Nginx 等），用于接收并处理 AJAX 请求（避免浏览器 “跨域限制” 影响本地调试）。
- 本地调试简易方案：使用 live-server（Node.js 工具）、VS Code 的 “Live Server” 插件，或部署简单后端服务（如 Express）。

2. 创建 AJAX 请求（两种主流方式）

（1）传统方式：`XMLHttpRequest` 对象

// 1. 创建 XMLHttpRequest 实例
const xhr = new XMLHttpRequest();// 2. 配置请求（方法、URL、是否异步）
xhr.open('GET', 'https://api.example.com/data', true); // 第三个参数 true 表示异步// 3. 发送请求（GET 方法无请求体，POST 需传数据）
xhr.send();// 4. 监听响应状态变化
xhr.onreadystatechange = function() {// readyState=4 表示请求完成，status=200 表示成功if (xhr.readyState === 4 && xhr.status === 200) {// 解析响应数据（JSON 格式为例）const data = JSON.parse(xhr.responseText);// 动态更新页面document.getElementById('result').innerText = data.msg;}
};

（2）现代方式：`fetch API`（基于 Promise，更简洁）

// 发起 GET 请求
fetch('https://api.example.com/data').then(response => {// 检查响应状态（200-299 为成功）if (!response.ok) throw new Error('请求失败');// 解析为 JSON（根据实际数据格式选择：json()/text()/blob() 等）return response.json();}).then(data => {// 更新页面document.getElementById('result').innerText = data.msg;}).catch(error => {// 处理错误（如网络异常、服务器错误）console.error('错误：', error);});

3. AJAX 参数说明

（1）请求相关参数

请求方法：GET/POST/PUT/DELETE 等。
- GET：用于获取数据，参数拼接在 URL 后（如 ?id=1&name=test），有长度限制，适合非敏感数据。
- POST：用于提交数据，参数放在请求体中，无长度限制，适合敏感数据（如表单提交、上传文件）。
URL：请求的服务器接口地址（需注意跨域问题：协议、域名、端口必须一致，否则需后端配置 CORS）。
异步 / 同步：XMLHttpRequest 中 open() 第三个参数，true 为异步（推荐，不阻塞页面），false 为同步（已过时，会冻结页面）。

（2）请求头配置

自定义请求头（如设置数据格式）：

// XMLHttpRequest 方式
xhr.setRequestHeader('Content-Type', 'application/json');// fetch 方式
fetch(url, {method: 'POST',headers: { 'Content-Type': 'application/json' },body: JSON.stringify({ name: 'test' }) // POST 数据需序列化
});

（3）响应处理参数

responseText/response：服务器返回的原始数据（XMLHttpRequest 用 responseText，fetch 用 response 对象）。
status：响应状态码（200 成功，404 未找到，500 服务器错误等）。
readyState（仅 XMLHttpRequest）：请求状态（0 - 未初始化，1 - 已打开，2 - 已发送，3 - 正在接收，4 - 完成）。