AJAX 学习第一天：axios、HTTP 基础、serialize 插件

一、核心目标

掌握 AJAX 核心逻辑（异步请求 - 响应），重点学会 HTTP 协议基础 （请求 / 响应规则）、axios 库使用 （发送请求核心工具）、serialize 插件（表单数据快速序列化），实现前端与后端的基础数据交互。

二、HTTP 协议基础（AJAX 底层依赖）

HTTP（超文本传输协议）是前端与后端通信的 "规则约定"，AJAX 的本质就是遵循 HTTP 规则发送异步请求。

1. 核心概念

作用：规定前端（客户端）和后端（服务器）之间 "数据传输的格式和流程"。
特点：无状态（每次请求独立，后端不记忆前一次交互）、基于请求 - 响应模型（客户端主动发请求，服务器被动回响应）。

2. 关键组成部分

（1）请求报文（前端发给后端的 "数据包"）

包含 4 个核心部分：

部分	说明
请求行	包含「请求方法」「请求 URL」「HTTP 版本」例：`GET /api/user HTTP/1.1`
请求头	键值对形式，描述请求的附加信息（如数据格式、浏览器信息）常见：`Content-Type`（数据类型）、`User-Agent`（浏览器标识）
空行	分隔请求头和请求体（必须存在，否则后端无法解析）
请求体	要传给后端的 "实际数据"（GET 请求无请求体，数据拼在 URL 上）

（2）响应报文（后端返回给前端的 "数据包"）

包含 4 个核心部分：

部分	说明
响应行	包含「HTTP 版本」「状态码」「状态描述」例：`HTTP/1.1 200 OK`
响应头	键值对形式，描述响应的附加信息（如数据格式、缓存规则）常见：`Content-Type: application/json`（返回 JSON 数据）
空行	分隔响应头和响应体
响应体	后端返回的 "实际数据"（如 JSON、HTML、文件流），是前端最需要处理的部分

（3）核心状态码（判断请求结果）

状态码区间	含义	常见状态码及说明
2xx	成功	200 OK（请求成功）、201 Created（创建资源成功）
4xx	客户端错误	400 Bad Request（请求参数错误）、404 Not Found（URL 不存在）、401 Unauthorized（未登录）
5xx	服务器错误	500 Internal Server Error（服务器内部错误）

（4）常用请求方法（语义化区分请求目的）

方法	核心语义	特点（数据位置 / 幂等性）	适用场景
GET	获取数据	数据拼在 URL 后（可见，有长度限制）、幂等（多次请求结果一致）	查询列表、详情（如获取用户信息）
POST	提交数据（创建 / 修改）	数据在请求体（不可见，无长度限制）、非幂等	表单提交、创建资源（如注册、提交订单）
PUT	全量更新资源	数据在请求体、幂等	完整修改资源（如修改用户所有信息）
DELETE	删除资源	数据可在 URL 或请求体、幂等	删除资源（如删除订单）

幂等性：多次执行同一请求，不会改变后端数据状态（如 GET 多次查询不会改数据，POST 多次提交可能重复创建数据）。

三、axios 库（AJAX 核心工具）

axios 是基于 Promise 的 HTTP 客户端，支持浏览器和 Node.js，简化 AJAX 请求的编写（无需手动写 XMLHttpRequest）。

1. 核心特点

支持 Promise API（可配合 async/await 简化异步代码）；
自动转换 JSON 数据（请求体自动序列化、响应体自动解析 JSON）；
拦截请求 / 响应（统一处理 Token、错误等）；
取消请求、请求超时设置等实用功能。

2. 基础使用步骤

（1）引入 axios

方式 1：CDN 引入（学习阶段推荐） html

预览

复制代码

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

方式 2：npm 安装（项目开发） bash
复制代码
```
npm install axios
```

（2）核心请求语法

axios 提供两种请求方式：快捷方法 （常用）和 通用方法（灵活）。

① 快捷方法（对应 HTTP 请求方法）

javascript

运行

javascript 复制代码

// 1. GET 请求（获取数据）
axios.get('/api/user', {
  params: { id: 1 } // 拼接在 URL 上的参数（最终 URL：/api/user?id=1）
})
.then(response => {
  console.log('请求成功', response.data); // response.data 是后端返回的响应体
})
.catch(error => {
  console.log('请求失败', error); // 捕获错误（网络错误、4xx/5xx 状态码）
});

// 2. POST 请求（提交数据）
axios.post('/api/register', {
  username: 'zhangsan',
  password: '123456' // 请求体数据（自动序列化为 JSON，Content-Type 默认为 application/json）
})
.then(res => console.log('注册成功', res.data))
.catch(err => console.log('注册失败', err));

// 其他快捷方法：axios.put()、axios.delete() 用法类似

② 通用方法（axios (config)）

