AJAX与Axios基础

目录

一、AJAX 核心概念解析

1.1 AJAX 的核心概念

1.2 AJAX 工作原理

1.3 AJAX 局限性

二、axios 库介绍

2.1 Axios 核心特性

2.2 快速上手

2.3 核心配置项

2.4 错误处理标准方案

三、Axios 核心配置项

3.1 常用核心配置项

1. url

2. method

3. params

4. data

5. headers

3.2 完整配置示例

3.3 关键区别总结

3.4 注意事项

四、Axios常用HTTP方法

4.1 GET 请求（获取数据）

1. 基础用法

2. 带查询参数

3. async/await 写法

4.2 POST 请求（创建数据）

1. 提交 JSON 数据

2. 提交 FormData（文件上传）

4.3 PUT 请求（全量更新）

4.4 PATCH 请求（部分更新）

4.5 DELETE 请求（删除数据）

4.6 完整配置示例

4.7 关键区别总结

4.8 注意事项

五、接口文档规范与使用

5.1 标准接口文档要素

5.2 文档使用示例

六、form-serialize 高效表单处理

6.1 form-serialize 插件语法

6.2 使用示例

6.3 注意事项

---

一、AJAX 核心概念解析

AJAX（Asynchronous JavaScript and XML）是一种在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页内容的技术。它通过异步通信提升用户体验，现已成为现代 Web 开发的核心技术之一。

---

1.1 AJAX 的核心概念

1. 异步通信：浏览器在后台发送请求，不阻塞用户界面。

2. 数据格式：早期使用 XML，现主流为 JSON。

3. 无刷新更新：仅更新页面局部内容，减少流量消耗。

---

1.2 AJAX 工作原理

1. 用户触发事件（如点击按钮）。

2. 创建请求对象：浏览器通过 XMLHttpRequest 或 Fetch API 发起请求。

3. 发送请求：向服务器发送 HTTP 请求（GET/POST）。

4. 服务器处理：服务器接收请求并返回数据（JSON/XML/HTML）。

5. 接收响应：客户端处理返回数据，更新 DOM。

---

1.3 AJAX 局限性

• 代码冗余：需手动处理 XHR 状态、错误、超时等逻辑。

• 回调地狱：多层异步操作嵌套，代码可读性差。

• 功能有限：缺少自动 JSON 转换、拦截器、取消请求等现代特性。

• 代码冗余：需手动处理 XHR 状态、错误、超时等逻辑。

• 回调地狱：多层异步操作嵌套，代码可读性差。

• 功能有限：缺少自动 JSON 转换、拦截器、取消请求等现代特性。

---

二、axios 库介绍

Axios 是一个基于 Promise 的现代化 HTTP 客户端库，用于浏览器和 Node.js 环境。它简化了 AJAX 请求的发送与响应处理，支持拦截器、取消请求、自动转换 JSON 数据等高级功能，是前端开发中最流行的 HTTP 请求工具之一。

---

2.1 Axios 核心特性

1. 基于 Promise：支持 async/await 和链式调用。

2. 浏览器 & Node.js：全平台兼容（浏览器使用 XMLHttpRequest，Node.js 使用 http 模块）。

3. 自动数据转换：自动将请求/响应数据转换为 JSON 或其他格式。

4. 拦截器：全局拦截请求和响应，实现统一处理（如添加 Token）。

5. 取消请求：支持请求取消功能，避免资源浪费。

6. 并发处理：提供 axios.all 和 axios.spread 处理并发请求。

2.2 快速上手

引入：

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

语法： 

axios({
  // ...请求选项
}).then(result => {
  // 处理成功数据
}).catch(error => {
  // 处理失败错误
})

示例： 

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
  axios({
    url: 'https://api.example.com/data',
    method: 'GET',
    params: { page: 1 }
  }).then(response => {
    console.log(response.data);
  });
</script>

2.3 核心配置项

参数	说明	类型
url	请求地址	string
method	请求方法（默认GET）	string
params	URL 查询参数	object
data	请求体数据	object
headers	自定义请求头	object

2.4 错误处理标准方案

axios.post('/api/login', credentials)
  .then(response => {
    // 处理成功响应
  })
  .catch(error => {
    console.error('错误详情:', error.response?.data);
    alert(error.response?.data.message || '请求失败');
  })
  .finally(() => {
    // 通用清理逻辑
  });

---

三、Axios 核心配置项

