Ajax基础总结(思维导图+二维表)

一些话

刚开始学习Ajax的时候,感觉很模糊,但是好像学什么都是这样的,很正常,但是当你学习的时候要持续性敲代码,边敲代码其实就可以理解很多了。然后在最后的总结,其实做二维表之后,就可以区分好多相似的东西,做了思维导图之后就很容易把脑子里的东西串成一条线。

所以说,建议大家总结啦

思维导图

这些是总的导图

这是抽取之后的

二维表

使用axios和promise对象实现Ajax有什么区别

axios 是由 promise 封装的一个 http 的库。

回调函数地狱的情况,可以使用Promise解决

比较项目

Axios 实现 Ajax

Promise 对象实现 Ajax(原生方式)

代码复杂度

较低,因为 Axios 已经封装了很多功能,代码简洁明了

较高,需要自己处理 XMLHttpRequest 的多个细节

功能丰富度

提供自动转换数据、拦截请求 / 响应、跨域支持等高级功能

主要实现基本的请求 - 响应功能,高级功能需自己实现

跨平台性

支持浏览器和 Node.js 环境

主要用于浏览器环境,在 Node.js 中需要做一些调整

对请求细节控制

相对较少,Axios 已经处理了很多底层细节

更多,可以深入定制请求的各个环节

await,async和Promise

下面一些图片我忘了从哪找到的了,如果有知道的欢迎在评论区说明

我的二维表

比较项目

async和await

Promise

定义

async用于声明异步函数,返回Promise对象;await只能async函数内使用,暂停函数执行直到Promise状态改变

表示尚未完成(或可能已完成)的异步操作的对象,有三种状态,表示异步操作最终的完成(或失败)以及其结果值

错误处理

在async函数中用try/catch块捕获await表达式中的错误

通过catch方法捕获Promise被reject后的错误

代码风格

让异步代码看起来更像同步代码,对于复杂异步流程(如多个异步操作顺序执行和错误处理)结构更清晰,减少嵌套

链式调用(then、catch等)可处理多个异步操作顺序和结果,但过多链式调用可能导致代码嵌套深、可读性差

相互关系

async函数返回Promise,await用于暂停async函数内部执行等待Promise状态改变,是基于Promise的语法糖

async和await基于Promise构建,用于更方便地处理Promise

get和post的区别

get

post

请求的目的

通常用于从服务器检索(获取)数据。它不会修改服务器上的数据。

通常用于向服务器发送数据(如提交表单)。它可能会导致服务器上的数据被修改。

安全性

GET 方法的参数会暴露在 URL 中

而 POST 方法的参数则放在请求体中,相对安全一些。

参数长度限制

GET 方法的参数长度有限制,对于只传输少量数据的请求比较适用

POST 方法没有参数长度限制,适合传输大量数据。

请求的数据

请求的数据(如果有的话)会附加到URL的查询字符串中,并以键值对的形式出现(例如,?key1=value1&key2=value2)。这意味着GET请求的数据长度是有限制的(由浏览器和服务器共同决定,但通常较短),且不适合传输敏感信息(因为URL可能会记录在浏览器历史、服务器日志等地方)。

请求的数据会放在请求体中发送,这意味着它可以传输大量数据,且不会受到URL长度的限制。POST请求更适合传输敏感信息,因为请求体通常不会在浏览器历史或服务器日志中记录。

缓存

GET 方法的请求会被浏览器缓存,多次请求相同的 URL 时,有可能直接读取缓存中的结果

请求通常不会被缓存,因为每次POST请求都可能导致服务器上的数据被修改。

使用场景

通常用于检索数据、查询数据库等不需要修改服务器数据的场景。

通常用于提交表单、上传文件、创建新资源等需要修改服务器数据的场景。

传参方式data 与 params 的区别

比较项目

data 参数

params 参数

传输方式

放在请求体中传输

通过 URL 进行传输,拼接在 URL 末尾

使用场景

适用于 POST、PUT、PATCH 等非 GET 请求,用于向服务器提交数据以创建、更新或修改资源

