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

最新推荐文章于 2023-06-14 12:00:00 发布
最新推荐文章于 2023-06-14 12:00:00 发布
阅读量688 收藏
点赞数
文章标签： 前端 javascript react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/yzkdcsdn/article/details/121567803
版权
本文探讨了传统的Ajax技术，即XMLHttpRequest，及其在JavaScript中的回调地狱问题。接着介绍了JQuery如何封装了XHR，简化了操作。然后提到了axios，它基于Promise，遵循ES规范，是对XHR的现代封装。最后，fetch作为原生JS方法，不依赖XMLHttpRequest，提供了更简洁的API。这四种技术在前端请求中各有优劣，适应不同的开发需求。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

• 传统 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 685
（1）AJAX Ajax 即“AsynchronousJavascriptAndXML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。它是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。其缺点如下： 本身是针对MVC编程，不符合前端MVVM的浪潮 .
前端：一篇彻底搞懂Ajax,Promise,JQuery Ajax,Axios的差异(区别)
GIS摆渡人
04-28 1782
文章目录一. AJAX原理1.ajax 有那些优缺点?二. Promise封装Ajaxpromise 封装实现三. JQuery Ajax1.优缺点：四. Axios1.优缺点：五. Fetch1.优缺点：补充：为什么要用axios? 一. AJAX原理 Ajax的原理简单来说是在用户和服务器之间加了—个中间层(AJAX引擎)，通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。使用户操作与服务器响应异步化。 Ajax的过程只涉及Ja
四种请求方式的区别
lonely-左右De博客
08-23 1680
get 从服务器端获取数据，请求body在地址栏上 用于获取资源，是幂等的，无副作用 post 向服务器端提交数据，请求数据在报文body里 发送一个修改数据的请求，需求数据要从新创建 用于创建，更新，删除资源，查询资源都可以，是不幂等的 put 向服务器端提交数据，请求数据在报文body里 发送一个修改数据的请求，需求数据更新（全部更新） 用于添加/更新资源 patch 向服务器端提交数据，请求数据在报文body里 发送一个修改数据的请求，需求数据更新（部分更新...
四种请求方式的区分！
motility_scy的博客
08-13 1343
restful API请求方法 幂等 当前这个操作执行多次对资源的影响如果是一致的，那就是幂等，否则就不是 get 获取资源 幂等 1请求类型就是form序列化字符串格式 2参数在URL后面 3参数大小有限制（浏览器进行的限制2048kb） 4 参数只可以传递ascii码 对其他字符需要转换的 使用encodeURLComponent对参数进行转码 5请求可以缓存 6请求是HTTP应用层的协议，数据传输的话，使用TCP传输 只发送一次 post 创建资源（一般用来更新资源）不幂等 post 请求常用
POSTMAN HTTP请求的四种方式区别
weixin_34122604的博客
12-21 559
1：form-data 此时对应的 Content-Type:multipart/form-data; 复制代码<form action="${pageContext.request.contextPath}/imageUpload_saveOrUpdate.action" method="post" enctype="multipart/form-data"> <div&g...
ajax几种请求方式？他们的优缺点？
TheFlyPenguin的博客
01-04 192
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上传数据(上传的数据比
对异步请求xhr、ajax、axios、fetch的区别比较
01-08
本文将对比分析四种常见的异步请求方式：XMLHttpRequest（xhr）、jQuery的$.ajax、axios以及fetch，以便理解它们各自的特点和适用场景。 1. XMLHttpRequest（xhr） XMLHttpRequest对象是最早的异步请求手段，它...
axios，Ajax,jQuery ajax,axios和fetch的区别
沈圥笙，的博客
02-23 1176
提纲： 1.Axios的概念 2.安装 3.Axios简单示例 4.Axios的API 5.Axios的请求配置和响应数据格式 6.Axios的拦截器 7.Ajax,jQuery ajax,axios和fetch的区别 内容： 1.Axios的概念 axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。 特点： 从浏览器中创建 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的...
数据请求的几种方式(ajax、fetch、jQuery、axios)，token过期自动刷新
qq_45700583的博客
08-27 3025
一个context import React, { Component, createContext } from 'react'; const BatteryContext = createContext(); //声明一个孙组件 class Leaf extends Component { render() { return ( <BatteryContext.Consumer> { battery => <h1&g
jquery中的AJAX使用--与原始ajax的比较
区块链领域填坑的java程序猿
12-30 1748
前言：                   Ajax让web开发丰富多彩，增强了用户的体验度。Ajax是web开发的必修课。Ajax的原理大家都知道，而且实现起 来也并不复杂，但是因为它强大的作用，所以它有很多不同的实现方式。其中jquery就对Ajax进行了封装，提供了一系 列的Ajax函数，来简化我们对Ajax的使用。          本篇文章先来对传统的Ajax
Ajax、jQuery ajax、axios和fetch的区别
果冻
10-22 293
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 1382
如何区分ajax请求和非ajax请求 有时需要根据请求的类型进行不同的判断,需要区分是否是异步请求. ajax请求的请求头会多出一个请求头x-requested-with,并且请求头的内容是:XMLHttpRequest,这样就很好区分了. String ajax = request.getHeader("x-requested-with"); //区分ajax请求...
axios、fetch与ajax有什么区别？
weixin_57550930的博客
09-28 348
1） Ajax 传统的Ajax指的是 XMLHttpRequest（XHR），一种发送后端请求技术。通过在后台与服务器进行少量 数据交换，Ajax可以使网页实现异步更新，这意味着可以在不重新加载整个网页得情况下，对网页某部 分进行更新。 缺点： ①本身是针对MVC的编程，不符合现在MVVM模式 ②JQuery整个项目太大，单纯使用ajax却要引入整个JQuery非常不合理 不符合关注分离原则。 。系统的一个部分发生变化，不会影响其他部分 。即使需要改变，也能清晰的识别出哪些部分需要改变 。如果需要扩展架
Ajax、Fetch、Axios三者的区别
00后的程序员
03-09 261
注意：Ajax 是发请求的一种方式，或者把 XMLHttpRequest 与 Ajax 划等号，其实这是错误和片面的。我们使用这种方式实现网络请求时，如果请求内部又包含请求，以此循环，就会出现回调地狱。
Ajax, Axios, Fetch之间的区别
kobezzZ的博客
08-03 268
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 266
AJAX原理是XMLHttpRequest对象定义：通过XMLHttpRequest可以在不刷新页面的情况下请求特定URL，获取数据关系：axios内部采用XMLHttpRequest与服务器交互好处：掌握使用XMLHttpRequest（XHR）与服务器进行数据交互，了解axios内部的原理 使用XMLHttpRequest的步骤： 路径生成指定格式的查询参数： 2.XMLHttpRequest——数据提交核心：请求头设置Content-Type:application/json
AJAX的请求方式区别
Struggling865的博客
09-29 1189
AJAX默认为get类型提交方式，传入的参数长度受限制，大约为2K，具体和浏览器的版本有关； post其实也是受限制的，大约在100K，因此数据的查询建议使用get，增删改建议使用post 以下内容为我本人遇到问题，查到一些资料，汇总的结果，仅供参考 get把请求的数据放在url上，即HTTP协议头上，其格式为： 以?分割URL和传输数据，参数之间以&相连。 数据如果是英文字母/数字...
ajax和axios两种请求的概念联系以及区别
风从北方来的博客
04-07 1160
概念： ajax: 定义 使用HTTP脚本来按需加载数据，而不需要刷新整个页面。 原生js中 使用：例子如下： function get(url,callback){ var request=new XMLHttpRequest(); //创建新请求 request.open("GET",url，false); //指定待获取的URL (param1: 请求类型 param2:请求地址，params:是否异步) request.onreadysta...
AJAX技术比较：原生、jQuery、fetch及axios使用示例
资源摘要信息:"本文将详细介绍ajax在日常开发中的各种使用方法，包括原生ajax、jQuery中ajax、fetch API以及axios的使用。同时，对于跨域问题的解决方法也将进行阐述。" 知识点一：原生ajax 原生ajax，即不依赖...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值