AJAX 知识

一、初识 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` 对象

javascript 复制代码

// 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，更简洁）

javascript 复制代码

// 发起 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）请求头配置

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

javascript 复制代码

// 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 - 完成）。

三、AJAX 练习（实践场景）

实时搜索建议：用户输入关键词时，通过 AJAX 实时请求后端接口，返回匹配的搜索建议并展示。
无刷新表单提交：表单提交时阻止默认刷新行为，用 AJAX 发送数据，接收成功后提示用户（如 "提交成功"）。
动态加载列表：滚动页面到底部时，通过 AJAX 请求下一页数据，追加到列表中（如无限滚动）。
数据交互调试：使用浏览器 "开发者工具" 的 Network 面板查看 AJAX 请求详情（请求头、响应数据、状态码），排查接口问题。

总结

AJAX 是前端与服务器异步通信的核心技术，通过 XMLHttpRequest 或 fetch 实现 "局部刷新"，大幅提升用户体验。学习重点在于理解异步请求流程、掌握参数配置（如请求方法、头信息）、处理响应数据及错误，最终能在实际场景中（如搜索、表单、动态加载）灵活应用。

一、初识 AJAX

1. 什么是 AJAX？

2. AJAX 工作原理

二、AJAX 使用

1. 环境准备

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

（1）传统方式：XMLHttpRequest 对象

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

3. AJAX 参数说明

（1）请求相关参数

（2）请求头配置

（3）响应处理参数

三、AJAX 练习（实践场景）

总结

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

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