前端必学：原生AJAX原理与实践指南

1. 为什么前端新人需要掌握原生AJAX

在如今各种前端框架大行其道的时代，很多新人可能会疑惑：为什么还要学习原生的AJAX技术？jQuery的$.ajax()、axios、fetch这些现成的方案不是更简单吗？作为一个从IE6时代就开始写前端的老兵，我必须告诉你，理解原生AJAX的工作原理是每个前端开发者必须打好的基础。

原生AJAX就像汽车的发动机，而各种封装库则是自动变速箱。当你只会开自动挡时，遇到变速箱故障就束手无策了。同样，当你只懂用axios而不知其底层原理时：

• 遇到跨域问题无法深度排查
• 无法理解为什么某些配置会失效
• 对网络请求的性能优化无从下手
• 调试复杂场景时缺乏底层抓手

XMLHttpRequest（XHR）是现代Web异步通信的基石，即使是fetch API也是基于类似的理念设计的。根据2023年Web Almanac的数据，全球仍有12.3%的网站直接使用XHR，而所有使用AJAX的网站中，有87%会在某些场景下需要直接操作XHR对象。

2. 原生AJAX基础入门

2.1 创建XHR对象

让我们从最基础的创建XHR对象开始。现代浏览器都支持XMLHttpRequest构造函数：

javascript复制const xhr = new XMLHttpRequest();

注意：在IE6/7等老式浏览器中需要使用ActiveXObject，但现在可以放心忽略这些兼容性问题。

2.2 配置请求参数

创建对象后，我们需要配置请求方法和URL：

javascript复制xhr.open('GET', 'https://api.example.com/data', true);

第三个参数true表示异步请求（推荐），设为false会变成同步请求，这会阻塞页面交互。

2.3 设置请求头

如果需要设置自定义头部，应该在open之后、send之前：

javascript复制xhr.setRequestHeader('Content-Type', 'application/json');
xhr.setRequestHeader('Authorization', 'Bearer token123');

常见坑点：某些头部字段（如Referer、Host等）是浏览器限制设置的，尝试设置这些字段会静默失败。

2.4 发送请求

发送请求的代码很简单：

javascript复制xhr.send();

对于POST请求，可以发送数据：

javascript复制xhr.send(JSON.stringify({ key: 'value' }));

3. 处理响应数据

3.1 基本响应处理

我们需要监听readystatechange事件来处理响应：

javascript复制xhr.onreadystatechange = function() {
  if (xhr.readyState === 4) { // 请求完成
    if (xhr.status === 200) {
      console.log(xhr.responseText);
    } else {
      console.error('请求失败:', xhr.status);
    }
  }
};

readyState的各个状态：

• 0: 未初始化（未调用open）
• 1: 已打开（已调用open）
• 2: 已发送（已调用send）
• 3: 接收中（正在接收响应）
• 4: 完成（响应接收完毕）

3.2 处理不同响应类型

XHR可以处理多种响应类型：

javascript复制xhr.responseType = 'json'; // 自动解析JSON
// 其他可选值：'text'（默认）、'arraybuffer'、'blob'、'document'

设置后可以通过xhr.response获取已解析的数据：

javascript复制if (xhr.readyState === 4 && xhr.status === 200) {
  const data = xhr.response; // 已经是JavaScript对象
}

4. 常见问题与解决方案

4.1 跨域问题

当请求不同源的URL时会遇到CORS限制。解决方案：

1. 后端设置正确的CORS头部：

   http复制Access-Control-Allow-Origin: *
   Access-Control-Allow-Methods: GET, POST
   Access-Control-Allow-Headers: Content-Type
   

2. 对于简单请求（GET/HEAD/POST且Content-Type为text/plain、application/x-www-form-urlencoded、multipart/form-data），浏览器会直接发送请求

3. 对于非简单请求，浏览器会先发送OPTIONS预检请求

实测经验：开发环境下可以配置代理服务器绕过CORS，但生产环境必须正确配置CORS。

4.2 超时处理

为避免请求长时间挂起，应该设置超时：

javascript复制xhr.timeout = 5000; // 5秒超时
xhr.ontimeout = function() {
  console.error('请求超时');
};

4.3 取消请求

有时用户操作变化需要取消正在进行的请求：

javascript复制xhr.abort(); // 取消请求
xhr.onabort = function() {
  console.log('请求已取消');
};

5. 性能优化技巧