可配置更多参数（如请求头、超时时间），灵活度更高：

javascript

运行

javascript 复制代码

axios({
  method: 'post', // 请求方法（get/post/put/delete）
  url: '/api/login', // 请求 URL
  params: { timestamp: Date.now() }, // URL 参数
  data: { username: 'lisi', password: '654321' }, // 请求体数据
  timeout: 5000, // 超时时间（5 秒未响应则失败）
  headers: { 'Content-Type': 'application/json' } // 自定义请求头
})
.then(res => console.log('登录成功', res.data))
.catch(err => console.log('登录失败', err));

（3）响应对象（response）核心属性

javascript

运行

javascript 复制代码

axios.get('/api/user').then(res => {
  res.data; // 后端返回的响应体（最常用）
  res.status; // 响应状态码（如 200）
  res.statusText; // 状态描述（如 OK）
  res.headers; // 响应头
  res.config; // 发送请求时的配置信息
});

（4）错误处理（catch 捕获的 error）

javascript

运行

javascript 复制代码

axios.get('/api/error').catch(err => {
  if (err.response) {
    // 有响应（状态码 4xx/5xx）
    console.log('状态码', err.response.status);
    console.log('错误信息', err.response.data);
  } else if (err.request) {
    // 无响应（网络错误、超时）
    console.log('网络错误', err.request);
  } else {
    // 请求配置错误（如 URL 写错）
    console.log('请求配置错误', err.message);
  }
});

3. 进阶：async/await 简化异步代码

Promise 的 then/catch 链式调用可替换为 async/await（代码更简洁）：

javascript

运行

javascript 复制代码

// 必须在 async 函数中使用 await
async function getUser() {
  try {
    const response = await axios.get('/api/user', { params: { id: 1 } });
    console.log('请求成功', response.data);
  } catch (error) {
    console.log('请求失败', error);
  }
}

getUser(); // 调用函数

四、serialize 插件（表单数据序列化）

serialize 是 jQuery 内置方法（或独立序列化插件），用于快速将 表单元素数据 转换为 key=value&key2=value2 格式的字符串（适配 Content-Type: application/x-www-form-urlencoded）。

1. 核心场景

当后端要求请求体格式为 application/x-www-form-urlencoded（而非 JSON）时，无需手动拼接字符串，直接用 serialize 序列化表单数据。

2. 基础使用（以 jQuery 为例）

（1）HTML 表单

html

预览

javascript 复制代码

<form id="loginForm">
  <input type="text" name="username" value="zhangsan">
  <input type="password" name="password" value="123456">
  <button type="button" id="submitBtn">提交</button>
</form>

（2）JS 序列化并发送请求

javascript

运行

javascript 复制代码

$('#submitBtn').click(async () => {
  // 1. 序列化表单数据：转换为 "username=zhangsan&password=123456"
  const formData = $('#loginForm').serialize();
  
  try {
    // 2. 发送 POST 请求（Content-Type 自动设为 application/x-www-form-urlencoded）
    const res = await axios.post('/api/login', formData, {
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded' // 可省略，axios 会自动识别
      }
    });
    console.log('登录成功', res.data);
  } catch (err) {
    console.log('登录失败', err);
  }
});

3. 关键注意点

表单元素必须有 name 属性（serialize 基于 name 作为 key）；
序列化结果不包含 disabled 状态的表单元素；
独立插件（非 jQuery）用法类似：如 serialize(document.getElementById('loginForm'))。

五、核心总结与注意事项

1. 三者关系

HTTP 是 "通信规则"，规定请求 / 响应的格式；
axios 是 "工具"，遵循 HTTP 规则发送异步请求；
serialize 是 "辅助工具"，简化表单数据的格式化（适配特定 HTTP 请求体格式）。

2. 常见坑与解决方案

跨域错误（CORS）：后端需配置允许跨域（如 Access-Control-Allow-Origin），前端无需修改代码；
400 错误：请求参数格式错误（如 JSON 格式传成了表单格式，或缺少必填参数）；
404 错误：请求 URL 写错（确认后端接口地址是否正确）；
500 错误：后端代码报错（查看后端日志，前端无法直接解决）；
表单序列化后参数缺失：检查表单元素是否有 name 属性，是否被 disabled。

3. 学习目标达成标志

能使用 axios 发送 GET/POST 请求，正确处理成功 / 失败回调；
能区分 JSON 格式和表单格式的请求体，知道何时用 serialize；
能看懂 HTTP 状态码，初步定位请求失败原因。

4. 后续学习方向

axios 拦截器（统一添加 Token、处理全局错误）；
取消请求、请求重试、超时重试等高级功能；
RESTful API 规范（与 HTTP 方法配合的接口设计规则）；
独立 serialize 库（脱离 jQuery）的使用。