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)
实际使用中要注意的关键点
光能发请求还不够,真实项目中这几个细节常被忽略:











