Ajax介绍

Ajax（Asynchronous JavaScript and XML）详解

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

一、核心原理

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

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

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

二、原生 XMLHttpRequest 实现

// 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：

// 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 的核心特点

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

五、跨域问题及解决方案

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

1. CORS（跨域资源共享）：

   • 服务器端设置响应头 A***ess-Control-Allow-Origin: *（允许所有域名）或指定域名。
   • 是最推荐的方案，支持所有 HTTP 方法。

2. JSONP（仅支持 GET 请求）：

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

   function handleJsonpResponse(data) {
     console.log('JSONP 数据：', data);
   }
   
   const script = document.createElement('script');
   script.src = 'https://other-domain.***/api?callback=handleJsonpResponse';
   document.body.appendChild(script);
   

3. 代理服务器：

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

六、Ajax 的应用场景

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

七、与传统网页的区别

总结

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