四种请求方式的区别（ajax、JQuery ajax 、axios、fetch）

最新推荐文章于 2024-04-30 11:27:22 发布
原创 最新推荐文章于 2024-04-30 11:27:22 发布 · 742 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #javascript #react

本文探讨了传统的Ajax技术，即XMLHttpRequest，及其在JavaScript中的回调地狱问题。接着介绍了JQuery如何封装了XHR，简化了操作。然后提到了axios，它基于Promise，遵循ES规范，是对XHR的现代封装。最后，fetch作为原生JS方法，不依赖XMLHttpRequest，提供了更简洁的API。这四种技术在前端请求中各有优劣，适应不同的开发需求。

• 传统 Ajax 指的是 XMLHttpRequest（XHR），最早出现的发送后端请求技术，隶属于原始 js 中，核心使用 XMLHttpRequest 对象，多个请求之间如果有先后关系的话，就会出现回调地狱。
• JQuery ajax 是对原生 XHR 的封装。
• axios 是一个基于 Promise ，本质上也是对原生 XHR 的封装，只不过它是Promise 的实现版本，符合最新的 ES 规范。
• fetch 不是 ajax 的进一步封装，而是原生 js，没有使用 XMLHttpRequest 对象。

yzkdcsdn
关注
ajax、axios、fetch的区别
qq_46015513的博客
09-17 794
（1）AJAX Ajax 即“AsynchronousJavascriptAndXML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。它是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。其缺点如下： 本身是针对MVC编程，不符合前端MVVM的浪潮 .
前端：一篇彻底搞懂Ajax,Promise,JQuery Ajax,Axios的差异(区别)
GIS摆渡人
04-28 1987
文章目录一. AJAX原理1.ajax 有那些优缺点?二. Promise封装Ajaxpromise 封装实现三. JQuery Ajax1.优缺点：四. Axios1.优缺点：五. Fetch1.优缺点：补充：为什么要用axios? 一. AJAX原理 Ajax的原理简单来说是在用户和服务器之间加了—个中间层(AJAX引擎)，通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。使用户操作与服务器响应异步化。 Ajax的过程只涉及Ja
四种请求方式的区别
lonely-左右De博客
08-23 1731
get 从服务器端获取数据，请求body在地址栏上 用于获取资源，是幂等的，无副作用 post 向服务器端提交数据，请求数据在报文body里 发送一个修改数据的请求，需求数据要从新创建 用于创建，更新，删除资源，查询资源都可以，是不幂等的 put 向服务器端提交数据，请求数据在报文body里 发送一个修改数据的请求，需求数据更新（全部更新） 用于添加/更新资源 patch 向服务器端提交数据，请求数据在报文body里 发送一个修改数据的请求，需求数据更新（部分更新...
四种请求方式的区分！
motility_scy的博客
08-13 1378
restful API请求方法 幂等 当前这个操作执行多次对资源的影响如果是一致的，那就是幂等，否则就不是 get 获取资源 幂等 1请求类型就是form序列化字符串格式 2参数在URL后面 3参数大小有限制（浏览器进行的限制2048kb） 4 参数只可以传递ascii码 对其他字符需要转换的 使用encodeURLComponent对参数进行转码 5请求可以缓存 6请求是HTTP应用层的协议，数据传输的话，使用TCP传输 只发送一次 post 创建资源（一般用来更新资源）不幂等 post 请求常用
四种请求方式 get、post、put、delete 的用法及区别（全）
热门推荐
信念之于人，犹翅膀之于鸟，信念是飞翔的翅膀
01-21 2万+
get请求方式 服务器 // 传统的URL app.get('/axios', (req, res) => { res.send('axios get 传递参数' + req.query.id) }) // Restful 的URL app.get('/axios/:id', (req, res) => { res.send('axios get(Restful) 传递参数' + req.params.id) }) app.get('/data', (req, res) =&gt
POSTMAN HTTP请求的四种方式区别
weixin_34122604的博客
12-21 579
1：form-data 此时对应的 Content-Type:multipart/form-data; 复制代码<form action="${pageContext.request.contextPath}/imageUpload_saveOrUpdate.action" method="post" enctype="multipart/form-data"> <div&g...
对异步请求xhr、ajax、axios、fetch的区别比较
01-08
本文将对比分析四种常见的异步请求方式：XMLHttpRequest（xhr）、jQuery的$.ajax、axios以及fetch，以便理解它们各自的特点和适用场景。 1. XMLHttpRequest（xhr） XMLHttpRequest对象是最早的异步请求手段，它...
ajax、axios、fetch区别
01-03
ajax、axios、fetch区别 ajax $.ajax({ type: 'POST', url: url, data: data, dataType: dataType, success: function () {}, error: function () {} }); 优缺点： 本身是针对MVC的编程,不符合现在前端MVVM的...
前端发起网络请求的几种常见方式（XMLHttpRequest、FetchApi、jQueryAjax、Axios）
最新发布
TANKING，开源开发者！
04-30 1661
这是最传统和最常见的方式之一。它允许客户端与服务器进行异步通信。XHR API提供了一个在后台发送HTTP请求和接收响应的机制，使得页面能够在不刷新的情况下更新部分内容。Fetch API是一种新的Web API，提供了一种更强大、更灵活的方式来发起网络请求。它使用Promise对象，简化了对网络请求的处理，并且提供了更友好的API。jQuery是一个流行的JavaScript库，其中包含了简化Ajax调用的方法。通过jQuery的Ajax方法，可以方便地发送各种类型的HTTP请求，并处理响应。Axios。
最新最全的前端面试题集锦之 Ajax、Fetch、Axios 篇
XH_jing的博客
08-09 3797
该内容主要整理关于 Axios 的相关面试题，其他内容面试题请移步至 2021 最新最全的前端面试题集锦 查看。 目录一、Ajax 相关面试题1、概念2、作用3、创建 Ajax4、Ajax 状态和 HTTP 状态码5、Ajax 中常用的属性和方法6、思考：post 和 get 有什么区别二、Axios 相关面试题1、axios 原理2、axios 的特点有哪些？3、axios 有哪些常用方法？3、一次并发的请求 axios.all([])4、说下你了解的axios相关配置属性？三、Fetch 相关面.
ajax几种请求方式？他们的优缺点？
TheFlyPenguin的博客
01-04 209
a．常用的post,get,delete put b. 代码上的区别: 1:get通过url传递参数;2:post设置请求头部规定请求数据类型 c. 使用上的区别：1:post比get安全(因为post参数在请求体中。get参数在url上面)2:get传输速度比post快 根据传参决定的(post通过请求体传参，后台通过数据流接收。速度稍微慢一些。而get通过url传参可以直接获取)3: post传输文件大理论没有限制,get传输文件小大7-8k,ie4k左右4:get获取数据post上传数据(上传的数据比
jquery中的AJAX使用--与原始ajax的比较
区块链领域填坑的java程序猿
12-30 1769
前言：                   Ajax让web开发丰富多彩，增强了用户的体验度。Ajax是web开发的必修课。Ajax的原理大家都知道，而且实现起 来也并不复杂，但是因为它强大的作用，所以它有很多不同的实现方式。其中jquery就对Ajax进行了封装，提供了一系 列的Ajax函数，来简化我们对Ajax的使用。          本篇文章先来对传统的Ajax
Ajax、jQuery ajax、axios和fetch的区别
果冻
10-22 323
1、Ajax： ajax自然不必说，最早出现的发送后端请求技术，隶属于原始js中，核心使用XMLHttpRequest对象，多个请求之间如果有先后关系的话，就会出现回调地狱。 2、 Jquery Ajax： 是jQuery框架中的发送后端请求技术，由于jQuery是基于原始的基础上做的封装，所以，jquery Ajax自然也是原生ajax的封装 3、Fetch： fetch号称是AJAX的替代品，是在ES6出现的，使用了ES6中的promise对象。Fetch是基于promise设计的。Fetch的代码结构
如何区分ajax请求和非ajax请求
sqlgao22的博客
08-11 1408
如何区分ajax请求和非ajax请求 有时需要根据请求的类型进行不同的判断,需要区分是否是异步请求. ajax请求的请求头会多出一个请求头x-requested-with,并且请求头的内容是:XMLHttpRequest,这样就很好区分了. String ajax = request.getHeader("x-requested-with"); //区分ajax请求...
axios、fetch与ajax有什么区别？
weixin_57550930的博客
09-28 379
1） Ajax 传统的Ajax指的是 XMLHttpRequest（XHR），一种发送后端请求技术。通过在后台与服务器进行少量 数据交换，Ajax可以使网页实现异步更新，这意味着可以在不重新加载整个网页得情况下，对网页某部 分进行更新。 缺点： ①本身是针对MVC的编程，不符合现在MVVM模式 ②JQuery整个项目太大，单纯使用ajax却要引入整个JQuery非常不合理 不符合关注分离原则。 。系统的一个部分发生变化，不会影响其他部分 。即使需要改变，也能清晰的识别出哪些部分需要改变 。如果需要扩展架
Ajax、Fetch、Axios三者的区别
00后的程序员
03-09 346
注意：Ajax 是发请求的一种方式，或者把 XMLHttpRequest 与 Ajax 划等号，其实这是错误和片面的。我们使用这种方式实现网络请求时，如果请求内部又包含请求，以此循环，就会出现回调地狱。
Ajax, Axios, Fetch之间的区别
kobezzZ的博客
08-03 289
1 、JQuery ajax $.ajax({ type: 'POST', url: url, data: data, dataType: dataType, success: function () {}, error: function () {} }); Ajax是对原生XHR的封装，为了达到我们跨越的目的，增添了对JSONP的支持。经过这么多年的更新维护，不得不承...
AJAX原理——XMLHttpRequest和Promise对象学习
weixin_58089266的博客
06-14 291
AJAX原理是XMLHttpRequest对象定义：通过XMLHttpRequest可以在不刷新页面的情况下请求特定URL，获取数据关系：axios内部采用XMLHttpRequest与服务器交互好处：掌握使用XMLHttpRequest（XHR）与服务器进行数据交互，了解axios内部的原理 使用XMLHttpRequest的步骤： 路径生成指定格式的查询参数： 2.XMLHttpRequest——数据提交核心：请求头设置Content-Type:application/json
AJAX的请求方式区别
Struggling865的博客
09-29 1231
AJAX默认为get类型提交方式，传入的参数长度受限制，大约为2K，具体和浏览器的版本有关； post其实也是受限制的，大约在100K，因此数据的查询建议使用get，增删改建议使用post 以下内容为我本人遇到问题，查到一些资料，汇总的结果，仅供参考 get把请求的数据放在url上，即HTTP协议头上，其格式为： 以?分割URL和传输数据，参数之间以&相连。 数据如果是英文字母/数字...
AJAX技术比较：原生、jQuery、fetch及axios使用示例
资源摘要信息:"本文将详细介绍ajax在日常开发中的各种使用方法，包括原生ajax、jQuery中ajax、fetch API以及axios的使用。同时，对于跨域问题的解决方法也将进行阐述。" 知识点一：原生ajax 原生ajax，即不依赖...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值