3.1 常用核心配置项

参数	说明	类型
url	请求地址	string
method	请求方法（默认GET）	string
params	URL 查询参数	object
data	请求体数据	object
headers	自定义请求头	object

1. url

• 作用：目标资源的 URL 地址（必需项）。

• 格式：

  • 绝对路径：https://api.example.com/users

  • 相对路径：/api/users（需配合 baseURL 配置使用）。

• 示例：

  axios({
    url: '/users',
    baseURL: 'https://api.example.com', // 实际 URL → https://api.example.com/users
  });

2. method

• 作用：指定 HTTP 请求方法（默认 GET）。

• 可选值：GET、POST、PUT、DELETE、PATCH 等。

• 示例：

  axios({
    method: 'POST',
    url: '/submit',
    data: { name: 'John' }
  });

3. params

• 作用：设置 URL 查询参数（仅用于 GET 等支持查询参数的方法）。

• 特点：

  • 参数会被自动序列化为 ?key1=value1&key2=value2。

  • 支持对象或 URLSearchParams 格式。

• 示例：

  axios.get('/search', {
    params: {
      keyword: 'axios',
      page: 2
    }
  });
  // 实际 URL → /search?keyword=axios&page=2

4. data

• 作用：设置请求体数据（用于 POST、PUT、PATCH 等方法）。

• 特点：

  • 数据格式由 headers['Content-Type'] 决定：

    • application/json：传递 JSON 对象（Axios 默认自动转换）。

    • multipart/form-data：传递 FormData（常用于文件上传）。

    • application/x-www-form-urlencoded：传递 URL 编码字符串。

• 示例：

  // 提交 JSON 数据
  axios.post('/users', {
    name: 'Alice',
    age: 25
  });
  
  // 提交 FormData
  const formData = new FormData();
  formData.append('file', fileInput.files[0]);
  axios.post('/upload', formData, {
    headers: { 'Content-Type': 'multipart/form-data' }
  });

5. headers

• 作用：自定义 HTTP 请求头。

• 常见场景：

  • 身份认证（Authorization）。

  • 设置内容类型（Content-Type）。

  • 跨域相关头（如 CORS）。

• 示例：

  axios.post('/auth/login', { username: 'admin', password: '123' }, {
    headers: {
      'Content-Type': 'application/json',
      'Authorization': 'Bearer token123', // JWT 认证
      'X-Custom-Header': 'value'          // 自定义头
    }
  });

---

3.2 完整配置示例

axios({
  url: '/api/users',
  method: 'POST',
  params: { debug: true }, // 仅对 GET 有效（此处无效，因为 method 是 POST）
  data: { 
    username: 'user123',
    password: 'secret'
  },
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer token123'
  },
  timeout: 5000 // 超时时间（毫秒）
})
.then(response => {
  console.log(response.data);
})
.catch(error => {
  console.error('请求失败:', error);
});

---

3.3 关键区别总结

配置项	适用方法	数据位置	常见数据格式
params	GET、DELETE 等	URL 查询字符串	键值对（对象或 URLSearchParams）
data	POST、PUT、PATCH 等	请求体（Body）	JSON、FormData、URL 编码字符串

---

3.4 注意事项

Content-Type 匹配：

• 使用 data 时需确保 headers['Content-Type'] 与数据格式一致，否则服务器可能无法解析。
• 若 data 为对象且未设置 Content-Type，Axios 默认按 application/json 序列化。
• 使用 FormData 时需显式设置 'Content-Type': 'multipart/form-data'。

GET 请求的 data 无效：

• GET 请求的 data 配置会被忽略（HTTP 规范不支持 GET 带请求体）。

参数编码：

• params 中的特殊字符会被 Axios 自动 URL 编码（如空格 → %20）。

---

四、Axios常用HTTP方法

4.1 GET 请求（获取数据）

用途：从服务器获取资源（如查询列表、详情）。

1. 基础用法

// 获取所有用户
axios.get('/api/users')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('请求失败:', error);
  });

2. 带查询参数

// 分页查询（/api/users?page=2&limit=10）
axios.get('/api/users', {
  params: {
    page: 2,
    limit: 10
  }
});

3. async/await 写法

async function fetchUser(id) {
  try {
    const response = await axios.get(`/api/users/${id}`);
    console.log(response.data);
  } catch (error) {
    console.error('获取用户失败:', error);
  }
}

---

