jQuery AJAX、Axios与Fetch

前端熊猫2025-04-26 16:42

jQuery AJAX、Axios与Fetch对比

Web请求技术对比 jQuery AJAX Axios Fetch API 基于XHR\n兼容性好\n需引入jQuery 基于Promise\n功能丰富\n第三方库 浏览器原生API\n语法现代\n功能较简单

⭐ 三者特点详解

1️⃣ jQuery AJAX

javascript 复制代码 
// jQuery AJAX请求示例
$.ajax({
  url: '/api/users',
  method: 'GET',
  dataType: 'json',
  success: function(data) {
    console.log('成功:', data);
  },
  error: function(xhr, status, error) {
    console.error('错误:', error);
  }
});

核心特点：

  • ✅ 兼容性极佳，支持IE6+等老旧浏览器
  • ✅ 语法简洁，配置灵活
  • ✅ 丰富的事件处理（success, error, complete等）
  • ❌ 需要引入整个jQuery库（体积大）
  • ❌ 基于回调，不支持Promise（旧版本）
  • ❌ 现代项目中逐渐被淘汰

2️⃣ Axios

javascript 复制代码 
// Axios请求示例
axios.get('/api/users')
  .then(response => {
    console.log('成功:', response.data);
  })
  .catch(error => {
    console.error('错误:', error);
  });

// 使用async/await
async function getUsers() {
  try {
    const response = await axios.get('/api/users');
    console.log('成功:', response.data);
  } catch (error) {
    console.error('错误:', error);
  }
}

核心特点：

  • ✅ 基于Promise，支持async/await
  • ✅ 自动转换JSON数据
  • ✅ 强大的拦截器功能（请求和响应）
  • ✅ 客户端防止XSRF
  • ✅ 支持请求取消
  • ✅ 支持并发请求
  • ✅ 浏览器和Node.js环境都可使用
  • ❌ 需要额外引入第三方库

3️⃣ Fetch API

javascript 复制代码 
// Fetch API请求示例
fetch('/api/users')
  .then(response => {
    if (!response.ok) {
      throw new Error('网络响应错误');
    }
    return response.json();
  })
  .then(data => {
    console.log('成功:', data);
  })
  .catch(error => {
    console.error('错误:', error);
  });

// 使用async/await
async function getUsers() {
  try {
    const response = await fetch('/api/users');
    if (!response.ok) {
      throw new Error('网络响应错误');
    }
    const data = await response.json();
    console.log('成功:', data);
  } catch (error) {
    console.error('错误:', error);
  }
}

核心特点：

  • ✅ 浏览器原生支持，无需引入额外库
  • ✅ 基于Promise，支持async/await
  • ✅ 语法现代简洁
  • ✅ 支持请求流和响应流
  • ❌ 需手动处理错误状态码（只有网络错误才会reject）
  • ❌ 默认不带cookies（需配置credentials）
  • ❌ 不支持请求取消（需配合AbortController）
  • ❌ 不支持请求进度监控
  • ❌ 旧浏览器兼容性问题（IE完全不支持）

🔄 技术实现原理

Web请求实现原理 jQuery AJAX
基于XMLHttpRequest Axios
浏览器: XMLHttpRequest
Node.js: http模块 Fetch API
基于现代网络请求API XHR步骤 1. 创建XHR对象 2. 配置请求 3. 监听状态变化 4. 发送请求

jQuery AJAX原理

javascript 复制代码 
// 简化版jQuery AJAX原理实现
function ajax(options) {
  // 创建XHR对象
  const xhr = new XMLHttpRequest();
  
  // 配置请求
  xhr.open(options.method || 'GET', options.url, true);
  
  // 设置请求头
  if (options.headers) {
    Object.keys(options.headers).forEach(key => {
      xhr.setRequestHeader(key, options.headers[key]);
    });
  }
  
  // 监听状态变化
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4) {
      if (xhr.status >= 200 && xhr.status < 300) {
        let data = xhr.responseText;
        if (options.dataType === 'json') {
          try {
            data = JSON.parse(data);
          } catch (e) {
            options.error && options.error(xhr, 'parsererror', e);
            return;
          }
        }
        options.success && options.success(data);
      } else {
        options.error && options.error(xhr, xhr.statusText);
      }
      options.complete && options.complete(xhr, xhr.statusText);
    }
  };
  
  // 发送请求
  xhr.send(options.data || null);
}

