17370845950

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 链式调用写成类似同步的风格，减少嵌套，便于错误处理。

• 示例：

  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 响应头，否则浏览器会拦截