AJAX可通过XMLHttpRequest、fetch或jQuery实现；推荐使用基于Promise的fetch API，支持async/await，语法简洁，现代浏览器兼容，发送GET/POST请求更高效。
AJAX（Asynchronous JavaScript and XML）是一种在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页内容的技术。在JavaScript中，可以通过多种方式实现AJAX请求，下面介绍几种常用方法。
使用原生 XMLHttpRequest
XMLHttpRequest 是最早用于实现 AJAX 的原生对象，兼容性好，适合学习理解原理。
基本用法如下：- 创建 XMLHttpRequest 实例
- 调用 open() 方法设置请求方式和URL
- 监听 onreadystatechange 事件处理响应
- 调用 send() 发送请求
示例代码：
var xhr = new XMLHttpRequest();
xhr.open('GET', '/api/data', true);
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText); // 处理返回数据
}
};
xhr.send();
使用 fetch API
fetch 是现代浏览器提供的更简洁、基于 Promise 的网络请求方法，推荐在支持的环境中使用。
立即学习“Java免费学习笔记（深入）”；
Java 接口排错助手
下载
在调试 Java 后端 API 故障时使用此技能，尤其适用于以下任务：分析日志、跨 Controller、Service 和 Mapper 层追踪请求、定位异常根因、检查 SQL 执行或参数流转，以及生成简洁的诊断结论与修复方案。
- 语法更清晰，支持 async/await
- 返回 Promise，便于链式调用
- 需要手动检查响应状态
示例：
fetch('/api/data')
.then(response => {
if (!response.ok) throw new Error('网络错误');
return response.json();
})
.then(data => console.log(data))
.catch(err => console.error(err));
配合 async/await 使用更直观：
async function getData() {
try {
const response = await fetch('/api/data');
if (!response.ok) throw new Error('请求失败');
const data = await response.json();
console.log(data);
} catch (err) {
console.error(err);
}
}
使用 jQuery.ajax（如果项目引入了 jQuery）
虽然现在原生方法更流行，但一些老项目仍使用 jQuery 简化 AJAX 操作。
示例：$.ajax({
url: '/api/data',
method: 'GET',
success: function(data) {
console.log(data);
},
error: function(xhr, status, err) {
console.error(err);
}
});
发送 POST 请求（以 fetch 为例）
向服务器提交数据时通常使用 POST 方法。
fetch('/api/submit', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ name: '张三', age: 25 })
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));
基本上就这些。选择哪种方式取决于你的项目环境和浏览器兼容要求。现代开发推荐使用 fetch，如需兼容旧浏览器可搭配 polyfill 或使用 axios 等库。
