【web】学习ajax和fetch

news2025/1/13 15:38:28

1/什么是ajax

ajax 全名 async javascript and XML(异步JavaScript和XML) 是前后台交互的能⼒。
也就是我们客户端给服务端发送消息的⼯具,以及接受响应的⼯具。
在不重新加载整个网页的情况下,对网页的某部分进行更新。而传统的网页(不使用 Ajax)如果需要更新内容,必需重载整个网页面

  • 什么是同步请求?(false)
    同步请求是指当前发出请求后,浏览器什么都不能做,
    必须得等到请求完成返回数据之后,才会执行后续的代码,

  • 什么是异步请求?(默认:true)
    默认异步:异步请求就当发出请求的同时,浏览器可以继续做任何事,
    Ajax发送请求并不会影响页面的加载与用户的操作,相当于是在两条线上,各走各的,互不影响。

GET 还是 POST?
get 请求的参数就直接在 url 后面进行拼接就可以 post 请求的参数是携带在请求体中的,所以不需要再
url 后面拼接

.ajax()
jQuery对象上面还定义了Ajax方法($.ajax()),用来处理Ajax操作。调用该方法后,浏览器就会向服务器发出一个HTTP请求

ajax原理分析

我们自己定义触发事件,在触发事件里面编写ajax代码
当事件触发时,游览器将会发送ajax异步请求,本质还是http请求
服务器返回数据,我们通过回调函数来对返回数据进行处理
将数据展示到页面上,实现局部更新
使用步骤
1.创建XmlHttpRequest对象
2.调用open方法设置基本请求信息
3.设置发送的数据,发送请求
4.注册监听的回调函数
5.拿到返回值,对页面进行更新
在这里插入图片描述

fetch 基本使用

Fetch API 提供了一个获取资源的接口(包括跨域请求),用于取代传统的XMLHttpRequest的,在 JavaScript 脚本里面发出 HTTP 请求
Fetch API 提供了一个 JavaScript 接口,用于访问和操纵 HTTP 管道的一些具体部分,例如请求和响应。它还提供了一个全局 fetch() 方法,该方法提供了一种简单,合理的方式来跨网络异步获取资源。 它的优点很多,包括链式调用的语法、返回promise等

fetch与ajax的区别

fetch:
1)fetchtch只对网络请求报错,对400,500都当做成功的请求,需要封装去处理
2)fetch默认不会带cookie,需要添加配置项
3)fetch不支持abort,不支持超时控制,使用setTimeout及Promise.reject的实现的超时控制并不能阻止请求过程继续在后台运行,造成了量的浪费
4)fetch没有办法原生监测请求的进度,而XHR可以从fetch()返回的

ajax与fetch都是前端开发过程中常用到的数据请求方式。fetch是一种http数据请求的方式,是XMLHttpRequest的一种替代方案;ajax使用 JavaScript 向服务器提出请求并处理响应而不阻塞用户核心对象XMLHttpRequest。
fetch采用了Promise的异步处理机制,使用起来比ajax较为简单

Fetch 和 Axios/Ajax 的关系

在这里插入图片描述

Ajax 是一种代表异步 JavaScript + XML 的模型(技术合集),所以 Fetch 也是 Ajax 的一个子集
在之前,我们常说的 Ajax 默认是指以 XHR 为核心的技术合集,而在有了 Fetch 之后,Ajax 不再单单指 XHR 了,我们将以 XHR 为核心的 Ajax 技术称作传统 Ajax。
Axios 属于传统 Ajax(XHR)的子集,因为它是基于 XHR 进行的封装

图文来自SCDN

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

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

相关文章

设计师必备的5个素材库,马住

今天就告诉大家设计师都是去哪些网站找素材,分享五个网站,解决你80%的设计素材,建议收藏! 1、菜鸟图库 https://www.sucai999.com/?vNTYxMjky 这是一个为新手设计师提供免费素材的设计网站,站内有超多平面模板、海报…

成为一名黑客需要学什么

想成为一名专业黑客,但不知道从哪里学起”很多人向盾叔问过这个问题,今天盾叔就为你介绍成为专业黑客必须学习的十个方面的知识,希望能为迷惘中的你指明方向。 一、基本的计算机知识 把它列为第一条,相信很多人肯定会觉得不以为…

Java虚拟机快速入门 | JVM引言、JVM内存结构、直接内存

