现代前端通过JavaScript实现AJAX请求，主要方式有三种：1. XMLHttpRequest兼容性好，适合老旧浏览器；2. Fetch API基于Promise，语法简洁，适合现代浏览器；3. axios功能强大，支持拦截、自动转换JSON，适合复杂项目。应根据项目需求和兼容性选择，并注重错误处理与用户体验。
使用JavaScript实现AJAX请求是现代前端开发中实现异步网络通信的核心技术。它允许网页在不刷新的情况下与服务器交换数据并更新部分内容，提升用户体验。目前主要有三种方式实现AJAX请求：原生XMLHttpRequest、Fetch API以及借助第三方库如axios。
1. 使用XMLHttpRequest（传统方式）
XMLHttpRequest是最早用于实现AJAX的技术，兼容性好，适用于需要支持老旧浏览器的项目。
示例：创建一个GET请求获取用户数据：
const xhr = new XMLHttpRequest();<br>
xhr.open('GET', '/api/users', true);<br>
xhr.onreadystatechange = function () {<br>
if (xhr.readyState === 4 && xhr.status === 200) {<br>
const data = JSON.parse(xhr.responseText);<br>
console.log(data);<br>
}<br>
};<br>
xhr.send();
发送POST请求提交表单数据：
立即学习“Java免费学习笔记（深入）”；
const xhr = new XMLHttpRequest();<br>
xhr.open('POST', '/api/login', true);<br>
xhr.setRequestHeader('Content-Type', 'application/json');<br>
xhr.onload = function () {<br>
if (xhr.status === 200) {<br>
console.log(JSON.parse(xhr.responseText));<br>
}<br>
};<br>
xhr.send(JSON.stringify({ username: 'test', password: '123' }));
2. 使用Fetch API（现代方式）
Fetch是ES6之后推荐的原生方法，基于Promise，语法更简洁，支持链式调用。
示例：GET请求：
fetch('/api/users')<br>
.then(response => {<br>
if (!response.ok) throw new Error('网络错误');<br>
return response.json();<br>
})<br>
.then(data => console.log(data))<br>
.catch(err => console.error(err));
POST请求：
fetch('/api/login', {<br>
method: 'POST',<br>
headers: { 'Content-Type': 'application/json' },<br>
body: JSON.stringify({ username: 'test', password: '123' })<br>
})<br>
.then(res => res.json())<br>
.then(data => console.log(data));
3. 使用axios（第三方库）
axios是一个基于Promise的HTTP客户端，功能强大，支持请求拦截、响应拦截、自动转换JSON等，适合复杂项目。
引入方式：通过CDN或npm安装：
npm install axios
axios.get('/api/users')<br>
.then(response => {<br>
console.log(response.data);<br>
})<br>
.catch(error => {<br>
console.error(error);<br>
});
POST请求：
axios.post('/api/login', {<br>
username: 'test',<br>
password: '123'<br>
})<br>
.then(res => console.log(res.data));
配置默认基础URL和拦截器：
axios.defaults.baseURL = 'https://api.example.com';<br><br>
axios.interceptors.request.use(config => {<br>
console.log('发送请求前');<br>
return config;<br>
});<br><br>
axios.interceptors.response.use(res => {<br>
console.log('收到响应');<br>
return res;<br>
});
4. 错误处理与最佳实践
无论使用哪种方式，都应妥善处理网络异常和HTTP错误状态。
- 检查response.ok或status判断响应是否成功
- 捕获网络异常（如断网、跨域）
- 设置超时机制（axios支持timeout，fetch可通过AbortController实现）
- 避免在生产环境暴露敏感信息
- 合理使用加载状态提示用户
基本上就这些。选择合适的方式取决于项目需求和浏览器兼容要求。Fetch API适合现代应用，axios适合需要高级功能的项目，而XMLHttpRequest则可用于必须兼容老浏览器的场景。不复杂但容易忽略的是错误处理和用户体验细节。