主要用于 GET 请求,让服务器根据参数筛选、排序或返回特定资源

数据大小限制

相对没有严格的类似 URL 长度那样的限制(实际受服务器配置等因素影响),更适合大量数据传输

受 URL 长度限制,过长 URL 可能导致请求失败

安全性

不在 URL 中显示数据,一定程度上保护隐私和安全性,适合传递敏感信息

数据在 URL 上可见,不适合传递敏感信息如密码等

同步和异步

比较项

同步

异步

是什么

按顺序依次执行任务,后一个任务等待前一个完成。(不等于阻塞)

不等待任务完成就执行其他任务。

为什么要用

逻辑简单,保证数据一致性。

提高性能和效率,提升用户体验。

在哪用

简单计算、顺序依赖强的业务逻辑。

网络请求、文件操作、定时器和事件处理。

怎么用

按正常函数调用顺序执行。

用回调函数或 Promise(JS)、async/await(其他语言)。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

structuredClone()与 lodash.cloneDeep与 JSON.parse JSON.stringify()拷贝对比

structuredClone()与 lodash.cloneDeep与 JSON.parse & JSON.stringify()拷贝对比

Vue02

前端最新Vue2Vue3基础入门到实战项目全套教程,自学前端vue就选黑马程序员,一套全通关!_哔哩哔哩_bilibilihttps://www.bilibili.com/video/BV1HV4y1a7n4?spm_id_from333.788.videopod.episodes&vd_source016213ecd945408976ff307a6bda30…

数据结构---图

图是一种较为复杂的非线性结构。 为啥说其较为复杂呢? 根据前面的内容,我们知道: 线性数据结构的元素满足唯一的线性关系,每个元素(除第一个和最后一个外)只有一个直接前趋和一个直接后继。树形数据结构的元素之间有着明显的层次…

FakeLocation 1.3.5 BETA 提示校园跑漏洞修复解决

任务一 作者对此又进行了更新,在本次更新中,我们依旧使用hookvip进行破解 本次的更新,使得包名强制写入更加严重,之前靠一些方法已经无法阻止appconfigs.xml的文件的修改,而且使得验证加强,和云端加强&…

在Ubuntu 20.04和ROS中使用RViz进行数据可视化:详解Fixed Frame参数的选择与应用

在Ubuntu 20.04和ROS中使用RViz进行数据可视化:详解Fixed Frame参数的选择与应用 在ROS的可视化工具RViz中,“Fixed Frame"是一个关键的全局选项,它设置了一个参考坐标系,用于解释和显示所有其他坐标系中的数据。通过您提供的…

夜神模拟器+Charles+postern+Mgisk+TrustMeAlready实现抓包

[实测有用]夜神模拟器CharlesposternMgiskTrustMeAlready实现抓包 PS:此贴仅做为技术交流,禁止非法用途。 1.初始化条件 A.安装MUMU模拟器安卓12版本 B.按图示选择,设置好代理端口8889 C.查看本机IP地址 D.导出证书,安装配置,暂时保存…

【零基础学习UDS诊断测试】——0x10测试用例设计

从0开始学习CANoe使用 从0开始学习车载测试 相信时间的力量 星光不负赶路者,时光不负有心人。 目录 1.概述 2.三个会话介绍 3.会话切换逻辑 4.会话响应格式 5.解析测试点 5.1. 0x10 5.1.1 具体用例设计 5.1.1.1 NRC否定响应码 6.详细用例展示 1.概述 主要基于诊断调查表介…

一键生成后端服务,MemFire Cloud重新定义开发效率

作为开发者,特别是独立开发者和小团队成员,大家都知道开发的最大难题之一就是搭建后端服务。要让一个应用从零开始,除了前端的开发工作外,还需要考虑数据库、接口、认证、存储等等一系列繁琐的后台工作。而MemFire Cloud这款神器&…

QT:信号和槽01

