ajax,axios,fetch

文章目录

  • ajax
    • 工作原理
    • ajax发请求四个步骤
      • 创建xmlhttprequest对象
      • 设置请求方式
      • 设置回调函数
      • 发送请求
    • 自封装ajax
  • axios
    • axios 特性
    • 如何用
    • 配置拦截器
    • fetch
  • 三者区别

ajax

工作原理

Ajax的工作原理相当于在用户和服务器之间加了—个中间层(AJAX引擎),使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器。像—些数据验证和数据处理等都交给Ajax引擎自己来做,,只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。

ajax发请求四个步骤

创建xmlhttprequest对象

//第一步:创建XMLHttpRequest对象var xmlHttp;
if (window.XMLHttpRequest) {            //非IExmlHttp = new XMLHttpRequest();
} else if (window.ActiveXObject) {       //IExmlHttp = new ActiveXObject("Microsoft.XMLHTTP")
}

设置请求方式


xmlHttp.open("POST", url, true);

设置回调函数

//第三步:注册回调函数xmlHttp.onreadystatechange = function() {if (xmlHttp.readyState == 4) {if (xmlHttp.status == 200) {......} else {......}}
}

xmlHttp.readyState是存有XMLHttpRequest 的状态。从 0 到 4 发生变化。0: 请求未初始化。1: 服务器连接已建立。2: 请求已接收。3: 请求处理中。4: 请求已完成,且响应已就绪

具体状态码如下:
AJAX状态码说明
1**:请求收到,继续处理
2**:操作成功收到,分析、接受
3**:完成此请求必须进一步处理
4**:请求包含一个错误语法或不能完成
5**:服务器执行一个完全有效请求失败

再具体就如下:

100——客户必须继续发出请求
101——客户要求服务器根据请求转换HTTP协议版本
200——交易成功
201——提示知道新文件的URL
202——接受和处理、但处理未完成
203——返回信息不确定或不完整
204——请求收到,但返回信息为空
205——服务器完成了请求,用户代理必须复位当前已经浏览过的文件
206——服务器已经完成了部分用户的GET请求
300——请求的资源可在多处得到
301——删除请求数据
302——在其他地址发现了请求数据
303——建议客户访问其他URL或访问方式
304——客户端已经执行了GET,但文件未变化
305——请求的资源必须从服务器指定的地址得到
306——前一版本HTTP中使用的代码,现行版本中不再使用
307——申明请求的资源临时性删除
400——错误请求,如语法错误
401——请求授权失败
402——保留有效ChargeTo头响应
403——请求不允许
404——没有发现文件、查询或URl
405——用户在Request-Line字段定义的方法不允许
406——根据用户发送的Accept拖,请求资源不可访问
407——类似401,用户必须首先在代理服务器上得到授权
408——客户端没有在用户指定的饿时间内完成请求
409——对当前资源状态,请求不能完成
410——服务器上不再有此资源且无进一步的参考地址
411——服务器拒绝用户定义的Content-Length属性请求
412——一个或多个请求头字段在当前请求中错误
413——请求的资源大于服务器允许的大小
414——请求的资源URL长于服务器允许的长度
415——请求资源不支持请求项目格式
416——请求中包含Range请求头字段,在当前请求资源范围内没有range指示值,请求也不包含If-Range请求头字段
417——服务器不满足请求Expect头字段指定的期望值,如果是代理服务器,可能是下一级服务器不能满足请求
500——服务器产生内部错误
501——服务器不支持请求的函数
502——服务器暂时不可用,有时是为了防止发生系统过载
503——服务器过载或暂停维修
504——关口过载,服务器使用另一个关口或服务来响应用户,等待时间设定值较长
505——服务器不支持或拒绝支请求头中指定的HTTP版本

发送请求

xmlHttp.send(params)

自封装ajax

