一，什么是AJAX
AJAX 是 Asynchronous JavaScript and XML 的缩写，直译为“异步的 JavaScript 和 XML”。
- 异步（Asynchronous）：这是最核心的特性。指浏览器发送请求后，不必等待服务器响应，可以继续执行其他操作（如滚动、点击）。当服务器返回数据时，浏览器会通过回调函数来处理。
- JavaScript：负责发起请求和处理服务器返回的数据。
- XML：最初服务器返回的数据格式是 XML。但如今，JSON 已经几乎完全取代了 XML，因为它更轻量、更易解析。
简单来说，AJAX 是一种在网页不刷新的情况下，与服务器交换数据并更新部分页面内容的技术。
二，AJAX使用方式
2.1 三种主流实现方式
| 方式 | 适用场景 | 学习建议 |
|---|---|---|
| Fetch API | 现代浏览器，项目首选 | ⭐⭐⭐⭐⭐ 必学 |
| Axios 库 | 复杂项目，需拦截器/取消请求 | ⭐⭐⭐⭐ 常用 |
| XMLHttpRequest | 兼容老旧浏览器 | ⭐⭐ 了解即可 |
好的，既然你已经了解了 AJAX 是什么，那我们来上手实际操作。我会从最基础的原生方式讲到现代最常用的方式，并附上可直接运行的代码示例。
2.2 Fetch API
这是浏览器原生支持的，基于 Promise，语法简洁。
GET 请求
// 获取用户列表
fetch('https://api.example.com/users')
.then(response => {
// 检查响应是否成功
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
return response.json(); // 解析 JSON
})
.then(data => {
console.log('用户数据:', data);
// 在这里更新页面
renderUserList(data);
})
.catch(error => {
console.error('请求失败:', error);
alert('加载失败，请稍后重试');
});
// 模拟渲染函数
function renderUserList(users) {
const list = document.getElementById('userList');
list.innerHTML = users.map(u => `<li>${u.name}</li>`).join('');
}
POST 请求
// 提交新用户
const newUser = {
name: '张三',
email: 'zhangsan@example.com'
};
fetch('https://api.example.com/users', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
// 如需认证，加 Authorization 头
// 'Authorization': 'Bearer your-token'
},
body: JSON.stringify(newUser) // 转成 JSON 字符串
})
.then(response => response.json())
.then(data => {
console.log('创建成功:', data);
// 刷新列表或跳转
})
.catch(error => console.error('提交失败:', error));
带参数的 GET 请求
// 方式1：直接拼接到 URL
const userId = 123;
fetch(`https://api.example.com/users/${userId}`)
// 方式2：使用 URLSearchParams（推荐，自动编码）
const params = new URLSearchParams({
page: 1,
limit: 10,
keyword: '搜索词'
});
fetch(`https://api.example.com/users?${params}`)
2.2 Axios
需要先安装：npm install axios 或在 HTML 中用 CDN 引入。
<!-- 在 HTML 中引入 -->
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
GET 请求
// GET 请求
axios.get('https://api.example.com/users', {
params: {
page: 1,
limit: 10
}
})
.then(response => {
console.log('数据:', response.data); // Axios 自动解析 JSON
})
.catch(error => {
console.error('错误:', error.response?.data || error.message);
});
POST 请求
// POST 请求（自动 JSON 序列化）
axios.post('https://api.example.com/users', {
name: '李四',
email: 'lisi@example.com'
})
.then(response => {
console.log('创建成功:', response.data);
});
Axios 的独特优势
// 1. 拦截器（统一处理 token、错误）
axios.interceptors.request.use(config => {
config.headers.Authorization = `Bearer ${localStorage.getItem('token')}`;
return config;
});
// 2. 并发请求
Promise.all([
axios.get('/api/users'),
axios.get('/api/posts')
]).then(([usersRes, postsRes]) => {
console.log('用户和文章都加载完了');
});
// 3. 取消请求（防抖搜索场景）
const cancelToken = axios.CancelToken;
const source = cancelToken.source();
axios.get('/api/search', { cancelToken: source.token });
// 取消上次未完成的请求
source.cancel('取消请求');
2.3 XMLHttpRequest
这是最原始的方式，代码较繁琐，但部分老项目还在用。
const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/users', true); // true=异步
// 监听状态变化
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) { // 请求完成
if (xhr.status === 200) {
const data = JSON.parse(xhr.responseText);
console.log('数据:', data);
} else {
console.error('请求失败:', xhr.status);
}
}
};
xhr.send();
三，常见问题
3.1 跨域问题怎么办？
- 开发环境：配置代理（Vite/Webpack devServer）。
- 生产环境：后端配置 CORS 头。
// 后端 Node.js 示例（Express）
res.setHeader('Access-Control-Allow-Origin', '*');
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT');
3.2 如何处理错误？
// Fetch 最佳实践：统一错误处理
async function fetchData(url) {
try {
const res = await fetch(url);
if (!res.ok) throw new Error(`HTTP ${res.status}`);
return await res.json();
} catch (err) {
// 上报错误到监控系统
console.error('API 错误:', err);
// 显示用户友好的提示
showToast('网络异常，请稍后重试');
throw err; // 继续抛出，让调用方处理
}
}