ajax fetch axios xhr 一次性了解清楚

最新推荐文章于 2025-06-19 20:34:59 发布
原创 最新推荐文章于 2025-06-19 20:34:59 发布 · 374 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#ajax #xmlhttprequest

本文深入解析了AJAX、fetch、axios和XMLHttpRequest（xhr）这四个网络请求技术的关系与特性，包括AJAX的异步刷新、XMLHttpRequest的广泛应用、fetch的现代语法与兼容问题，以及Axios的Promise封装和高级功能。

目录

ajax fetch axios xhr 一次性了结清楚:

一、ajax fetch axios xhr关系图：

 二、他们各自的概念:

1.Ajax（原生自带）

2.XMLHttpRequest（原生自带）

3.fetch（原生自带）

4.Axios（二次封装） 

ajax fetch axios xhr 一次性了解清楚:

一直以来，对fetch ajax axios xhr 之间的关系和概念很模糊，今天忍不了坐下来好好的盘盘他们。

一、ajax fetch axios xhr关系图：

先总的看看他们之间的关系：如下图

 二、他们各自的概念:

1.Ajax（原生自带）

英文全称为 Asynchronous JavaScript + XML ，翻译过来就是异步JavaScript和XML

AJAX  它是用来描述一种使用现有技术集合的“新”方法的: HTML 或 XHTML、CSS、 JavaScript、DOM、XML、XSLT， XMLHttpRequest。通过这些技术结合成ajax

最重要的特性：最重要的特性就是可以局部刷新页面

2.XMLHttpRequest（原生自带）

对象用于在后台与服务器交换数据。（兼容性好）

特性：

  • 在不重新加载页面的情况下更新网页
  • 在页面已加载后从服务器请求数据
  • 在页面已加载后从服务器接收数据
  • 在后台向服务器发送数据

3.fetch（原生自带）

用来做网络请求（旧浏览器兼容性差，支持IE的话，使用polyfill库）

特性：

  • fetch使用了Promise，支持回调

缺点：

  • 兼容性差
  • 无法监控读取进度和中断请求

4.Axios（二次封装） 

Axios 是一个XMLHttpRequests 基于 Promise 网络请求库，作用于 Node.js 和浏览器中。

node.js中使用原生 Node.js http 模块

浏览器中使用XMLHttpRequest

 主要特性：

  • 从浏览器创建 XMLHttpRequests
  • 支持 Promise API
  • 拦截请求和响应
  • 转换请求和响应数据
  • 取消请求
  • 自动转换JSON数据
  • 客户端支持防御XSRF

