前端开发|异步请求 原生js实现ajax功能详解—js原生ajax代码解析

前端开发 | 异步请求 | 原生JS实现AJAX功能详解—JS原生AJAX代码解析 🚀

📌 一、AJAX核心原理速览

AJAX（Asynchronous JavaScript and XML）本质是浏览器与服务器之间的局部更新技术，通过以下四步实现：

1. 创建通信对象：使用XMLHttpRequest或Fetch API。
2. 配置请求参数：设置URL、方法（GET/POST）、请求头。
3. 发送数据并等待响应：异步请求，无需刷新页面。
4. 动态更新DOM内容：根据服务器返回的数据更新页面。

🔥 二、传统战士：XMLHttpRequest实战

🧩 步骤1：创建对象（兼容IE6+）

const xhr = window.XMLHttpRequest ? 
  new XMLHttpRequest() : 
  new ActiveXObject("Microsoft.XMLHTTP");

🎯 步骤2：配置并发送请求

xhr.open('GET', 'https://api.example.com/data', true); // 异步请求
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4) { // 4代表请求完成
    if (xhr.status === 200) {
      console.log('成功:', xhr.responseText);
    } else {
      console.error('错误:', xhr.statusText);
    }
  }
};
xhr.send(JSON.stringify({id: 123})); // POST请求需传参

⚠️ 关键注意点

• 同步请求已废弃：第三个参数必须设为true。
• 处理中文乱码：xhr.overrideMimeType('text/plain; charset=UTF-8')。
• 大文件上传：建议用FormData对象。

✨ 三、现代神器：Fetch API详解

🚀 步骤1：基础GET请求

fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) throw new Error('请求失败');
    return response.json();
  })
  .then(data => console.log('数据:', data))
  .catch(err => console.error('捕获异常:', err));

💡 步骤2：POST请求 + Async/Await

async function postData() {
  try {
    const res = await fetch('https://api.example.com/post', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ title: '原生JS' })
    });
    const data = await res.json();
    console.log('服务器返回:', data);
  } catch (err) {
    console.error('请求中断:', err);
  }
}

🎁 Fetch进阶技巧

• 自动解析JSON：const data = await response.json();
• 文件上传：body: new FormData(document.querySelector('form'))
• 超时控制：

  const timeoutId = setTimeout(() => { fetchAbort.abort(); }, 5000);
  const fetchAbort = new AbortController();

🆚 四、XMLHttpRequest vs Fetch API

🛠 五、2025年最佳实践

智能重试机制

async function fetchWithRetry(url, retries = 3) {
  try {
    const response = await fetch(url);
    if (!response.ok) throw new Error('HTTP错误');
    return response.json();
  } catch (err) {
    if (retries > 0) {
      await new Promise(res => setTimeout(res, 1000));
      return fetchWithRetry(url, retries - 1);
    }
    throw err;
  }
}

数据压缩传输

// 客户端发送时压缩
const encoder = new TextEncoder();
const data = encoder.encode(JSON.stringify(largeData));
fetch(url, {
  body: data,
  headers: { 'Content-Encoding': 'gzip' }
});
// 服务端需配合解压

安全传输配置

fetch(url, {
  credentials: 'include', // 携带Cookie
  headers: {
    'X-CSRF-Token': csrfToken,
    'Content-Security-Policy': 'default-src 'self''
  }
});

🎯 六、实战案例：评论区无刷新更新

<div id="comments"></div>
<button onclick="loadComments()">加载评论</button>
<script>
async function loadComments() {
  const container = document.getElementById('comments');
  try {
    const res = await fetch('/api/comments');
    const comments = await res.json();
    container.innerHTML = '';
    comments.forEach(comment => {
      const div = document.createElement('div');
      div.textContent = `${comment.user}: ${comment.content}`;
      container.appendChild(div);
    });
  } catch (err) {
    container.innerHTML = '<p style="color:red">加载失败</p>';
  }
}
</script>

📚 七、学习资源推荐

• MDN官方文档：Fetch API
• 性能优化：WebTransport协议
• 调试工具：Chrome DevTools的Network面板（Ctrl+Shift+E）

💬 八、常见问题QA

Q1：Fetch请求404/500错误不触发catch？
A：Fetch默认只捕获网络错误，需手动检查response.ok。

Q2：如何处理AJAX跨域问题？
A：服务端需配置CORS头，如Access-Control-Allow-Origin: *。

Q3：XMLHttpRequest与Fetch如何选择？
A：追求现代语法和简洁性选Fetch；需兼容旧版浏览器或需要更精细控制选XMLHttpRequest。 您可以全面掌握原生JS实现AJAX的方法，并结合2025年的最新实践进行开发！ 🚀