AJAX是一种异步JavaScript技术，实现局部页面更新而不刷新整个网页；现多用JSON而非XML；主流用fetch()，旧浏览器可选XMLHttpRequest；需注意错误处理、CORS、HTTPS及用户体验细节。
AJAX 是 Asynchronous JavaScript and XML 的缩写，指一种在不刷新整个网页的前提下，与服务器交换数据并更新部分页面内容的技术。虽然名字里有 XML，但现在更常用 JSON 格式传输数据。
核心特点：异步 + 局部更新
传统网页提交表单会跳转或刷新整个页面；AJAX 则让浏览器在后台悄悄发请求，拿到响应后只改页面中需要变动的那一小块（比如一个列表、一段提示文字），体验更流畅。
- 不打断用户操作，页面保持可交互
- 减少重复加载 HTML/CSS/JS，节省带宽和时间
- 依赖 JavaScript，服务端只需提供数据接口（如 /api/users）
现代发起 AJAX 请求的主流方式：fetch()
推荐使用 内置的 fetch() API，简洁、基于 Promise，是当前标准做法。
- 基本 GET 请求：
fetch('/api/posts')
.then(response => response.json())
.then(data => console.log(data))
.catch(err => console.error('请求失败:', err));
- 带参数的 POST 请求（如提交表单）：
fetch('/api/login', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ username: 'admin', password: '123' })
})
.then(res => res.json())
.then(result => console.log(result))
.catch(err => console.error(err));
兼容旧浏览器？用 XMLHttpRequest（XHR）
如果必须支持 IE10 或更早版本，可用原生 XMLHttpRequest，但代码稍冗长：
立即学习“Java免费学习笔记（深入）”；
const xhr = new XMLHttpRequest();
xhr.open('GET', '/api/data');
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
console.log(JSON.parse(xhr.responseText));
} else {
console.error('请求出错');
}
}
};
xhr.send();
实际开发中建议注意这些
- 始终检查
response.ok（fetch）或status（XHR），HTTP 错误码（如 404、500）不会自动抛异常 - 跨域请求需服务端设置 CORS 头，否则浏览器会拦截
- 敏感操作（如登录、支付）务必用 HTTPS，避免凭证泄露
- 加载中状态、错误提示、防重复提交等用户体验细节不能少
