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

《AJAX：前端异步交互的魔法指南》

news 来源：原创 2025/8/27 7:07:43

什么是AJAX

AJAX（Asynchronous JavaScript and XML，异步 JavaScript 和 XML） 是一种用于创建异步网页应用的技术，允许网页在不重新加载整个页面的情况下，与服务器交换数据并局部更新页面内容。尽管名称中包含 XML，但现代 AJAX 主要使用 JSON（JavaScript Object Notation）作为数据格式。

核心原理

异步通信
- 浏览器通过 JavaScript 异步发送请求到服务器，同时用户可继续操作页面。
- 服务器返回数据后，JavaScript 动态更新页面指定部分，无需刷新整个页面。
基于 XMLHttpRequest 或 Fetch API
- 传统 AJAX 使用 XMLHttpRequest 对象发起请求。
- 现代开发中更常用 Fetch API（基于 Promise，语法更简洁）。

工作流程

sequenceDiagramparticipant 用户participant 浏览器participant 服务器用户->>浏览器: 触发事件（点击、滚动等）浏览器->>服务器: 发送异步请求（XHR/Fetch）服务器->>浏览器: 返回数据（JSON/XML/HTML）浏览器->>用户: 局部更新页面内容

关键特点

特性	说明
异步性	不阻塞用户操作，后台完成数据交互。
无刷新更新	仅更新页面局部内容，避免整页重载。
数据格式灵活	支持 JSON、XML、HTML 或纯文本。
依赖 JavaScript	需浏览器启用 JavaScript。
跨域限制	默认受同源策略限制，需通过 CORS（跨域资源共享）或代理解决跨域问题。

使用浏览器的 XMLHttpRequest 对象与服务器通信
浏览器网页中，使用 AJAX技术（XHR对象）发起获取省份列表数据的请求，服务器代码响应准备好的省份列表数据给前端，前端拿到数据数组以后，展示到网页。

什么是axios

Axios 是一个基于 Promise 的现代化 HTTP 客户端库，专为浏览器和 Node.js 设计，用于简化前端与后端的数据交互。它封装了底层 HTTP 请求细节，提供了更简洁、易用的 API，并支持拦截器、自动 JSON 转换、请求取消等高级功能，是替代原生 XMLHttpRequest 和 Fetch API 的流行选择。

核心特性

特性	说明
基于 Promise	天然支持异步编程，避免回调地狱，可使用 `async/await` 简化代码。
浏览器 & Node.js 支持	同一套代码兼容浏览器（XHR）和 Node.js（HTTP 模块）。
自动 JSON 转换	自动将请求/响应数据与 JSON 格式互相转换。
拦截器机制	可全局拦截请求和响应，用于添加身份验证、日志、错误处理等统一逻辑。
取消请求	支持主动取消未完成的请求（如用户离开页面时终止无用请求）。
并发请求	通过 `axios.all()` 和 `axios.spread()` 处理多个并行请求。
客户端防御 XSRF	支持自动添加 XSRF Token 到请求头，增强安全性。
超时控制	可设置请求超时时间，避免长时间等待无响应。

基础用法示例

1. 发起 GET 请求