5.1 请求缓存

对于不常变的数据，可以利用浏览器缓存：

javascript复制xhr.open('GET', 'https://api.example.com/data?v=' + Date.now(), true);

通过添加时间戳参数避免浏览器过度缓存。

5.2 批量请求

减少请求次数可以显著提升性能：

javascript复制// 不好的做法
for (let i = 0; i < 10; i++) {
  fetch(`/item/${i}`);
}

// 好的做法
fetch('/batch-items', {
  method: 'POST',
  body: JSON.stringify({ ids: [0,1,2,3,4,5,6,7,8,9] })
});

5.3 节流与防抖

对于频繁触发的事件（如滚动、输入），应该使用防抖：

javascript复制function debounce(fn, delay) {
  let timer;
  return function() {
    clearTimeout(timer);
    timer = setTimeout(() => fn.apply(this, arguments), delay);
  };
}

const searchInput = document.getElementById('search');
searchInput.addEventListener('input', debounce(function() {
  // 发送AJAX请求
}, 300));

6. 现代替代方案比较

虽然原生XHR很重要，但了解现代替代方案也很有必要：

7. 实战案例：封装可复用的AJAX工具函数

最后，让我们封装一个实用的AJAX工具函数：

javascript复制function ajax(options) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    
    xhr.open(options.method || 'GET', options.url, true);
    
    if (options.headers) {
      for (const [key, value] of Object.entries(options.headers)) {
        xhr.setRequestHeader(key, value);
      }
    }
    
    if (options.timeout) {
      xhr.timeout = options.timeout;
      xhr.ontimeout = () => reject(new Error('请求超时'));
    }
    
    xhr.onreadystatechange = function() {
      if (xhr.readyState === 4) {
        if (xhr.status >= 200 && xhr.status < 300) {
          try {
            const response = options.responseType 
              ? xhr.response 
              : JSON.parse(xhr.responseText);
            resolve(response);
          } catch (e) {
            reject(e);
          }
        } else {
          reject(new Error(`请求失败: ${xhr.status}`));
        }
      }
    };
    
    xhr.onerror = () => reject(new Error('网络错误'));
    
    if (options.data) {
      xhr.send(JSON.stringify(options.data));
    } else {
      xhr.send();
    }
  });
}

// 使用示例
ajax({
  url: 'https://api.example.com/data',
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer token123'
  },
  data: { key: 'value' },
  timeout: 5000
})
.then(data => console.log(data))
.catch(err => console.error(err));

这个封装解决了原生XHR的几个痛点：

1. 使用Promise而不是回调
2. 自动JSON解析
3. 统一的错误处理
4. 可配置的超时
5. 简化的头部设置

8. 调试技巧与工具

8.1 Chrome开发者工具

在Network面板中：

• 查看请求/响应头
• 检查请求时间线
• 复制为cURL命令
• 模拟慢速网络

8.2 控制台调试

可以直接在控制台操作XHR对象：

javascript复制const xhr = new XMLHttpRequest();
xhr.open('GET', '/api/data');
xhr.onload = () => console.log(xhr.response);
xhr.send();

8.3 请求重放

在Network面板右键点击请求，选择"Replay XHR"可以快速重放请求，方便调试。

9. 安全最佳实践

1. CSRF防护：对于修改数据的请求，应该：

   • 使用POST/PUT/DELETE而不是GET
   • 添加CSRF令牌
   • 设置SameSite cookie属性

2. 敏感数据：

   • 不要在URL中传递敏感信息
   • 使用HTTPS加密传输
   • 设置适当的CORS策略

3. 输入验证：

   • 永远不要信任客户端数据
   • 后端必须验证所有输入
   • 对输出进行编码防止XSS

10. 从XHR到fetch的平滑过渡

当你掌握了XHR后，迁移到fetch API会非常容易。主要区别在于：

• fetch返回Promise
• 需要手动处理响应体的解析
• 错误处理方式不同（fetch只在网络错误时reject）

等效的fetch示例：

javascript复制fetch('https://api.example.com/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer token123'
  },
  body: JSON.stringify({ key: 'value' })
})
.then(response => {
  if (!response.ok) throw new Error('请求失败');
  return response.json();
})
.then(data => console.log(data))
.catch(err => console.error(err));

理解XHR能让你更深入地理解fetch的工作原理，当遇到fetch的奇怪行为时，能够从底层原理分析问题。