AJAX是通过XMLHttpRequest或fetch实现异步通信以局部更新页面的技术，推荐使用基于Promise的fetch配合async/await，并注意loading提示、防重复提交、请求取消和CORS跨域处理。
AJAX（Asynchronous JavaScript and XML）是一种在不重新加载整个网页的前提下，与服务器交换数据并更新部分页面内容的技术。它的核心是异步通信，用户操作时页面不“闪退”、不跳转，体验更流畅。
AJAX 的本质是 XMLHttpRequest 对象
现代浏览器都内置了 XMLHttpRequest（简称 XHR），它是实现 AJAX 的底层接口。虽然名字里有 XML，但现在更多用来传输 JSON 数据。
- 创建请求对象：
const xhr = new XMLHttpRequest(); - 配置请求：
xhr.open('GET', '/api/data', true);（第三个参数true表示异步） - 设置响应处理：
xhr.onload = function() { if (xhr.status === 200) { console.log(xhr.responseText); } }; - 发送请求：
xhr.send();
用 fetch API 更简洁地发请求
fetch 是较新的标准，基于 Promise，语法更清晰，是目前推荐的主流方式。
- 基本 GET 请求：
fetch('/api/user').then(res => res.json()).then(data => console.log(data)); - 带参数的 POST 请求：
fetch('/api/login', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ username: 'admin', password: '123' }) }).then(res => res.json()).then(data => console.log(data)); - 注意：fetch 默认不带 cookie，如需携带，加
credentials: 'include'
用 async/await 让异步代码更易读
配合 async/await，可以把 Promise 链式调用写成类似同步的风格，减少嵌套，便于错误处理。
立即学习“Java免费学习笔记（深入）”；
- 示例：
async function loadUserData() { try { const res = await fetch('/api/profile'); const data = await res.json(); document.getElementById('name').textContent = data.name; } catch (err) { console.error('请求失败：', err); } } - 适合封装成可复用的函数，比如
apiGet(url)或apiPost(url, data)
实际使用中要注意的关键点
光能发请求还不够，真实项目中这几个细节常被忽略：
- 状态提示：请求中显示 loading，失败时给用户友好提示（比如“网络异常，请重试”）
- 防重复提交：按钮点击后禁用，请求完成后恢复，避免用户狂点造成多次请求
-
取消请求：长列表滚动加载时，用户快速翻页，前一个请求应主动 abort（fetch 可用
AbortController） - 跨域问题：前端请求非同源接口时，需后端配置 CORS 响应头，否则浏览器会拦截