fetch与XHR（ajax，axios）的区别与优势
坚信万物皆可切的切图仔
09-03 1806
前言： 在Fetch出现之前我们发送异步请求默认都是通过ajax，底层使用了宿主环境的（XHR）XMLHTTPRequest 对象来实现异步请求，包括axios也是使用xhr技术实现的，只是语法基于promise，解决了回调地狱的问题。实现代码如下： var xhr = new XMLHttpRequest(); xhr.open("get","example.php", true); xhr.send(null); xhr.onreadystatechange = function(){ if(x
xhr、ajax、axois、fetch的区别
yiguoxiaohai的博客
09-04 3402
XMLHttpRequest (XHR)、AJAX、Axios 和 Fetch API 都是用于在不重新加载整个页面的情况下与服务器进行通信的技术和库。它们在处理超时、终止请求、进度反馈等机制上有一些显著的差异。以下是它们的详细比较：
【网络基础】简单梳理XHR、ajax、axios与fetch之间的关系
庞囧的博客
07-25 1356
文章目录前言关系axios基础写法Fetch基础写法 前言 非使用教学，只是给会用这三者的人留个关系印象。 关系 首先要知道，这些异步请求方法之间的关系是怎么样的： 浏览器环境中其实有两个和ajax有关的对象，一个是XHR一个是Fetch，其中JQ的ajax部分和axios的实现都是源于XHR的封装，而Fetch是与XHR同级别的后出的ajax方法。 axios基础写法 来个get请求看看个大概： axios.get('url').then( response => { // 请求成功
AJAX和XHR和Axios和Fetch
hangao233的博客
01-28 1823
AJAX (整理于博学谷) 1. 常识性知识 1.1 网页中如何请求数据 如果要在网页中请求服务器上的数据资源，则需要用到 XMLHttpRequest 对象。 XMLHttpRequest（简称 xhr）是浏览器提供的 js 成员，通过它，可以请求服务器上的数据资源。 最简单的用法： var xhrObj = new XMLHttpRequest() 1.2 资源的请求方式 客户端请求服务器时，请求的方式有很多种，最常见的两种请求方式分别为 get 和 post 请求。 get 请求通常用于获取服务
ajax和axios区别及优缺点
Senora的博客
12-29 3万+
ajax和axios介绍、原理、区别及优缺点
细谈 axios和ajax区别
热门推荐
小白的博客
03-11 16万+
刚刚接触axios有好多疑惑。它和ajax有什么关系呢和区别呢？接下来一起看下： 1.区别 axios是通过promise实现对ajax技术的一种封装，就像jQuery实现ajax封装一样。 简单来说： ajax技术实现了网页的局部数据刷新，axios实现了对ajax的封装。 axios是ajax ajax不止axios。 下面列出代码来对比一下： axios： axios({ ...
Ajax和Axios之间的关系
weixin_42209881的博客
11-29 3221
Ajax即Asynchronous Javascript And XML（异步JavaScript和XML），是基于JQuery封装好的一种便捷的Web数据交互的技术， 使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面。两者其实并没有太大的区别，axios较新，Ajax较老，在代码语法上也大致相同，掌握了一种，另一种也都能看懂。但随着技术的逐步发展，现在很多都是VUE开发，一般都是要求使用Axios，那就接受命运吧，生命不止，学习不止。
精选资源
对异步请求xhr、ajax、axios、fetch的区别比较
01-08
总结来说，xhr是最基础的异步请求方式，jQuery的$.ajax简化了使用，axios提供了Promise支持，适合现代项目，而fetch则提供了一种更现代、简洁的API。选择哪种方式取决于项目需求、浏览器兼容性和开发团队的技术栈。
精选资源
ajax、axios、fetch区别
01-03
ajax、axios、fetch区别 ajax $.ajax({ type: 'POST', url: url, data: data, dataType: dataType, success: function () {}, error: function () {} }); 优缺点： 本身是针对MVC的编程,不符合现在前端MVVM的...
前端请求进化史 -- 对比XHR、AJAX、Fetch、Axios
lxs1660275788的博客
05-05 1347
本文系统梳理了前端请求技术的演进历程，涵盖XHR、Fetch API、Axios、Server Action等内容，揭示了每一次技术跃迁背后的核心驱动力
细谈axios 和 ajax
技术前端，忠于热爱 @0.活在风浪里
11-29 1006
万物皆可抛,唯有学习高 Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。 axios是通过promise实现对ajax技术的一种封装，就像jQuery实现ajax封装一样。 简单来说： ajax技术实现了网页的局部数据刷新，axios实现了对ajax的封装。 axios是ajax ajax不止axios。 使用 npm: $ 1. npm install axios $ 2. 在main.js 挂载到vue原型上起的名字叫$axios,程序员的默
ajax和axios有什么关系?axios是干什么用的?
代上老码的专栏
04-09 993
Ajax（Asynchronous JavaScript and XML）是一种在无需重新加载整个页面的情况下，与服务器交换数据并更新部分网页内容的技术。它主要依赖于 JavaScript 中的 XMLHttpRequest 对象来实现异步通信。Ajax 的出现极大地提升了 Web 应用的交互性和用户体验。Axios 是一个基于 Promise 的 HTTP 客户端，用于浏览器和 Node.js 环境。它是现代前端开发的一个流行工具，用于发起 HTTP 请求和处理响应。
前端请求大比拼：Fetch、Axios、Ajax、XHR
dfc_dfc的博客
08-13 3668
前端请求大比拼：Fetch、Axios、Ajax、XHR
什么是axios？axios 和 ajax 是什么关系？
anguang1973的专栏
05-13 7143
因此，可以说Axios是Ajax技术的一个实现库，它简化了Ajax请求的处理过程，使得开发者可以更加高效地进行Web开发。Axios和Ajax之间的关系可以理解为：Ajax是一种技术概念，而Axios是Ajax的一个具体实现库。是一个基于 Promise 的 HTTP 客户端，用于浏览器和 node.js。的，即同一套代码可以在浏览器和 node.js 中运行。
axios与ajax的关系,fetch、axios 与Ajax之间关系
weixin_39792686的博客
08-06 566
一、axios底层封装是XMLHttpRequest对象，实现原理跟ajax同样， 经过封装Promise()对象来处理结果例子以下： 封装Axios对象进行回调 get方法var axios = {getMethod:function(url){var xhr = new XMLHttpRequest()reture Promise((resolve,reject)=>{xhr.open(...
Ajax与axios
wwwwwwwangdanni的博客
06-19 1489
本文总结了Ajax的核心知识点，包括XMLHttpRequest对象的使用方法、Promise异步处理、axios封装以及相关前端开发技巧。主要内容如下： 原生Ajax的实现：通过XMLHttpRequest对象实现异步通信，介绍了open、send、setRequestHeader等方法的使用。 Promise的应用：讲解了Promise三种状态和链式调用，解决了回调地狱问题。 axios封装：展示了如何封装自定义axios函数，包括请求拦截、响应处理和错误捕获。
axios与ajax
m0_56597737的博客
12-26 485
axios与ajax的区别，以及ajax的使用方法与axios的使用方法
Ajax与Axios
weixin_51416826的博客
05-29 1041
相比于原生的Ajax，Axios提供了更加方便的API，可以更容易地处理请求和响应，处理错误，并且支持取消请求等功能。总结来说，Axios是Ajax概念的一个现代化实现，它以更现代的JavaScript特性（如Promise）为基础，提供了更便捷、强大的HTTP请求处理能力，特别适合现代Web应用的开发需求。2、ajax技术实现了局部数据的刷新，而axios实现了对ajax的封装。Ajax和Axios都是用于在前端进行数据交互的工具，但它们有一些重要的区别，从使用方式到功能特性都有所不同。
零基础~服务器基本概念、Ajax、Axios知识树状图
有事儿私信。
02-13 217
本系列的博客专注更新总结好的思维导图，希望可以帮助大家快速理清知识结构。
Fetch Axios jQuery XHR Native Request Unirest
最新发布
08-28
<think>首先，用户的问题是比较不同的HTTP请求方法和库：Fetch、Axios、jQuery XHR、Native Request（可能指的是XMLHttpRequest）和Unirest。用户说："Compare Fetch, Axios, jQuery XHR, Native Request, and Unirest for making HTTP requests"。我需要基于提供的引用来回答。 回顾系统级指令： - 所有行内数学表达式必须使用$...$格式。 - 独立公式使用$$...$$格式并单独成段。 - LaTeX语法正确。 - 使用中文回答。 - 生成相关问题。 - 回答中引用的段落末尾自然地添加引用标识。 - 回答结构清晰，帮助用户逐步解决问题。 - 参考站内引用：引用[1]、[2]、[3]、[4]。 提供的引用内容： - 引用[1]：讨论Fetch、Ajax、Axios。Fetch是基于Promise的现代API，内置在浏览器中，默认不发送跨域Cookie，需要手动检查响应状态。Ajax是技术概念，Axios是库。 - 引用[2]：缺点部分，提到jQuery的Ajax不符合MVVM，太大，配置混乱。 - 引用[3]：Axios的并发请求示例。 - 引用[4]：Ajax和jQuery的运用，步骤包括指定HTTP方法、URL等。 用户的问题是比较这些库： - Fetch：JavaScript内置API。 - Axios：第三方库。 - jQuery XHR：通过jQuery实现的Ajax。 - Native Request：可能指XMLHttpRequest（XHR）。 - Unirest：没有在引用中明确提到，但可能是一个轻量级HTTP库。引用中没有Unirest的信息，所以我需要基于一般知识或假设。 Unirest没有被引用提到，所以我应该基于常见知识来处理。Unirest是一个用于HTTP请求的库，支持多种语言，包括JavaScript。 我的回答结构： 1. **介绍**：简要解释每个库是什么。 2. **比较**：基于关键特性进行比较，如易用性、功能、兼容性、错误处理等。 3. **优缺点**：总结每个的优缺点。 4. **使用场景**：建议何时使用哪个。 5. **生成相关问题**：在最后添加相关问题。 使用中文回答。 确保引用：在回答中，当引用特定内容时，添加引用标识，如[^1]。 步骤： 1. **定义每个库**： - Fetch：现代JavaScript API，基于Promise。 - Axios：流行的第三方HTTP客户端库，基于Promise。 - jQuery XHR：通过jQuery的$.ajax方法实现的Ajax。 - Native Request：指XMLHttpRequest（XHR），是原始的Ajax实现。 - Unirest：一个轻量级HTTP库，用于简化请求。 2. **比较关键方面**： - **语法和易用性**：Fetch和Axios使用Promise，易用；jQuery XHR使用回调；XHR原生较复杂。 - **功能**：Axios有拦截器、取消请求等；Fetch较基础；jQuery XHR有jQuery生态；Unirest可能简化请求。 - **兼容性**：Fetch较新，可能不兼容旧浏览器；jQuery和XHR兼容性好；Axios和Unirest兼容性好。 - **错误处理**：Fetch需要手动检查状态码；Axios自动处理；jQuery XHR有错误回调。 - **性能**：一般差异不大，但Fetch和Axios更现代。 - **其他**：如支持请求取消、超时设置等。 基于引用： - 引用[1]：Fetch默认不发送跨域Cookie，需要手动检查响应；Axios提供更多功能。 - 引用[2]：jQuery XHR的缺点：太大，配置混乱。 - 引用[3]：Axios支持并发请求。 - 引用[4]：Ajax步骤，适用于XHR和jQuery。 对于Unirest，没有信息，我可以简要描述：Unirest是一个用于HTTP请求的库，旨在简化请求，支持多种语言，在JavaScript中，它可能提供链式API。 3. **总结优缺点**： - Fetch：优点 - 现代、内置、简洁；缺点 - 需要手动处理错误、不支持取消。 - Axios：优点 - 功能丰富、易用、支持拦截器；缺点 - 需要额外库。 - jQuery XHR：优点 - 兼容性好、易用（如果已用jQuery）；缺点 - 依赖jQuery、过时。 - Native XHR：优点 - 原生支持、兼容性好；缺点 - 语法复杂、回调地狱。 - Unirest：优点 - 轻量、简单API；缺点 - 可能功能较少、不流行。 4. **建议**：根据项目需求选择。现代项目推荐Fetch或Axios；旧项目可能用jQuery；避免原生XHR。 5. **生成相关问题**：在最后添加3-5个相关问题。 回答格式： - 清晰结构：使用标题或分段。 - 自然语言。 - 引用时添加标识。 最终回答大纲： 1. 介绍比较的库。 2. 详细比较。 3. 总结表或列表。 4. 相关问题。</think>### HTTP请求库比较：Fetch、Axios、jQuery XHR、Native Request 和 Unirest 在Web开发中，发送HTTP请求是常见任务，不同库提供了各自的实现方式。我将基于核心特性（如语法、功能、兼容性和错误处理）逐步比较Fetch、Axios、jQuery XHR、Native Request（通常指XMLHttpRequest）和Unirest。这些库各有优缺点，选择时应考虑项目需求（如浏览器兼容性、功能丰富性）。以下比较基于标准JavaScript实践和相关引用[^1][^2][^3][^4]。 #### 1. **核心特性概述** - **Fetch**：现代JavaScript内置API，基于Promise设计，无需额外库。提供简洁的语法，支持异步操作，但默认不发送跨域Cookie，且需手动检查HTTP错误（如400或500状态码）[^1]。 - **Axios**：第三方HTTP客户端库，也基于Promise。功能丰富，支持请求拦截、响应拦截、并发请求和自动错误处理（如自动抛出网络错误）[^3]。 - **jQuery XHR**：通过jQuery的`$.ajax`方法实现，属于Ajax技术的一部分。使用回调函数（非Promise），依赖jQuery库，配置较灵活但语法可能混乱[^2][^4]。 - **Native Request (XMLHttpRequest)**：原生JavaScript API，是Ajax的基础实现。语法复杂，使用事件监听器（如`onreadystatechange`），兼容性好但易导致“回调地狱”。 - **Unirest**：轻量级第三方库，旨在简化HTTP请求，提供链式API（如`unirest.get(url).then()`）。支持多种语言，在JavaScript中语法简洁，但功能相对基础，且社区支持较小（未在引用中提及，需额外了解）。 #### 2. **详细比较（基于关键方面）** - **语法和易用性**： - **Fetch**：语法简洁，使用Promise（如`fetch(url).then(response => response.json())`）。适合现代异步编程，但需手动处理响应状态（例如，使用`response.ok`检查错误）[^1]。 - **Axios**：更直观，直接返回JSON数据（如`axios.get(url).then(response => console.log(response.data))`）。支持链式调用和并发请求（如`axios.all()`），减少样板代码[^3]。 - **jQuery XHR**：基于回调（如`$.ajax({url, success: function(data){}})`），易用但不符合现代MVVM模式，可能导致代码冗余[^2][^4]。 - **Native Request**：语法最复杂（需实例化`XMLHttpRequest`对象并监听事件），易出错，例如： ```javascript const xhr = new XMLHttpRequest(); xhr.open('GET', url); xhr.onload = function() { if (xhr.status === 200) console.log(xhr.responseText); }; xhr.send(); ``` - **Unirest**：语法简单且一致（如`unirest.get(url).then(response => {})`），类似Axios，但功能较少，适合快速原型开发。 *总结：Axios和Fetch最易用（基于Promise），jQuery XHR和Native Request较过时，Unirest居中但功能有限。* - **功能和高级特性**： - **Fetch**：基础功能，支持请求和响应流，但缺乏内置拦截器或取消机制。需额外代码实现高级功能（如超时设置）[^1]。 - **Axios**：功能最全，包括请求/响应拦截、请求取消、自动转换JSON和超时处理。例如，拦截器可用于添加全局headers[^3]。 - **jQuery XHR**：提供基本Ajax功能（如缓存控制、超时），但依赖jQuery生态，体积大（约30KB），不适合轻量级项目[^2]。 - **Native Request**：功能基础，需手动实现所有特性（如超时或进度跟踪），无内置Promise支持。 - **Unirest**：提供简化的API（如表单提交或文件上传），但不如Axios丰富，且无内置拦截器。 *总结：Axios功能最强，Fetch和Unirest适合简单场景，jQuery XHR和Native Request功能陈旧。* - **错误处理和兼容性**： - **Fetch**：错误处理需手动（如检查`response.status`），不自动拒绝HTTP错误（如404）。兼容性较好（支持现代浏览器），但旧浏览器（如IE11）需polyfill[^1]。 - **Axios**：自动处理错误（网络错误或HTTP错误会触发`catch`），兼容性好（支持Node.js和浏览器）。 - **jQuery XHR**：通过回调处理错误（如`error: function(){}`），兼容性最佳（支持旧浏览器），但配置混乱，不符合关注分离原则[^2][^4]。 - **Native Request**：错误处理基于事件（如`onerror`），兼容所有浏览器，但代码冗长。 - **Unirest**：错误处理类似Axios（Promise-based），但兼容性依赖具体实现（如Node.js版本）。 *总结：Axios错误处理最友好，Fetch需额外注意，jQuery XHR和Native Request兼容性好但过时。* - **性能**： - 所有库在性能上差异不大，实际影响取决于网络条件。Fetch和Axios（基于Promise）更高效于异步操作，减少阻塞。jQuery XHR因库体积可能稍慢，Native Request轻量但开发效率低。Unirest性能类似Axios。 #### 3. **优缺点总结与使用建议** | 库 | 优点 | 缺点 | 推荐场景 | |-------------------|------------------------------------------|------------------------------------------|------------------------------------------| | **Fetch** | 内置、免依赖、语法简洁、支持流式请求 | 需手动错误处理、无取消功能、跨域限制 | 现代浏览器项目、追求轻量级 | | **Axios** | 功能丰富、错误自动处理、拦截器支持 | 需额外安装库、增加包体积 | 复杂应用、需高级特性（如并发请求）[^3] | | **jQuery XHR** | 兼容性好、易用（如果已用jQuery） | 依赖jQuery、体积大、配置混乱、过时 | 旧项目维护、jQuery生态集成[^2][^4] | | **Native Request**| 原生支持、最高兼容性 | 语法复杂、回调地狱、开发效率低 | 极少使用，仅当无其他选择时 | | **Unirest** | 轻量、语法简单、跨语言支持 | 功能基础、社区支持小、不流行 | 快速原型、简单请求（如API测试） | **一般建议**： - 现代项目优先选择 **Axios**（功能全面）或 **Fetch**（内置免依赖）。 - 避免 **jQuery XHR** 除非维护旧代码；**Native Request** 不推荐用于新开发。 - **Unirest** 适合轻量级任务，但不如Axios流行。 基于这些比较，您可以根据项目需求（如是否需要拦截器或浏览器支持）做出决策。如果您有具体代码示例或环境细节，我可以提供更针对性的建议。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

时光机上敲代码

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值