Ajax介绍 - 技术栈

Ajax（Asynchronous JavaScript and XML）详解

Ajax 是一种用于创建快速动态网页的技术，核心是在不重新加载整个页面的情况下，与服务器进行异步数据交换，从而实现局部更新页面内容。尽管名字包含 XML，但现在更多使用 JSON 进行数据交换。

一、核心原理

Ajax 的工作流程依赖于浏览器内置的 XMLHttpRequest 对象（或现代的 fetch API），通过以下步骤实现异步通信：

创建请求对象 ：初始化 XMLHttpRequest 实例（或使用 fetch）。
配置请求：指定请求方法（GET/POST 等）、URL、是否异步等。
发送请求：向服务器发送数据（可选）。
监听响应：通过事件监听服务器返回的结果。
处理响应：解析数据并更新页面 DOM（局部刷新）。

整个过程不会阻塞浏览器主线程，用户可以继续与页面交互。

二、原生 XMLHttpRequest 实现

javascript 复制代码

// 1. 创建 XMLHttpRequest 实例
const xhr = new XMLHttpRequest();

// 2. 配置请求（方法、URL、是否异步）
xhr.open('GET', '/api/data', true); // 第三个参数 true 表示异步

// 3. 监听响应状态变化
xhr.onreadystatechange = function() {
  // readyState 4：请求完成；status 200：请求成功
  if (xhr.readyState === 4 && xhr.status === 200) {
    // 4. 解析响应数据（假设返回 JSON）
    const data = JSON.parse(xhr.responseText);
    // 5. 更新页面
    document.getElementById('result').innerText = data.message;
  }
};

// 4. 发送请求（GET 请求无请求体，传 null）
xhr.send(null);

readyState 状态说明 ：
- 0：未初始化（未调用 open）
- 1：加载中（open 已调用，未调用 send）
- 2：已加载（send 已调用，响应头已接收）
- 3：交互中（正在接收响应体）
- 4：完成（响应已全部接收）

三、现代替代方案：fetch API

fetch 是 ES6 引入的基于 Promise 的 API，语法更简洁，支持异步/await，逐渐替代 XMLHttpRequest：

javascript 复制代码

// GET 请求示例
fetch('/api/data')
  .then(response => {
    // 检查响应状态（fetch 仅在网络错误时 reject，HTTP 错误需手动处理）
    if (!response.ok) throw new Error('请求失败');
    return response.json(); // 解析 JSON 响应
  })
  .then(data => {
    document.getElementById('result').innerText = data.message;
  })
  .catch(error => console.error('错误：', error));

// POST 请求示例（带请求体）
fetch('/api/submit', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ name: 'Alice', age: 20 }) // 发送 JSON 数据
})
.then(response => response.json())
.then(data => console.log('提交成功：', data));

与 XMLHttpRequest 的区别 ：
- fetch 返回 Promise，支持 async/await，代码更清晰。
- fetch 默认不携带 cookies，需配置 credentials: 'include'。
- fetch 不会拒绝 HTTP 错误状态（如 404、500），需手动判断 response.ok。

四、Ajax 的核心特点

异步性：请求发送后不阻塞页面，用户可正常操作。
局部刷新：只更新页面需要变化的部分，无需重新加载整个页面。
减少数据传输：仅交换必要的数据（如 JSON），比整页 HTML 更高效。
跨域限制：受浏览器同源策略限制，默认不允许跨域请求（需通过 CORS 或代理解决）。

五、跨域问题及解决方案

由于浏览器的同源策略（协议、域名、端口必须完全一致），Ajax 默认不能访问不同源的接口，常见解决方式：

CORS（跨域资源共享）：
- 服务器端设置响应头 Access-Control-Allow-Origin: *（允许所有域名）或指定域名。
- 是最推荐的方案，支持所有 HTTP 方法。

JSONP（仅支持 GET 请求）：

利用 <script> 标签不受同源策略限制的特性，动态创建脚本标签请求数据。
服务器返回回调函数包裹的 JSON 数据（如 callback({ data: ... })）。

javascript 复制代码

function handleJsonpResponse(data) {
  console.log('JSONP 数据：', data);
}

const script = document.createElement('script');
script.src = 'https://other-domain.com/api?callback=handleJsonpResponse';
document.body.appendChild(script);

代理服务器：
- 前端请求同源的后端服务器，由后端转发请求到跨域接口（如 Vue 项目的 vue.config.js 配置代理）。

六、Ajax 的应用场景

表单提交验证（实时检查用户名是否已存在）。
无限滚动加载（滚动到底部时异步加载更多内容）。
实时搜索建议（输入时动态请求匹配结果）。
数据仪表盘（定期异步刷新统计数据）。

七、与传统网页的区别

传统网页	Ajax 网页
每次更新需重新加载整个页面	仅局部更新，不刷新整个页面
用户操作时可能出现页面闪烁	操作流畅，无闪烁
数据传输量大（整页 HTML）	数据传输量小（仅需交换的数据）
交互体验较差	交互体验接近桌面应用

总结

Ajax 彻底改变了网页的交互方式，通过异步数据交换实现了无刷新更新，是现代 Web 应用（如单页应用 SPA）的核心技术之一。尽管原生 XMLHttpRequest 使用较繁琐，但 fetch API 和 Axios 等库简化了其使用，使得开发者能更专注于业务逻辑。理解 Ajax 的原理和跨域解决方案，是前端开发的基础技能。