QT中什么是信号和槽 概念解释 在 Qt 中,信号(Signals)和槽(Slots)是一种用于对象间通信的机制。信号是对象发出的事件通知,而槽是接收并处理这些通知的函数。 例如,当用户点击一个按钮时&#…

抓包之查看websocket内容

写在前面 本文看下websocket抓包相关内容。 1:正文 websocket基础环境搭建参考这篇文章。 启动后,先看chrome的network抓包,这里我们直接使用is:running来过滤出websocket的请求: 可以清晰的看到发送的内容以及响应的内容。在…

java网络通信(三):TCP通信、实现客户端-服务端消息通信

目录 1、什么是 TCP协议? 2、代码实现TCP协议的一发一收 2.1、客户端 2.2、服务端 2.3 结果演示 3、代码实现TCP协议的多发多收 3.1 客户端 3.2 服务端 3.3 结果演示 简介:本文章主要是演示如何用java代码以及TCP协议实现网络通信,实…

java基础概念46-数据结构1

一、引入 List集合的三种实现类使用了不同的数据结构! 二、数据结构的定义 三、常见的数据结构 3-1、栈 特点:先进后出,后进先出。 java内存容器: 3-2、队列 特点:先进先出、后进后出。 栈VS队列-小结 3-3、数组 3-…

python: Treeview Pagination

# encoding: utf-8 # 版權所有 2024 ©塗聚文有限公司 # 許可資訊查看:言語成了邀功的功臣,還需要行爲每日來值班嗎? # 描述: Treeview Pagination # Author : geovindu,Geovin Du 塗聚文. # IDE : PyCharm 2023.1…

C# winform非常好用的图表开源控件Scottplot

wifnorm自带的chart控件功能和性能都不太行,所以在网上搜索到了Scottplot开源图表控件。根据自己需要,将已经试验使用过的用法记录在这里 winform建议使用版本 Scottplot包版本:4.1.71 这个版本在winform中可以以控件形式直接拖拉到窗体中使…

SQL面试50题

数据表关系图 数据表 CREATE TABLE student (id int(11) NOT NULL AUTO_INCREMENT,name varchar(255) NOT NULL,sex enum(female,male) NOT NULL,birth date NOT NULL,credit float(5,2) DEFAULT NULL,PRIMARY KEY (id) ) ENGINEInnoDB AUTO_INCREMENT25 DEFAULT CHARSETutf8;…

Redis(配置文件属性解析)

一、tcp-backlog深度解析 tcp-backlog是一个TCP连接的队列,主要用于解决高并发场景下客户端慢连接问题。配置文件中的“511”就是队列的长度,对联与TCP的三次握手有关,不同的linux内核,backlog队列中存放的元素(客户端…

Vue3 脚手架扩展

当 yarn dev 运行成功后,我们继续添加扩展 首先我们要安装一些依赖 其中的vue-router和vuex安装最新版的就行,因为项目是vue3 element-plus和less,less-loader最好按照我这个版本来下载 element-plus是一个vue常用的ui组件库 element-plus/…

TCP/IP协议簇自学笔记

摘抄于大学期间记录在QQ空间的一篇自学笔记,当前清理空间,本来想直接删除掉的,但是感觉有些舍不得,因此先搬移过来。 曾经,我只知道socket函数能进行网络间数据的通信,知道tcp/ip协议也是用来进行网络数据…

AI开发:逻辑回归 - 实战演练- 垃圾邮件的识别(二)

接上一篇AI开发:逻辑回归 - 实战演练- 垃圾邮件的识别(一) new_email 无论为什么文本,识别结果几乎都是垃圾邮件,因此我们需要对源码的逻辑进行梳理一下: 在代码中,new_email 无论赋值为何内容都被识别为…

字符串处理(二)

第1题 篮球比赛 查看测评数据信息 学校举行篮球比赛,请设计一个计分系统统计KIN、WIN两队分数,并输出分数和结果! 如果平分就输出‘GOOD’,否则输出获胜队名! 输入格式 输入数据共n1行, 第1行n&#xf…