封装get方法

 let Aget={createXHR: function(){if(window.XMLHttpRequest){return new XMLHttpRequest()}else{return new ActiveXObject()}},get:function(url,data,callback,dataType){//避免dataType大小写let dataType = dataType.toLowerCase()if(data){url+='?'Object.keys(data).forEach(key => url+=`${key}=${data[key]}&`)url=url.slice(0,-1)}let xhr=this.createXHR()//创建请求xhr.open('get',url)//发送请求xhr.send()xhr.onreadystatechange = function(){if(xhr.readyState==4){if(xhr.status>=200&&xhr.status<300||xhr.status==304){let res = dataType=='json'? JSON.parse(xhr.responseText) : xhr.responseTextcallback(res,xhr.status,xhr)}}}}}

封装post方法

 let Pget={createXHR: function(){if(window.XMLHttpRequest){return new XMLHttpRequest()}else{return new ActiveXObject()}},get:function(url,data,callback,dataType){//避免dataType大小写let dataType = dataType.toLowerCase()let xhr=this.createXHR()let str=''if(data){Object.keys(data).forEach(key => str+=`${key}=${data[key]}&`)str=str.slice(0,-1)}xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')//发送请求xhr.send(str)xhr.onreadystatechange = function(){if(xhr.readyState==4){if(xhr.status>=200&&xhr.status<300||xhr.status==304){let res = dataType=='json'? JSON.parse(xhr.responseText) : xhr.responseTextcallback(res,xhr.status,xhr)}}}}}

封装请求

 let aj={createXHR: function(){if(window.XMLHttpRequest){return new XMLHttpRequest()} else{return new ActiveXObject()}},ajax:function(params){let type = params.type ? params.toLowerCase() :'get'let isAsync=params.isAsync? params.isAsync : 'true'let url=params.urllet data= params.data ? params.data :{}let dataType = params.dataType.toLowerCase()let xhr=createXHR()let str=''Object.keys(data).forEach(key=>str+=`${key}=${data[key]}&`)if(type==='get') url+=`?${str}`return new Promise((resolve, reject) => {xhr.open(type,url,isAsync)if (type=='post'){xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')xhr.send(str)}else{xhr.send()}xhr.onreadystatechange=function(){if(xhr.readyState==4){if(xhr.status==200&&xhr.status<300|| xhr.status==304){let res=dataType==='json'? JSON.parse(responseText): responseText resolve(res)}else{reject(xhr.status)}}}})}}

axios

axios 特性

基于promise的异步ajax请求库
浏览器端/node端都可以使用
支持请求/响应拦截器
支持请求取消
请求/响应数据转换
批量发送多个请求

如何用

const axios = require('axios');// 向给定ID的用户发起请求
axios.get('/user?ID=12345').then(function (response) {// 处理成功情况console.log(response);}).catch(function (error) {// 处理错误情况console.log(error);}).finally(function () {// 总是会执行});// 上述请求也可以按以下方式完成(可选)
axios.get('/user', {params: {ID: 12345}}).then(function (response) {console.log(response);}).catch(function (error) {console.log(error);}).finally(function () {// 总是会执行});  // 支持async/await用法
async function getUser() {try {const response = await axios.get('/user?ID=12345');console.log(response);} catch (error) {console.error(error);}
}

配置拦截器

const instance = axios.create({baseURL: 'https://some-domain.com/api/',timeout: 1000,headers: {'X-Custom-Header': 'foobar'}
});
// 添加请求拦截器
axios.interceptors.request.use(function (config) {// 在发送请求之前做些什么return config;}, function (error) {// 对请求错误做些什么return Promise.reject(error);});// 添加响应拦截器
axios.interceptors.response.use(function (response) {// 2xx 范围内的状态码都会触发该函数。// 对响应数据做点什么return response;}, function (error) {// 超出 2xx 范围的状态码都会触发该函数。// 对响应错误做点什么return Promise.reject(error);});

fetch

Fetch 是在 ES6 出现的,它使用了 ES6 提出的 promise 对象。它是 XMLHttpRequest 的替代品。
很多小伙伴会把它与 Ajax 作比较,其实这是不对的,我们通常所说的 Ajax 是指使用 XMLHttpRequest 实现的 Ajax,所以真正应该和 XMLHttpRequest 作比较。

Fetch 是一个 API,它是真实存在的,它是基于 promise 的。

特点:

使用 promise,不使用回调函数。
采用模块化设计,比如 rep、res 等对象分散开来,比较友好。
通过数据流对象处理数据,可以提高网站性能。

所以这里就和 Ajax 又很大不同了,一个是思想,一个是真实存在的 API,不过它们都是用来给网络请求服务的,我们一起来看看利用 Fetch 实现网络请求。

<body><script>function ajaxFetch(url) {fetch(url).then(res => res.json()).then(data => {console.info(data)})}ajaxFetch('https://smallpig.site/api/category/getCategory')</script>
</body>

三者区别

在这里插入图片描述

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/151902.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

HDD与QLC SSD深度对比:功耗与存储密度的终极较量

在当今数据世界中&#xff0c;存储设备的选择对于整体系统性能和能耗有着至关重要的影响。硬盘HDD和大容量QLC SSD是两种主流的存储设备&#xff0c;而它们在功耗方面的表现是许多用户关注的焦点。 扩展阅读&#xff1a; 1.面对SSD的步步紧逼&#xff0c;HDD依然奋斗不息 2.…

Windows系统中搭建docker (ubuntu,Docker-desktop)

一、docker安装前的准备工作 1. 开启CPU虚拟化&#xff0c;新电脑该默认是开启的&#xff0c;如果没开启可以根据自己电脑型号品牌搜索如克开启CPU虚拟化。当开启成功后可在设备管理器中看到。 2.开通Hyper-V 通过 Windows 控制面板 --> 程序和功能 -->启用或关闭…

Java集合大总结——Set的简单使用

Set的简单介绍 Set接口是Collection的子接口&#xff0c;Set接口相较于Collection接口没有提供额外的方法。Set 集合不允许包含相同的元素&#xff0c;如果试把两个相同的元素加入同一个 Set 集合中&#xff0c;则添加操作失败。Set集合支持的遍历方式和Collection集合一样&am…

[Kettle] 生成记录

在数据统计中&#xff0c;往往要生成固定行数和列数的记录&#xff0c;用于存放统计总数 需求&#xff1a;为方便记录1~12月份商品的销售总额&#xff0c;需要通过生成记录&#xff0c;生成一个月销售总额的数据表&#xff0c;包括商品名称和销售总额两个字段&#xff0c;记录…

使用键盘管理器更改键盘快捷键,让键盘真正迎合你的使用习惯

如果默认快捷键不适合你&#xff0c;你肯定会想知道如何在Windows 11中更改键盘快捷键。 也许你已经习惯了macOS键盘&#xff0c;或者像我一样在Windows和Mac之间切换工作/游戏——如果是这样的话&#xff0c;重新配置默认的Windows快捷方式&#xff0c;使其与Mac上的快捷方式…

Docker网络详细说明

Docker网络 docker不启动&#xff0c;默认网络情况 ipconfig----------ens33、lo、virbr0 在CentOS7的安装过程中如果有选择相关虚拟化的的服务安装系统后&#xff0c;启动网卡时会发现有一个以网桥连接的私网地址的virbr0网卡(virbr0网卡&#xff1a;它还有一个固定的默认I…

多目标应用:基于多目标灰狼优化算法MOGWO求解微电网多目标优化调度(MATLAB代码)

一、微网系统运行优化模型 微电网优化模型介绍&#xff1a; 微电网多目标优化调度模型简介_IT猿手的博客-CSDN博客 二、多目标灰狼优化算法MOGWO 多目标灰狼优化算法MOGWO简介&#xff1a; 三、多目标灰狼优化算法MOGWO求解微电网多目标优化调度 &#xff08;1&#xff09…

ANSYS网格无关性检查

网格精度对应力结果存在很大的影响&#xff0c;有时候可以发现&#xff0c;随着网格精度逐渐提高&#xff0c;所求得的最大应力值逐渐趋于收敛。 默认网格&#xff1a; 从默认网格下计算出的应力云图可以发现&#xff0c;出现了的三处应力奇异点&#xff0c;此时算出的应力值是…

趣学python编程(六、关于蓝桥杯比赛)

蓝桥杯全国软件和信息技术专业人才大赛简称“蓝桥杯”&#xff0c;是由工业和信息化部人才交流中心举办的国内最大的信息技术竞赛。为促进中小学科技创新&#xff0c;提升中小学生逻辑思维&#xff0c;发现和培养面向未来的科技精英人才。 蓝桥杯介绍 蓝桥杯全国软件和信息技术…

Linux操作系统使用及C高级编程-D6-D8Linux shell脚本

利用shell命令写的脚本文件&#xff0c;后缀是.sh shell脚本是一个解释型语言&#xff0c;不需要编译&#xff0c;可直接执行 书写&#xff1a;vi test.sh #!/bin/bash&#xff1a;说明使用的是/bin目录下的bash 说明完后即可编写脚本文件 bash test.sh&#xff1a;运行文…

企业级SSD还是一个巨大的蓝海~

根据Allied Market Research市场分析报告显示&#xff0c;2020 年全球企业级 SSD 市场规模为 178.5 亿美元&#xff0c;预计到 2030 年将达到 468.9 亿美元&#xff0c;2021 年至 2030 年的复合年增长率为 10.2%。 扩展阅读&#xff1a;华为展望&#xff5c;2030年数据中心存储…

【IDEA 使用easyAPI、easyYapi、Apifox helper等插件时,导出接口文档缺少代码字段注释的相关内容、校验规则的解决方法】

问题 IDEA 使用easyAPI、easyYapi、Apifox helper等插件时&#xff0c;导出的接口文档上面&#xff0c;缺少我们代码里的注解字段&#xff0c;如我们规定了NOTNULL、字段描述等。 问题链接&#xff0c;几个月之前碰到过&#xff0c;并提问了&#xff0c;到现在解决&#xff0c…

一段来自《Verilog HDL 高级数字设计》的错误Verilog代码

笔者之前在阅读《Verilog HDL 高级数字设计》时的基4布斯乘法器一文时&#xff0c;就遇到了一段有问题的代码&#xff0c;而这个问题可以用Verilog基础&#xff1a;表达式位宽的确定&#xff08;位宽拓展&#xff09;文中的分析完美解决。 always (negedge clock) if (Start)…

大健康产业的先行者「完美公司」携手企企通,推进企业采购供应链数字化进程

随着中国经济持续向好&#xff0c;消费升级和美妆步骤增加&#xff0c;美妆和个人护理产品已逐渐成为中国消费者的日用消费品&#xff0c;推动了护肤品和化妆品的销售额增速均超过10%&#xff0c;成为中国整个快速消费品市场中的一颗亮眼明珠。 据国家统计局数据显示&#xff0…

Linux(Ubuntu)安装JDK环境

系统环境 Ubuntu20.04 下载JDK压缩包 前往Oracle官网进行后续下载或单击下载JDK压缩包 下拉找到JDK8&#xff0c;在Linux板块下选择适配系统架构的压缩包文件(后缀为tar.gz)&#xff0c;系统架构可通过uname -m命令查看 安装JDK 安装环境通常放在/usr/local下&#xff0c;进入…

【数据结构】栈与队列面试题(C语言)

我们再用C语言做题时&#xff0c;是比较不方便的&#xff0c;因此我们在用到数据结构中的某些时只能手搓或者Ctrlcv 我们这里用到的栈或队列来自栈与队列的实现 目录 有效的括号解题思路&#xff1a;代码实现&#xff1a; 用队列实现栈解题思路&#xff1a;代码实现&#xff1a…

openGauss学习笔记-128 openGauss 数据库管理-设置透明数据加密(TDE)

文章目录 openGauss学习笔记-128 openGauss 数据库管理-设置透明数据加密&#xff08;TDE&#xff09;128.1 概述128.2 前提条件128.3 背景信息128.4 密钥管理机制128.5 表级加密方案128.6 创建加密表128.7 切换加密表加密开关128.8 对加密表进行密钥轮转 openGauss学习笔记-12…

网络运维与网络安全 学习笔记2023.11.19

网络运维与网络安全 学习笔记 第二十天 今日目标 STP工作原理、STP高级配置、MSTP工作原理 MSTP配置案例、MSTP负载均衡 STP工作原理 单点故障 PC之间的互通链路仅仅存在1个 任何一个设备或链路出现问题&#xff0c;PC之间都会无法通信 解决方案 增加冗余/备份设备 增加冗…

在Broker端进行消息过滤

在Broker端进行消息过滤&#xff0c;可以减少无效消息发送到Consumer&#xff0c;少占用网络带宽从而提高吞吐量。Broker端有三种方式进行消息过滤。 1.消息的Tag和Key 对一个应用来说&#xff0c;尽可能只用一个Topic&#xff0c;不同的消息子类型用Tag来标识&#xff08;每条…

springboot引入redisson分布式锁及原理

1.引入依赖 <dependency><groupId>org.redisson</groupId><artifactId>redisson</artifactId><version>3.13.6</version> </dependency>2.配置类创建bean /*** author qujingye* Classname RedissonConfig* Description TOD…