Axios原理

javascript 复制代码 
// 简化版Axios原理实现
function axios(config) {
  return new Promise((resolve, reject) => {
    // 创建XHR对象
    const xhr = new XMLHttpRequest();
    
    // 应用请求拦截器
    config = applyRequestInterceptors(config);
    
    // 配置请求
    xhr.open(config.method || 'GET', config.url, true);
    
    // 设置请求头
    if (config.headers) {
      Object.keys(config.headers).forEach(key => {
        xhr.setRequestHeader(key, config.headers[key]);
      });
    }
    
    // 监听完成
    xhr.onload = function() {
      // 构建响应对象
      const response = {
        data: JSON.parse(xhr.responseText),
        status: xhr.status,
        statusText: xhr.statusText,
        headers: parseHeaders(xhr.getAllResponseHeaders()),
        config: config,
        request: xhr
      };
      
      // 应用响应拦截器
      applyResponseInterceptors(response)
        .then(resolve)
        .catch(reject);
    };
    
    // 监听错误
    xhr.onerror = function() {
      reject(new Error('Network Error'));
    };
    
    // 超时处理
    if (config.timeout) {
      xhr.timeout = config.timeout;
    }
    
    // 发送请求
    xhr.send(config.data || null);
    
    // 支持取消请求
    if (config.cancelToken) {
      config.cancelToken.promise.then(reason => {
        xhr.abort();
        reject(reason);
      });
    }
  });
}

Fetch API原理

javascript 复制代码 
// Fetch API是浏览器原生实现的，这是功能示例而非原理
function simplifiedFetch(url, options = {}) {
  return new Promise((resolve, reject) => {
    // Fetch API内部实现包含以下步骤:
    // 1. 创建和配置Request对象
    // 2. 执行网络请求
    // 3. 收到响应后创建Response对象
    // 4. 根据网络状态resolve或reject promise
    
    // 浏览器原生实现，不需要XMLHttpRequest
    // 使用更现代的网络API和流处理
  });
}

📊 三者功能对比表

功能/特性 jQuery AJAX Axios Fetch API
基础实现 XMLHttpRequest XMLHttpRequest 现代网络API
Promise支持 ❌(旧)✅(新) ✅ ✅
请求/响应拦截 ❌ ✅ ❌
自动JSON转换 可配置 ✅ 需手动
取消请求 有限支持 ✅ 需AbortController
超时设置 ✅ ✅ ❌(需自行实现)
浏览器兼容性 ⭐⭐⭐⭐⭐ ⭐⭐⭐⭐ ⭐⭐⭐
体积大小 大(需jQuery) 中等 零(原生)
错误处理 回调处理 自动 需手动检查status
并发请求 $.when axios.all Promise.all
使用难度 简单 中等 中等

🎯 实际项目选型指南

是 否 是 否 是 否 是 是 如何选择HTTP请求技术 是否需要支持旧浏览器? 考虑jQuery AJAX 是否需要丰富功能? 选择Axios 是否追求轻量级? 使用Fetch API 是否已使用jQuery? 是否为Node.js项目?

选型决策因素

  1. 项目类型与环境

    • 传统网站有IE兼容性需求 → jQuery AJAX
    • 现代SPA应用 → Axios或Fetch
    • 同时支持浏览器和Node.js → Axios
    • 轻量级项目或原型开发 → Fetch

  2. 技术栈考虑

    • 项目已使用jQuery → jQuery AJAX
    • React/Vue项目 → Axios(生态好)或Fetch
    • 无框架纯JS项目 → Fetch或简化版Axios

  3. 功能需求

    • 需要拦截器、请求转换等高级功能 → Axios
    • 只需基础请求功能 → Fetch
    • 需要丰富的事件处理 → jQuery AJAX或Axios

  4. 团队因素

    • 团队熟悉程度
    • 已有代码迁移成本
    • 长期维护考虑

