引言：为什么需要手写AJAX？

在前端开发中，AJAX（Asynchronous JavaScript and XML）是实现页面无刷新数据交互的核心技术。尽管现代框架（如React、Vue）提供了更高级的封装，但理解原生AJAX的实现原理仍至关重要。手写AJAX不仅能加深对HTTP协议、事件循环等底层机制的理解，还能在面试中展现对基础技术的掌握程度。本文将从零开始，逐步实现一个完整的AJAX功能，并解析其关键细节。

一、AJAX的核心原理

AJAX的核心是通过XMLHttpRequest对象（或现代浏览器中的fetch API）实现与服务器的异步通信。其工作流程可分为以下步骤：

1. 创建请求对象：实例化XMLHttpRequest对象。
2. 配置请求：设置请求方法（GET/POST）、URL、请求头等。
3. 发送请求：调用send()方法发起请求。
4. 监听响应：通过onreadystatechange或onload事件处理响应数据。
5. 解析数据：将服务器返回的数据（如JSON、XML）转换为JavaScript对象。

1.1 传统方式：XMLHttpRequest

XMLHttpRequest是早期AJAX的标准实现，尽管现代开发中逐渐被fetch取代，但其原理仍是理解AJAX的基础。

1.2 现代方式：fetch API

fetch是ES6引入的Promise-based API，语法更简洁，但需注意其默认不处理错误状态码（如404、500）。

二、手写AJAX代码实现

2.1 基于XMLHttpRequest的实现

function customAjax(options) {
  // 1. 参数校验与默认值设置
  const {
    url,
    method = 'GET',
    data = null,
    headers = {},
    success,
    error,
    async = true
  } = options;
  // 2. 创建XMLHttpRequest对象
  const xhr = new XMLHttpRequest();
  // 3. 配置请求
  xhr.open(method, url, async);
  // 4. 设置请求头（需在open后调用）
  Object.keys(headers).forEach(key => {
    xhr.setRequestHeader(key, headers[key]);
  });
  // 5. 监听状态变化
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4) { // 请求完成
      if (xhr.status >= 200 && xhr.status < 300) {
        try {
          // 尝试解析JSON响应
          const response = xhr.responseText ? 
            JSON.parse(xhr.responseText) : null;
          success && success(response);
        } catch (e) {
          error && error(e);
        }
      } else {
        error && error(new Error(`Request failed with status ${xhr.status}`));
      }
    }
  };
  // 6. 发送请求
  xhr.send(data ? JSON.stringify(data) : null);
}

使用示例：

customAjax({
  url: 'https://api.example.com/data',
  method: 'POST',
  data: { key: 'value' },
  headers: { 'Content-Type': 'application/json' },
  success: (data) => console.log('Success:', data),
  error: (err) => console.error('Error:', err)
});

2.2 基于fetch API的实现

function fetchAjax(options) {
  const {
    url,
    method = 'GET',
    body = null,
    headers = {},
    success,
    error
  } = options;
  fetch(url, {
    method,
    headers: {
      'Content-Type': 'application/json',
      ...headers
    },
    body: body ? JSON.stringify(body) : null
  })
  .then(response => {
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    return response.json();
  })
  .then(data => success && success(data))
  .catch(err => error && error(err));
}

使用示例：

fetchAjax({
  url: 'https://api.example.com/data',
  method: 'POST',
  body: { key: 'value' },
  success: (data) => console.log('Success:', data),
  error: (err) => console.error('Error:', err)
});

三、关键细节解析

3.1 请求头设置

• Content-Type：指定请求体的数据类型（如application/json）。
• Accept：指定服务器返回的数据类型（如application/json）。
• Authorization：用于身份验证（如Bearer Token）。

3.2 错误处理

• XMLHttpRequest：需同时检查readyState和status。
• fetch API：需手动处理HTTP错误状态码（通过response.ok）。

3.3 异步与同步

• 现代开发中应始终使用异步请求（async=true），避免阻塞主线程。
• 同步请求（async=false）已废弃，可能导致性能问题。

3.4 跨域问题

• 浏览器安全策略会阻止跨域请求，需通过CORS（跨域资源共享）解决。
• 服务器需设置响应头：Access-Control-Allow-Origin: *。

四、实际应用场景

4.1 表单提交

document.querySelector('form').addEventListener('submit', async (e) => {
  e.preventDefault();
  const formData = new FormData(e.target);
  const data = Object.fromEntries(formData.entries());
  try {
    const response = await fetchAjax({
      url: '/api/submit',
      method: 'POST',
      body: data
    });
    alert('提交成功！');
  } catch (err) {
    alert('提交失败：' + err.message);
  }
});

4.2 动态数据加载

document.getElementById('load-data').addEventListener('click', () => {
  customAjax({
    url: '/api/data',
    success: (data) => {
      const html = data.map(item => `<div>${item.name}</div>`).join('');
      document.getElementById('result').innerHTML = html;
    }
  });
});

五、优化与扩展

5.1 封装为Promise

function promiseAjax(options) {
  return new Promise((resolve, reject) => {
    customAjax({
      ...options,
      success: resolve,
      error: reject
    });
  });
}
// 使用示例
promiseAjax({ url: '/api/data' })
  .then(data => console.log(data))
  .catch(err => console.error(err));

5.2 添加取消功能

function cancellableAjax(options) {
  const xhr = new XMLHttpRequest();
  const abort = () => xhr.abort();
  xhr.open(options.method, options.url);
  xhr.onload = () => options.success && options.success(JSON.parse(xhr.responseText));
  xhr.onerror = () => options.error && options.error(new Error('Request aborted'));
  xhr.send(options.data ? JSON.stringify(options.data) : null);
  return { abort };
}
// 使用示例
const { abort } = cancellableAjax({
  url: '/api/data',
  success: (data) => console.log(data)
});
// 取消请求
setTimeout(() => abort(), 1000);

六、总结与建议

1. 理解原理：手写AJAX的核心是掌握XMLHttpRequest或fetch的工作流程。
2. 错误处理：始终处理网络错误和HTTP错误状态码。
3. 封装与复用：将AJAX逻辑封装为可复用的函数或类。
4. 现代替代方案：在项目中可考虑使用axios等更强大的库，但需理解其底层实现。

通过手写AJAX，开发者不仅能提升对前端基础技术的掌握，还能在面试中展现对异步编程、HTTP协议等核心概念的理解。建议在实际项目中逐步实现并优化自己的AJAX工具库，以加深记忆。