import axios from 'axios';// 基本 GET 请求
axios.get('https://api.example.com/data').then(response => {console.log(response.data); // 响应数据}).catch(error => {console.error('请求失败:', error);});// 带参数的 GET 请求
axios.get('https://api.example.com/user', {params: {id: 123,type: 'vip'}
});

2. 发起 POST 请求

axios.post('https://api.example.com/login', {username: 'admin',password: '123456'
})
.then(response => {console.log('登录成功:', response.data.token);
});

3. 并发请求

const getUser = axios.get('/user/123');
const getPosts = axios.get('/posts');axios.all([getUser, getPosts]).then(axios.spread((userRes, postsRes) => {console.log('用户数据:', userRes.data);console.log('帖子数据:', postsRes.data);}));

4. 全局配置

// 设置全局默认值（如 API 基础路径）
axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = 'Bearer token123';
axios.defaults.timeout = 5000; // 5秒超时

高级功能

1. 拦截器（Interceptors）

// 添加请求拦截器（如添加 Token）
axios.interceptors.request.use(config => {config.headers.Authorization = `Bearer ${localStorage.getItem('token')}`;return config;
}, error => {return Promise.reject(error);
});// 添加响应拦截器（如统一处理错误）
axios.interceptors.response.use(response => {return response.data; // 直接返回数据部分
}, error => {if (error.response.status === 401) {alert('登录已过期，请重新登录！');window.location.href = '/login';}return Promise.reject(error);
});

2. 取消请求

const source = axios.CancelToken.source();axios.get('/data', {cancelToken: source.token
}).catch(error => {if (axios.isCancel(error)) {console.log('请求被取消:', error.message);}
});// 取消请求（参数为可选提示信息）
source.cancel('用户主动取消操作');

Axios vs Fetch API

对比项	Axios	Fetch API
语法简洁性	封装度高，API 更简洁	原生 API，需手动处理更多细节
JSON 转换	自动转换请求/响应数据	需手动调用 `response.json()`
拦截器	支持全局请求/响应拦截	无内置拦截器，需自行封装
取消请求	内置支持	通过 `AbortController` 实现
浏览器兼容性	兼容 IE11+（需 polyfill）	兼容现代浏览器，IE 不支持
超时控制	直接通过 `timeout` 配置	需结合 `setTimeout` 和 `AbortController`

常见问题解决

跨域请求（CORS）
- 需后端配置 Access-Control-Allow-Origin 等响应头。
- 开发环境可通过代理（如 Webpack DevServer 代理）绕过。

文件上传

const formData = new FormData();
formData.append('file', fileInput.files[0]);axios.post('/upload', formData, {headers: { 'Content-Type': 'multipart/form-data' }
});

错误处理统一封装
建议通过拦截器集中处理 HTTP 状态码和业务错误码。

什么是URL

URL（Uniform Resource Locator，统一资源定位符） 是用于标识和定位互联网上资源（如网页、图片、视频等）的字符串。它是 Web 的核心组成部分，用户通过 URL 访问特定资源，浏览器通过 URL 向服务器请求数据。

URL 的结构

一个完整的 URL 通常由以下部分组成：

协议://主机名:端口号/路径?查询参数#片段标识符

示例

https://www.example.com:443/path/to/resource?name=value#section1

URL 的组成部分详解

部分	说明
协议（Scheme）	指定访问资源使用的协议，常见的有： - `http`：超文本传输协议 - `https`：加密的 HTTP - `ftp`：文件传输协议 - `mailto`：电子邮件地址
主机名（Host）	资源所在服务器的域名或 IP 地址，如 `www.example.com`。
端口号（Port）	服务器监听的端口号，默认端口可省略（如 HTTP 默认 80，HTTPS 默认 443）。
路径（Path）	资源在服务器上的具体位置，如 `/path/to/resource`。
查询参数（Query）	以 `?` 开头，包含键值对，用于传递额外信息，如 `?name=value&age=25`。
片段标识符（Fragment）	以 `#` 开头，指向资源内部的特定部分（如 HTML 页面的锚点）。

URL里的查询参数

什么是查询参数 ?

携带给服务器额外信息，让服务器返回我想要的某一部分数据而不是全部数据
举例：查询河北省下属的城市列表，需要先把河北省传递给服务器

查询参数的语法？
- 在 url 网址后面用?拼接格式：XXXX参数名1=值1&参数名2=值2
- 参数名一般是后端规定的，值前端看情况传递即可
axios 如何携带查询参数?
使用 params 选项即可

axios({url: '目标资源地址',params: {参数名: 值}
}).then(result => {// 对服务器返回的数据做后续处理
})

常用请求和数据提交

想要提交数据，先来了解什么是请求方法

请求方法是一些固定单词的英文，例如：GET，POST，PUT，DELETE，PATCH（这些都是http协议规定的），每个单词对应一种对服务器资源要执行的操作。

什么时候进行数据提交呢？

例如：多端要查看同一份订单数据，或者使用同一个账号进行登录，那订单/用户名+密码，就需要保存在服务器上，随时随地进行访问

axios 如何提交数据到服务器呢？

axios({url: '目标资源地址',method: '请求方法',data: {参数名: 值}
}).then(result => {// 对服务器返回的数据做后续处理
})

AXIOS的错误处理

Axios 的错误处理 是开发中非常重要的一部分，能够有效应对网络请求中的各种异常情况（如网络错误、服务器错误、超时等）。Axios 提供了多种方式来处理错误，包括 catch 方法、try/catch 语法（结合 async/await）以及拦截器机制。

Axios 的错误对象包含以下关键属性：

message：错误描述。
response：服务器返回的响应对象（如果有）。
- status：HTTP 状态码（如 404、500）。
- data：服务器返回的错误数据。
request：请求对象（如果请求已发出但未收到响应）。
config：请求的配置信息。

示例：使用 catch 处理错误

axios.get('https://api.example.com/data').then(response => {console.log('请求成功:', response.data);}).catch(error => {if (error.response) {// 服务器返回了错误状态码（4xx/5xx）console.error('服务器错误:', error.response.status, error.response.data);} else if (error.request) {// 请求已发出但未收到响应console.error('网络错误:', error.message);} else {// 其他错误（如配置错误）console.error('请求配置错误:', error.message);}});

示例：使用 async/await 处理错误

async function fetchData() {try {const response = await axios.get('https://api.example.com/data');console.log('请求成功:', response.data);} catch (error) {if (error.response) {console.error('服务器错误:', error.response.status, error.response.data);} else if (error.request) {console.error('网络错误:', error.message);} else {console.error('请求配置错误:', error.message);}}
}