17370845950

AJAX是一种利用XMLHttpRequest或fetch API实现异步通信、局部更新页面的技术。它通过异步请求避免页面刷新，支持多种HTTP方法，常用fetch（推荐）和XMLHttpRequest两种实现方式，并需注意跨域、错误处理、JSON解析及加载状态管理。

AJAX（Asynchronous JavaScript and XML）是一种在不重新加载整个网页的前提下，与服务器交换数据并更新部分页面的技术。它不是某一个具体的语言或框架，而是利用浏览器内置的 XMLHttpRequest 对象（或现代的 fetch API）实现异步通信的编程方式。

核心原理：异步请求不阻塞页面

传统网页提交表单会跳转或刷新页面；AJAX则让 JavaScript 在后台悄悄发请求、收响应，拿到数据后再用 DOM 操作局部更新内容——用户感觉不到页面“闪动”，体验更流畅。

• 请求发起后，JS 不等待响应，继续执行后续代码
• 响应返回时，通过回调函数（如 onload）或 Promise 处理数据
• 支持 GET（查）、POST（增/改）、PUT、DELETE 等 HTTP 方法

两种常用实现方式

1. 使用 fetch API（推荐，现代写法）

语法简洁，基于 Promise，支持 async/await：

async function loadData() {
  try {
    const res = await fetch('/api/users');
    const data = await res.json();
    console.log(data); // 渲染到页面
  } catch (err) {
    console.error('请求失败:', err);
  }
}

2. 使用 XMLHttpRequest（兼容老浏览器）

更底层，需手动处理状态和回调：

const xhr = new XMLHttpRequest();
xhr.open('GET', '/api/users');
xhr.onload = function() {
  if (xhr.status === 200) {
    const data = JSON.parse(xhr.responseText);
    console.log(data);
  }
};
xhr.send();

发送带数据的请求（如登录、提交表单）

向服务器传参常用两种格式：

• URL 参数（GET）：拼在地址后，如 /search?q=js
• 请求体（POST/PUT）：用 FormData 上传表单，或用 JSON.stringify() 发送 JSON 数据，并设置 Content-Type 头

示例（fetch 发送 JSON）：

fetch('/api/login', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ username: 'admin', password: '123' })
})

常见注意事项

实际开发中容易踩坑的地方：

• 跨域限制：非同源请求会被浏览器拦截，需后端配置 CORS 或使用代理
• 错误处理不能只看 res.ok，HTTP 错误码（如 404、500）仍可能返回成功状态，需检查 res.status
• JSON 响应务必用 res.json() 解析，直接读 res.text() 得到的是字符串
• 避免忘记处理加载状态（如显示 loading、禁用按钮），提升用户体验