一、面试场景下的AJAX考察价值

在前端开发岗位面试中，”手写AJAX”是常见的考察形式。这道题目不仅检验候选人对浏览器原生API的掌握程度，更能体现其对网络通信原理、异步编程模式的理解深度。相比直接调用fetch或axios等封装库，原生AJAX实现要求开发者具备更扎实的基础知识，这也是企业筛选高级前端人才的重要指标。

1.1 技术深度考察维度

原生AJAX实现涉及多个技术点：

• XMLHttpRequest对象生命周期管理
• 请求头与响应头处理机制
• 异步回调与状态监听模式
• 跨域请求解决方案（CORS）
• 数据格式转换（JSON/XML/文本）

某知名互联网公司的面试数据显示，能完整实现原生AJAX的候选人，在后续技术面试中的平均得分比仅使用封装库的候选人高出27%。这充分说明基础能力对技术职涯发展的重要性。

二、AJAX核心实现步骤

2.1 创建请求对象

function createXHR() {
  // 兼容性处理
  if (window.XMLHttpRequest) {
    return new XMLHttpRequest(); // 标准浏览器
  } else if (window.ActiveXObject) {
    return new ActiveXObject('Microsoft.XMLHTTP'); // IE6兼容
  }
  throw new Error('浏览器不支持AJAX');
}

现代浏览器已统一支持XMLHttpRequest，但历史代码中仍可能遇到IE兼容场景。实际开发中建议使用new XMLHttpRequest()，但在面试场景下展示兼容性处理能体现技术全面性。

2.2 配置请求参数

const xhr = createXHR();
xhr.open('GET', 'https://api.example.com/data', true); // 方法、URL、异步标志
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.setRequestHeader('Authorization', 'Bearer token123');

关键配置点：

• 请求方法：GET/POST/PUT/DELETE等
• 异步模式：必须设置为true（同步请求已废弃）
• 请求头：需根据API要求设置认证、内容类型等

2.3 状态监听与回调

xhr.onreadystatechange = function() {
  if (xhr.readyState === 4) { // 请求完成
    if (xhr.status >= 200 && xhr.status < 300) {
      const response = JSON.parse(xhr.responseText);
      console.log('成功:', response);
    } else {
      console.error('请求失败:', xhr.statusText);
    }
  }
};

readyState状态值：

• 0: 未初始化
• 1: 打开连接
• 2: 发送请求
• 3: 接收响应
• 4: 完成

2.4 发送请求与错误处理

try {
  xhr.send(JSON.stringify({ key: 'value' })); // POST请求需传入数据
} catch (e) {
  console.error('发送失败:', e);
}

错误处理要点：

• 网络错误（如断网）
• 跨域错误（需配置CORS）
• 业务逻辑错误（通过status判断）

三、进阶实现与优化

3.1 封装AJAX工具函数

function ajax({ method, url, data, headers }) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open(method, url, true);
    // 设置请求头
    Object.keys(headers || {}).forEach(key => {
      xhr.setRequestHeader(key, headers[key]);
    });
    xhr.onload = () => {
      if (xhr.status >= 200 && xhr.status < 300) {
        resolve(xhr.responseText);
      } else {
        reject(new Error(xhr.statusText));
      }
    };
    xhr.onerror = () => reject(new Error('网络错误'));
    xhr.send(data ? JSON.stringify(data) : null);
  });
}

封装优势：

• 统一错误处理
• 支持Promise语法
• 简化重复代码

3.2 跨域请求解决方案

当请求不同源的API时，需处理CORS问题：

1. 服务端配置：设置Access-Control-Allow-Origin等响应头
2. 简单请求：GET/POST+特定Content-Type可直接跨域
3. 预检请求：复杂请求会先发送OPTIONS请求

// 带凭证的跨域请求
xhr.withCredentials = true; // 需服务端配置Access-Control-Allow-Credentials

3.3 性能优化技巧

1. 请求复用：保持单个页面内XHR对象复用
2. 超时设置：

   xhr.timeout = 5000; // 5秒超时
   xhr.ontimeout = () => console.error('请求超时');

3. 数据压缩：服务端启用Gzip压缩响应数据

四、面试常见问题解析

4.1 GET与POST的区别

特性	GET	POST
数据位置	URL查询字符串	请求体
数据长度	受URL长度限制（约2048字符）	无限制
缓存	可被缓存	默认不缓存
安全性	参数暴露在URL中	相对安全

4.2 同步请求的危害

同步AJAX会阻塞页面渲染，导致”假死”现象。现代浏览器已废弃同步模式，面试中应明确反对使用。

4.3 与Fetch API的对比

特性	XMLHttpRequest	Fetch API
语法复杂度	较高	简洁（Promise基础）
进度监控	支持	需额外处理
取消请求	abort()方法	AbortController
兼容性	全浏览器支持	IE不支持

五、实战案例解析

5.1 获取JSON数据

function fetchUser(userId) {
  const xhr = new XMLHttpRequest();
  xhr.open('GET', `https://api.example.com/users/${userId}`);
  xhr.responseType = 'json'; // 直接解析JSON
  xhr.onload = () => {
    if (xhr.status === 200) {
      console.log('用户数据:', xhr.response);
    }
  };
  xhr.send();
}

5.2 提交表单数据

function submitForm(formData) {
  const xhr = new XMLHttpRequest();
  xhr.open('POST', '/api/submit');
  xhr.setRequestHeader('Content-Type', 'application/json');
  xhr.onload = () => {
    const result = JSON.parse(xhr.responseText);
    alert(result.message);
  };
  xhr.send(JSON.stringify(formData));
}

六、总结与建议

1. 基础优先：掌握原生AJAX是学习现代框架（如React/Vue）网络请求的基础
2. 封装思维：将重复代码封装为工具函数，提升开发效率
3. 安全意识：始终处理错误状态和跨域问题
4. 与时俱进：了解Fetch/Axios等新方案，但保持原生能力

建议开发者定期实现原生AJAX，这不仅能加深对HTTP协议的理解，更能在调试复杂网络问题时提供有力支持。根据2023年前端技术趋势报告，78%的高级前端职位仍要求候选人具备扎实的原生AJAX实现能力。