4.2 POST 请求（创建数据）

用途：向服务器提交新数据（如新增用户）。

1. 提交 JSON 数据

axios.post('/api/users', {
  name: 'John',
  age: 30
})
.then(response => {
  console.log('创建成功:', response.data);
});

2. 提交 FormData（文件上传）

const formData = new FormData();
formData.append('avatar', fileInput.files[0]); // 文件
formData.append('username', 'john_doe');       // 文本字段

axios.post('/api/upload', formData, {
  headers: {
    'Content-Type': 'multipart/form-data' // 必须设置
  }
});

---

4.3 PUT 请求（全量更新）

用途：替换服务器上的整个资源（需提供完整数据）。

// 更新用户 ID 为 1 的所有数据
axios.put('/api/users/1', {
  name: 'John',
  age: 31,       // 全量更新，未提供的字段会被置空
  email: '[e-mail]'
});

---

4.4 PATCH 请求（部分更新）

用途：更新资源的部分字段（仅提交需要修改的数据）。

// 仅更新用户 ID 为 1 的年龄
axios.patch('/api/users/1', {
  age: 31        // 其他字段保持不变
});

---

4.5 DELETE 请求（删除数据）

用途：删除服务器上的资源。

// 删除用户 ID 为 1
axios.delete('/api/users/1')
  .then(() => {
    console.log('删除成功');
  });

---

4.6 完整配置示例

// 全局配置（可选）
axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = 'Bearer token123';

// 发起请求
axios({
  method: 'post',
  url: '/users',
  data: { name: 'Alice' },
  headers: { 'X-Custom-Header': 'value' },
  timeout: 5000 // 超时时间（毫秒）
})
.then(response => {
  console.log(response.data);
})
.catch(error => {
  if (error.response) {
    console.error('服务器返回错误:', error.response.status);
  } else if (error.request) {
    console.error('未收到响应:', error.request);
  } else {
    console.error('请求配置错误:', error.message);
  }
});

---

4.7 关键区别总结

方法	幂等性	语义	请求体	典型场景
GET	幂等	获取资源	无	查询数据
POST	非幂等	创建资源	有	新增用户、提交表单
PUT	幂等	替换整个资源	有	全量更新用户信息
PATCH	非幂等	更新资源的部分字段	有	修改用户邮箱
DELETE	幂等	删除资源	无	删除文章、用户

---

4.8 注意事项

1. 幂等性：GET、PUT、DELETE 是幂等的（多次执行结果相同），POST、PATCH 非幂等。

2. Content-Type：POST/PUT/PATCH 需根据数据类型设置请求头（如 application/json）。

3. 错误处理：统一通过 .catch() 或 try/catch 捕获网络错误和业务错误。

---

五、接口文档规范与使用

接口文档：由后端提供的描述接口的文章。

 

5.1 标准接口文档要素

1. 接口地址

2. 请求方法

3. 请求参数（类型、是否必需）

4. 响应格式

5. 错误代码

6. 示例调用

5.2 文档使用示例

// 根据文档实现用户信息接口
async function getUserProfile(userId) {
  try {
    const response = await axios({
      url: `/api/users/${userId}`,
      method: 'GET',
      headers: {
        'Authorization': `Bearer ${token}`
      }
    });
    return response.data;
  } catch (error) {
    handleApiError(error);
  }
}

---

六、form-serialize 高效表单处理

使用 form-serialize 插件可以快速收集目标表单范围内表单元素的值。

6.1 form-serialize 插件语法

1. 引入 form-serialize 插件到自己网页中

2. 使用 serialize 函数

   • 参数1：要获取的 form 表单标签对象（要求表单元素需要有 name 属性-用来作为收集的数据中属性名）

   • 参数2：配置对象

     • hash：

       • true - 收集出来的是一个 JS 对象结构

       • false - 收集出来的是一个查询字符串格式

     • empty：

       • true - 收集空值

       • false - 不收集空值

6.2 使用示例

<script src="./lib/form-serialize.js"></script>

const form = document.querySelector('#userForm');
const data = serialize(form, {
  hash: true,  // 返回JS对象
  empty: true  // 包含空值
});

// 输出示例
{
  username: 'test',
  profile: {
    age: '25',
    gender: 'male'
  }
}

6.3 注意事项

1. 表单元素必须设置 name 属性

2. 嵌套字段使用 parent[child] 语法命名

3. 文件上传需要特殊处理

---