💡 实际应用案例

企业级应用推荐选择

javascript 复制代码 
// 使用Axios创建定制HTTP客户端
import axios from 'axios';

// 创建自定义实例
const apiClient = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 10000,
  headers: {
    'Content-Type': 'application/json',
    'X-Requested-With': 'XMLHttpRequest'
  }
});

// 请求拦截器（添加认证信息）
apiClient.interceptors.request.use(config => {
  const token = localStorage.getItem('token');
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
}, error => {
  return Promise.reject(error);
});

// 响应拦截器（处理常见错误）
apiClient.interceptors.response.use(response => {
  return response.data; // 直接返回数据部分
}, error => {
  if (error.response) {
    // 处理HTTP错误状态
    if (error.response.status === 401) {
      // 未授权，跳转登录
      router.push('/login');
    } else if (error.response.status === 403) {
      // 权限不足
      notification.error('没有权限执行此操作');
    }
  } else if (error.request) {
    // 请求发出但无响应
    notification.error('服务器无响应，请稍后再试');
  } else {
    // 请求配置错误
    notification.error('请求配置错误');
  }
  return Promise.reject(error);
});

export default apiClient;

📚 总结

  • jQuery AJAX: 历史悠久，兼容性好，基于XHR实现，回调风格API，适合需要兼容旧浏览器和已使用jQuery的项目

  • Axios: 功能全面，基于Promise，支持拦截器和请求取消，适合中大型现代Web应用，同时支持浏览器和Node.js环境

  • Fetch API: 浏览器原生支持，语法现代，基于Promise，无需引入额外库，但功能较简单，需要额外处理错误状态码

实际选型建议：现代Web项目首选Axios，它在功能丰富性和易用性之间达到了良好平衡。如果追求轻量级且不需要复杂功能，可以考虑Fetch API。只有在需要支持旧浏览器或项目已深度依赖jQuery的情况下，才考虑jQuery AJAX。

相关推荐
北上ing7 小时前
同一页面下动态加载内容的两种方式：AJAX与iframe
前端·javascript·ajax
Jet_closer_burning12 小时前
axios封装
前端·javascript·vue.js·react.js·ajax
程序员沉梦听雨2 天前
OkHttp入门
okhttp
隐-梵2 天前
Android studio进阶开发（四）--okhttp的网络通信的使用
android·ide·okhttp·android studio
知识分享小能手2 天前
JavaScript学习教程，从入门到精通，XMLHttpRequest 与 Ajax 请求详解（25）
开发语言·javascript·学习·ajax·前端框架·css3·html5
知识分享小能手2 天前
JavaScript学习教程，从入门到精通，Ajax与Node.js Web服务器开发全面指南（24）
开发语言·前端·javascript·学习·ajax·node.js·html5
星之卡比*2 天前
前端面试题---GET跟POST的区别(Ajax)
前端·ajax·okhttp
Komorebi_99992 天前
Axios 是一个基于 Promise 的 HTTP 客户端，可用于浏览器和 Node.js 环境。以下是它的一些主要作用
javascript·ajax
MrsBaek3 天前
前端笔记-AJAX
前端·笔记·ajax
热门推荐
01KGG转MP3工具|非KGM文件|解密音频02从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑03我决定放弃搞 Java 了04Coze扣子平台完整体验和实践（附国内和国际版对比）05YOLOv8入门 | 重要性能衡量指标、训练结果评价及分析及影响mAP的因素【发论文关注的指标】06DeepSeek各版本说明与优缺点分析07YOLOv5改进 | 添加CA注意力机制 + 增加预测层 + 更换损失函数之GIoU08苍穹外卖面试总结09yolov8，yolo11，yolo12 服务器训练到部署全流程 笔记10yolov8实战第五天——yolov8+ffmpg实时视频流检测并进行实时推流——（推流，保姆教学）