纯JS AJAX调用方法，不使用jQuery如何实现AJAX请求

在原生JavaScript中，虽然jQuery的$.ajax方法极大地简化了异步请求的流程，但现代浏览器已原生支持Fetch API和XMLHttpRequest对象，掌握这些原生技术不仅能减少对第三方库的依赖，提升页面加载速度，还能深入理解HTTP通信机制,是前端开发进阶的必经之路。

原生AJAX的双轨制解决方案

目前实现原生AJAX主要有两种标准方案：基于Promise语法的Fetch API和传统的XMLHttpRequest（XHR），对于新项目，强烈推荐使用Fetch API，因为它基于Promise，代码更简洁且易于维护；对于需要兼容极老版本浏览器或需要处理复杂上传进度的场景，则需使用XMLHttpRequest。

Fetch API：现代前端的首选方案

Fetch API是W3C提出的标准，旨在替代XHR，它返回一个Promise对象，使得异步代码的编写更加直观,避免了传统的回调地狱。

GET请求实现

GET请求通常用于获取数据，使用Fetch时，只需传入URL即可,默认方法为GET。

fetch('/api/data')
  .then(response => {
    // 检查HTTP状态码，Fetch不会在HTTP错误时自动抛出异常
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json(); // 解析JSON数据
  })
  .then(data => {
    console.log('成功获取数据:', data);
  })
  .catch(error => {
    console.error('请求失败:', error);
  });

POST请求实现

POST请求需要配置请求头、方法和主体内容，关键在于设置Content-Type为application/json,并将数据对象序列化为字符串。

fetch('/api/user', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ name: '张三', age: 25 })
})
.then(response => response.json())
.then(data => console.log('用户创建成功:', data))
.catch(error => console.error('错误:', error));

Fetch的优势与局限

• 优势：语法简洁，基于Promise，支持async/await语法,天然支持流式处理。
• 局限：默认不发送Cookie，需要手动配置credentials: 'include'；HTTP错误状态码（如404、500）不会触发reject，需手动检查response.ok。

XMLHttpRequest：经典且强大的底层接口

尽管Fetch更为现代，但XMLHttpRequest（XHR）依然拥有庞大的用户基础，特别是在需要监听上传/下载进度或取消请求的场景中，Fetch目前仍缺乏原生支持（虽然AbortController正在逐步完善这一功能）。

基础GET请求

const xhr = new XMLHttpRequest();
xhr.open('GET', '/api/data', true); // true表示异步
xhr.onload = function() {
  if (xhr.status >= 200 && xhr.status < 300) {
    const data = JSON.parse(xhr.responseText);
    console.log('成功:', data);
  } else {
    console.error('请求失败，状态码:', xhr.status);
  }
};
xhr.onerror = function() {
  console.error('网络错误');
};
xhr.send();

POST请求与数据序列化

const xhr = new XMLHttpRequest();
xhr.open('POST', '/api/user', true);
xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
xhr.onload = function() {
  if (xhr.status === 200) {
    console.log('成功:', JSON.parse(xhr.responseText));
  }
};
xhr.send(JSON.stringify({ name: '李四', age: 30 }));

XHR的独特优势

• 进度监控：通过xhr.upload.onprogress可以精确控制文件上传进度条。
• 兼容性：支持IE6及以上所有版本浏览器。
• 取消请求：通过xhr.abort()可以轻易取消正在进行的请求。

最佳实践与性能优化建议

无论选择哪种方案,遵循以下原则能显著提升用户体验和代码质量：

1. 错误处理机制：不要忽略网络异常，始终使用try...catch（针对async/await）或.catch()来捕获网络错误、JSON解析错误等。
2. 超时控制：原生Fetch和XHR都支持设置超时，对于XHR，使用xhr.timeout属性；对于Fetch，结合AbortController实现超时取消。
3. 数据类型转换：明确区分response.text()、response.json()和response.blob(),避免不必要的数据解析开销。
4. 安全性考虑：确保API接口具备CSRF保护,并在敏感操作中使用HTTPS。

相关问答模块

Q1: Fetch API和XMLHttpRequest的主要区别是什么？ A: Fetch基于Promise，语法更简洁，支持async/await，且性能略优；XHR基于事件驱动，代码较繁琐，但支持进度监听和直接取消请求，Fetch默认不发送Cookie,而XHR默认发送。

Q2: 如何在原生JS中实现请求超时？ A: 使用Fetch时，可以创建AbortController实例，将其signal传递给fetch，并设置定时器在超时后调用controller.abort()，对于XHR，直接设置xhr.timeout = 5000（毫秒）并在ontimeout事件中处理即可。

互动环节

您目前在项目中主要使用哪种方式发起AJAX请求？是倾向于原生的Fetch API，还是为了兼容性继续使用XMLHttpRequest？欢迎在评论区分享您的技术选型理由或遇到的坑,我们将选取优质评论进行解答。