前端开发 数据交互 原生ajax实现方式—使用原生js编写ajax请求

前端开发 | 数据交互 | 原生AJAX实现方式——使用原生JS编写AJAX请求

2025年8月最新动态：尽管现在各种前端框架和库（如React、Vue、Axios等）大行其道，但根据2025年第二季度的开发者调查报告显示，仍有超过35%的企业级项目在某些场景下会直接使用原生AJAX进行数据交互，特别是在需要极致性能优化或与老旧系统集成的场景中。

AJAX是什么？为什么还要学原生实现？

AJAX全称"Asynchronous JavaScript and XML"（异步JavaScript和XML），虽然名字里有XML，但现在我们主要用JSON格式，简单说，就是不用刷新整个页面，就能和服务器"偷偷"交换数据的技术。

现在虽然各种框架帮我们封装好了AJAX,但了解原生实现方式依然很重要：

1. 面试常考（你懂的）
2. 遇到问题时能更快定位
3. 当不能使用第三方库时（比如某些特殊环境）
4. 真正理解底层原理

手把手实现原生AJAX请求

最基础的GET请求

// 1. 创建XMLHttpRequest对象
const xhr = new XMLHttpRequest();
// 2. 配置请求
xhr.open('GET', 'https://api.example.com/data', true); // true表示异步
// 3. 设置回调函数
xhr.onload = function() {
  if (xhr.status >= 200 && xhr.status < 300) {
    console.log('成功获取数据:', xhr.responseText);
  } else {
    console.error('请求出错:', xhr.statusText);
  }
};
xhr.onerror = function() {
  console.error('请求失败');
};
// 4. 发送请求
xhr.send();

发送POST请求（带数据）

const xhr = new XMLHttpRequest();
xhr.open('POST', 'https://api.example.com/submit', true);
// 设置请求头（重要！）
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onload = function() {
  // 处理响应...
};
const data = {
  username: '张三',
  age: 25
};
xhr.send(JSON.stringify(data)); // 记得把对象转成JSON字符串

处理超时

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/slow-data', true);
xhr.timeout = 5000; // 设置5秒超时
xhr.ontimeout = function() {
  console.error('请求超时了！');
};
xhr.onload = function() {
  // 正常处理...
};
xhr.send();

实际开发中的技巧

封装成可复用的函数

function ajaxRequest({ method = 'GET', url, data = null, headers = {} }) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open(method, url, true);
    // 设置请求头
    for (const [key, value] of Object.entries(headers)) {
      xhr.setRequestHeader(key, value);
    }
    xhr.onload = () => {
      if (xhr.status >= 200 && xhr.status < 300) {
        try {
          const response = JSON.parse(xhr.responseText);
          resolve(response);
        } catch (e) {
          resolve(xhr.responseText);
        }
      } else {
        reject(new Error(`请求失败: ${xhr.status}`));
      }
    };
    xhr.onerror = () => reject(new Error('网络错误'));
    xhr.ontimeout = () => reject(new Error('请求超时'));
    xhr.send(data ? JSON.stringify(data) : null);
  });
}
// 使用示例
ajaxRequest({
  method: 'POST',
  url: 'https://api.example.com/users',
  data: { name: '李四' },
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer your_token_here'
  }
}).then(data => {
  console.log('成功:', data);
}).catch(err => {
  console.error('出错:', err);
});

处理进度事件（适合大文件上传/下载）

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/large-file', true);
// 下载进度
xhr.onprogress = function(event) {
  if (event.lengthComputable) {
    const percentComplete = (event.loaded / event.total) * 100;
    console.log(`下载进度: ${percentComplete.toFixed(2)}%`);
  }
};
// 上传进度（需要在send之前设置）
xhr.upload.onprogress = function(event) {
  if (event.lengthComputable) {
    const percentComplete = (event.loaded / event.total) * 100;
    console.log(`上传进度: ${percentComplete.toFixed(2)}%`);
  }
};
xhr.onload = function() {
  // 处理完成...
};
xhr.send();

常见坑点及解决方案

1. 跨域问题：

   • 服务器需要设置CORS头（如Access-Control-Allow-Origin）
   • 开发时可以用代理解决

2. 缓存问题：

   // 在URL后加时间戳防止缓存
   xhr.open('GET', `https://api.example.com/data?_=${Date.now()}`, true);

3. Content-Type很重要：

   

   • 发送JSON数据时一定要设置application/json
   • 发送表单数据用application/x-www-form-urlencoded

4. 同步请求已废弃：

   现代浏览器已不推荐使用同步AJAX（open的第三个参数不要设为false）

虽然现在各种框架和库让AJAX使用变得简单,但了解原生实现方式仍然是前端开发者的基本功，掌握了这些知识，你不仅能应对各种特殊场景，还能更好地理解现代框架背后的工作原理。

下次面试官问你"能不用jQuery/Axios发个AJAX请求吗？"的时候，你就可以自信地写出来了！