目录 一:JVM引言 1. 什么是 JVM ? 2. 常见的 JVM 3. 学习路线 二:JVM内存结构 1. 程 序 计 数 器(PC Register) 2. 虚 拟 机 栈(JVM Stacks) 3. 本 地 方 法 栈(Native Method Stacks&…

Vscode C++环境配置

多文件编译 打开设置搜索coderunner 找到Executor Map 加入-I目录名 目录名/*.cpp 调试 点击调试以后会产生tasks.json文件,加入链接文件和库文件

map用法以及特殊值的情况

map用法以及特殊值的情况 一、map用法的说明 map(callbackFn, thisArg); // callbackFn回调函数,thisArg可选 callbackFn是个回调函数,该回调函数的参数按照顺序为element(当前正在处理的元素),index(正…

WPF MaterialDesign 初学项目实战(1)首页搭建

前言 最近在学WPF,由于人比较烂,有一个星期没怎么动代码了。感觉有点堕落。现在开始记录WPF项目,使用MaterialDesignInXamlToolkit。 环境搭建 如果没下载MaterialDesign 的源码 github源码运行 在Nuget里面引入MaterialDesign Materia…

数字孪生技术在环境保护领域怎样应用?

近年来,环境保护成为全球范围内的热点话题,各国都在积极探索创新的解决方案。其中,数字孪生技术的出现为环境保护带来了全新的机遇和挑战。数字孪生技术将物理世界与数字世界相结合,通过精确的模拟和实时数据分析,为环…

华为ensp 防火墙的基础配置

拓扑图: [FW3-zone-isp1]set priority 12 #配置防火墙优先级 步骤一 #首先进入防火墙需要输入默认账号和密码,必须修改密码。 [USG6000V1] undo in en #关闭提示。 #先配置ip。 [USG6000V1]ip route-static 0.0.0.0 0.0.0.0 64.1.1.10 #配置去往外网的默…

【Redis】Redisson入门以及Redisson可重入锁的lua脚本实现

目录 一、Redisson介绍 二、Redisson的入门 1、引入依赖 2、配置客户端 3、使用锁 三、Redisson可重入锁的原理 1、原理 2、实现 3、lua脚本保证原子性 1.获取锁 2.释放锁 一、Redisson介绍 在之前的文章里我们通过redis中的setn实现了一个简单的分布式锁以及解决了…

远程协助软件推荐,有哪些远程协助工具?

Win10、11自带远程协助工具-快速助手 Win10、11的快速助手使用非常简单。只要在左下角的搜索框搜索一下就可以找到了。 我们都知道,Windows带有远程桌面RDP功能,而快速助手是通过Windows的远程连接机制实现的。所以在使用前,被控端需要开启系…

谈薪谈蹦了,阿里HR说我不配21K....

好家伙,这奇葩事可真是多,前两天和粉丝聊天,他说前段时间面试阿里的测开岗,最后和面试官干起来了。 我问他为什么,他说没啥,就觉得面试官太装了,我说要24K,他说太高了,说…

Kyligence Zen 产品体验——超好用指标平台一站式体验教程

目录 背景介绍Kyligence Zen介绍上手指南数据概览可视化图表 自定义数据新建表新建视图 指标体验目标仪表盘集成优点个人建议体验总结每文一语 背景介绍 在数字化建设初期,许多企业主要采用基于商业智能(BI)报表的方式来处理数据&#xff0c…

杨红春没有“雷军”,良品铺子“高端”之路焦虑

文 | 螳螂观察 作者 | 图霖 如果休闲零食赛道要评一个六边形战士,良品铺子绝对是个不错的候选人。 尽管搭乘电商的风头起势,但得益于早期线下开店的经验,成功实现了两条腿走路。最新年报显示,其2022年线上收入占比为50.42%&…

《统计学习方法》——隐马尔可夫模型(上)

引言 隐马尔可夫模型(Hidden Markov Model,HMM)是描述隐藏的马尔可夫链随机生成观测数据过程的模型。 前置知识 马尔可夫链 马尔可夫链(Markov chain)又称离散时间马尔可夫链,使用 t t t来表示时刻,用 X t X_t Xt​来表示在时刻 t t t链的状态&#…

( 位运算 ) 338. 比特位计数 ——【Leetcode每日一题】

❓338. 比特位计数 难度&#xff1a;简单 给你一个整数 n &#xff0c;对于 0 < i < n 中的每个 i &#xff0c;计算其二进制表示中 1 的个数 &#xff0c;返回一个长度为 n 1 的数组 ans 作为答案。 示例 1&#xff1a; 输入&#xff1a;n 2 输出&#xff1a;[0,1,…

JavaScript变量声明

声明变量三个var let和const 1.首先var先排除&#xff0c;老派写法&#xff0c;问题很多&#xff0c;可以淘汰掉… 2.const优先&#xff0c;尽量使用const,原因&#xff1a; &#xff08;1&#xff09;const语义化更好 &#xff08;2&#xff09;很多变量声明的时候就知道它不会…

中本聪思想精髓难以领悟?Web3实际上还在“幻想”之中?

Web3概念是不错&#xff0c;有人说它是下一代互联网&#xff0c;有人说它是NFT和元宇宙等未来应用的基础设施。然而理论炒得火热&#xff0c;但却仍不见像ChatGPT一样能引爆市场的杀手级应用出现。 原因在于&#xff0c;当前的Web3概念是对中本聪思想的不断概括和提炼&#xff…

21 KVM管理虚拟机-在线修改虚拟机配置

文章目录 21 KVM管理虚拟机-在线修改虚拟机配置21.1 概述21.2 操作步骤 21 KVM管理虚拟机-在线修改虚拟机配置 21.1 概述 虚拟机创建之后用户可以修改虚拟机的配置信息&#xff0c;称为在线修改虚拟机配置。在线修改配置以后&#xff0c;新的虚拟机配置文件会被持久化&#x…

高通410 随身WIFI刷入Debian系统(玩法合集)

引言 刚接触到这个项目是在b站上&#xff0c;刷到一位UP主的视频&#xff1a;https://b23.tv/xAFWiTF 其实现了在搭载高通410芯片的随身WIFI烧录linux系统&#xff0c;并在上面部署了chatGPT-Next网站服务。 本人参考的教程链接和其教程所有工具&#xff1a;https://pan.bai…

域名历史查询-免费批量域名历史快照注册时间查询软件

域名历史查询 域名历史查询是指通过查询工具&#xff0c;查询一个域名在过去的历史记录&#xff0c;包括注册时间、过期时间、更改记录、备案信息、WHOIS信息、IP记录、Alexa排名、流量统计等方面。通过查询域名的历史信息&#xff0c;研究者可以了解域名过去的状态&#xff0…