AJAX是使用XMLHttpRequest或fetch API实现异步通信的编程方式，核心是不阻塞JS执行；fetch基于Promise，推荐用于GET/POST请求，需注意状态码判断和响应解析；XMLHttpRequest兼容旧浏览器，需手动处理状态与数据解析。
JavaScript 与后端交互最常用的方式就是 AJAX（Asynchronous JavaScript and XML），它允许网页在不刷新整个页面的情况下，向服务器发送请求并处理响应。虽然名字里有 XML，但现在更常用 JSON 格式传输数据。
什么是 AJAX？
AJAX 不是一种语言或框架，而是一种使用现有技术（主要是 XMLHttpRequest 或现代的 fetch API）实现异步通信的编程方式。核心特点是：请求发送后，JS 不会卡住等待结果，而是继续执行，等服务器返回后再触发回调或 Promise 处理。
用 fetch 发送 GET 请求（推荐）
fetch 是现代浏览器原生支持的、基于 Promise 的 API，语法简洁，是当前主流选择：
示例：获取用户列表
立即学习“Java免费学习笔记（深入）”；
fetch('/api/users')
.then(response => {
if (!response.ok) throw new Error('网络响应失败');
return response.json(); // 解析 JSON 数据
})
.then(data => console.log(data))
.catch(err => console.error('请求出错：', err));
- 默认是 GET 请求，无需额外配置
- 注意检查 response.ok，因为 4xx/5xx 状态码不会自动 reject
- 必须手动调用
.json()、.text()等方法解析响应体
用 fetch 发送 POST 请求（带数据）
向后端提交数据时，通常需要设置请求头和请求体：
示例：登录请求
const loginData = { username: 'admin', password: '123' };
fetch('/api/login', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(loginData)
})
.then(res => res.json())
.then(data => console.log('登录成功：', data))
.catch(err => console.error(err));
-
method显式指定为'POST' -
headers告诉后端你发的是 JSON 数据 -
body必须是字符串，所以要用JSON.stringify()
用 XMLHttpRequest（兼容老浏览器）
如果需要支持 IE10 及更早版本，可用传统 XMLHttpRequest：
const xhr = new XMLHttpRequest();
xhr.open('GET', '/api/posts');
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
console.log(JSON.parse(xhr.responseText));
} else {
console.error('请求失败：', xhr.status);
}
}
};
xhr.send();
-
open()设置请求方式和地址 -
onreadystatechange监听状态变化，readyState === 4表示请求完成 - 需手动解析
responseText（如果是 JSON）
基本上就这些。用 fetch 足够应付大多数场景，搭配 async/await 写法更清晰；XMLHttpRequest 更底层，适合特殊定制需求。关键不是选哪个 API，而是理解“异步”、“请求头”、“状态码”、“数据格式”这几个核心点。
