Ajax中的axios

既然提到Ajax,那就先来说一说什么是Ajax吧

关于Ajax

Ajax的定义

Asynchronous JavaScript And XML:异步的JavaScript和XML。

反正就是一句话总结:

使用XML HttpRequest 对象与服务器进行通讯。

        AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。(这一句话很好的诠释了异步的概念)

无需多言,开始正题

关于axios

什么是axios

Axios 是一个基于Promise的HTTP 客户端,适用于node.js和浏览器。它是同构的(即它可以使用同一套代码运行在浏览器和 nodejs 中)。在服务器端它使用原生的 node.js  http模块,在客户端(浏览器)它使用 XMLHttpRequests。

特性

当然,下面是从官网上找的东西

使用

导入

        我最常用的方法是直接导入地址

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
请求方法

这是在学习过程中做的一些小总结,其实最常用的是get和post方法

其实这两个最大的区别就是在请求的数据,缓存和安全性的区别

这算是整体一点的,大总结,这四个方法的区别

get

post

put

delete

描述

查看

创建

更新

删除

定义

从指定资源请求数据

向指定资源提交要处理的数据

更新指定资源的全部内容

删除指定资源

请求格式

参数在 URL 中

数据在请求体中

数据在请求体中

通过 URL 指定资源标识符

对服务器性能的影响

较小

较大

较大

较大

是否适用对同一个资源进行多次操作

可查询

应用场景

获取网页、查询数据

创建新资源

更新已存在资源(完整更新)

删除已存在资源

优点

可以被缓存和浏览器保存。

对服务器性能的影响较小。

可以提交比 GET 更大的数据量。

相对更安全,因为请求参数不会被包含在 URL 中。

可以更新指定的资源。

可以永久删除指定的资源。

这是最一开始学习Ajax时做的一个思维导图

语法
axios({
    url:"目标资源地址/要访问的后端接口地址",
    method:"请求方法",    // 请求的方法,GET可以省略(不区分大小写)
    data/params:{    // data是提交的数据
        参数名1:值1,
        参数名2:值2
    }
    // 使用回调函数
}).then((result)=>{
    对服务器返回的数据进行处理
})

前提要知道,

如何使用URL查找对应参数:

使用URL查询参数的作用:浏览器提供给服务器额外信息,获取对应的数据。

而相对应的使用axios查询:
就是使用params参数进行查询,携带参数名和值

例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width,
		initial-scale=1.0">
		<title>axios——get</title>

		<style type="text/css">
			#dv {
				border: 1px solid pink;
			}
		</style>
	</head>
	<body>
		<h1>axios_get</h1>
		<form action="javascript:;" class="example-form">
			<input type="text" name="name" id="name">
			<br>
			<input type="text" name="text1" id="text1">
			<br>
			<input type="button" class="btn" id="btn" value="提交">
		</form>
		<div id="dv"></div>
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
		<script>
			btn.onclick = function(){
				var n = document.getElementById('name').value
				var t = document.getElementById('text1').value
				console.log(n);
				console.log(t);
				axios({
					url: 'http://localhost:8080/getAjaxTest',
					method: 'GET',
					params: {
						name: n,
						text1: t
					}
				}).then(result => {
					console.log(result);
					console.log(result.data);
					var p = document.createElement("p");
					p.appendChild(document.createTextNode(result.data));
					var ps = document.getElementById("dv").getElementsByTagName("p");
					// +的优先级比?高,所以要加括号
					new Function("p", "ps", 'document.getElementById("dv").' + (ps[0] ?
						"insertBefore(p, ps[0])" : "appendChild(p)"))(p, ps);
				}).catch(error => {
					console.log(error);
				});

			}
		</script>
	</body>
</html>

就会由于使用params的方式,会从网络中显示出来,(如果不清楚,可以看下面的查找错误

主要可以看这里的思路和结构,其实这里也有一个知识点:

在 params的参数中,如果参数名和值一样,可以只写一个:

params: {
    name,    // 当参数名和值都为name
    text1
}

错误处理

在then方法的后面,通过点语法调用catch方法,传入回调函数并定义参数

axios({
    // 请求选项
}).then(result=>{
    // 处理数据
}).catch(error=>{
    // 处理错误
})

在哪用:

注册账号时,重复注册时通过弹窗提示用户错误原因

查找错误:

这就是我们需要了解的HTTP协议--请求报文和响应报文

请求报文:

响应报文:

例:

还拿上一个我的代码举例:

这是点击提交后的页面效果

接下来我们看提交结果的内部是什么样的

在这里可以明显看出来哪里是响应哪里是请求

算了还是用edge吧

请求报文在标头那里

所以可以依据这些查看是客户端还是服务端的错误

最后一些需要注意的点

既然最开始提到了params和data,那他们有什么区别呢

比较项目

data 参数

params 参数

传输方式

放在请求体中传输

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

使用场景

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

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

数据大小限制

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

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

安全性

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

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

就先说这些吧,其他的如果什么时候想起来了,可能会继续补充(虽然可能性不大)

如果文章中有什么错误,欢迎在评论区提出。

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

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

相关文章

60.基于SSM的个人网站的设计与实现(项目 + 论文)

项目介绍 本站是一个B/S模式系统&#xff0c;个人网站是在MySQL中建立数据表保存信息&#xff0c;运用SSMVue框架和Java语言编写。并按照软件设计开发流程进行设计实现充分保证系统的稳定性。系统具有界面清晰、操作简单&#xff0c;功能齐全的特点&#xff0c;使得基于SSM的网…

聊聊Flink:Flink的状态管理

一、Flink的状态是什么&#xff1f; 我们知道&#xff0c;Flink的一个算子可能会有多个子任务&#xff0c;每个子任务可能分布在不同的实例&#xff08;即slot&#xff09;上&#xff0c;我们可以把Flink的状态理解为某个算子的子任务在其当前实例上的一个变量&#xff0c;该变…

Idea 将多个module显示在同一个project

Idea 将多个maven项目显示在同一个project下 1、选择菜单 File-》New -》Module from Existing Sources -> 2、在弹出的界面选中对应的Module的pom.xml,然后点击OK按钮就行了 (弹出框上面也提示了Eclipse 项目选中.project文件&#xff1b;Maven 项目选中pom.xml; ) 最终显…

文件解析漏洞中间件(iis和Apache)

IIS解析漏洞 IIS6.X #环境 Windows Server 2003 在iis6.x中&#xff0c;.asp文件夹中的任意文件都会被当做asp文件去执行 在默认网站里创建一个a.asp文件夹并创建一个1.jpg写进我们的asp代码 <%now()%> #asp一句话 <%eval request("h")%> 单独创建一…

gitee别人仓库再上传自己仓库

一、新建一个自己的Git仓库 如果没有注册账号的朋友&#xff0c;可以先去注册一个Gitee的账号&#xff0c;用于管理自己的代码特别好用&#xff01;&#xff01;&#xff01; 接下来就是在gitee上新建一个自己的仓库&#xff0c;如下图所示 二、右建 Git Bush Here删除.git文件…

STM32F407 | Embedded IDE01 - vscode搭建Embedded IDE开发环境(支持JLINK、STLINK、DAPLINK)

导言 Embedded IDE官网:https://em-ide.com/docs/intro 我猜肯定有部分人使用SI Keil开发STM32项目&#xff0c;也有vscode Keil开发STM32程序。SI或vscode编写代码&#xff0c;然后切换Keil编译、下载、调试程序。有一段时间&#xff0c;我也是这么干的。但是&#xff0c;程…

算法的学习笔记—扑克牌顺子(牛客JZ61)

&#x1f600;前言 扑克牌顺子问题是一道趣味性与逻辑性兼备的题目&#xff0c;要求判断五张牌是否能组成顺子&#xff0c;其中大小王&#xff08;癞子&#xff09;可作为任意牌面。癞子的特殊性增加了问题的复杂度&#xff0c;也为解题提供了更多的可能性。通过这一问题&#…

记录遇到的一个新的变种JS加密

源 逻辑分析 混淆代码的目的是隐藏实际逻辑&#xff0c;增加逆向工程的难度。以下是对代码的逐步分析和解读。 第一部分&#xff1a;立即调用的函数表达式 (IIFE) (function () {var _K [...]; // 存储大量字符串的数组 })();​ 1. 目的&#xff1a;这个 IIFE 是整个代码运行…

LeetCode:104.二叉树的最大深度

跟着carl学算法&#xff0c;本系列博客仅做个人记录&#xff0c;建议大家都去看carl本人的博客&#xff0c;写的真的很好的&#xff01; 代码随想录 LeetCode&#xff1a;104.二叉树的最大深度 给定一个二叉树 root &#xff0c;返回其最大深度。 二叉树的 最大深度 是指从根节…

Fastjson <= 1.2.47 反序列化漏洞复现

0x01 前言 Fastjson 是一个 Java 语言编写的高性能功能完善的 JSON 库&#xff0c;可以将 Java 对象转换为 JSON 格式&#xff0c;也可以将 JSON 字符串转换为 Java 对象&#xff0c;在中国和美国使用较为广泛。 0x02 漏洞成因 Fastjson < 1.2.68 版本在处理反序列化对象时…

python:函数

一、嵌套函数 1.1概念 嵌套函数是定义在另一个函数作用域内部的函数。外部函数可以访问其内部声明的嵌套函数&#xff0c;而嵌套函数则可以访问其外部函数的作用域&#xff08;包括参数和局部变量&#xff09;。 1.2实例 一般情况下&#xff0c;我们是这样书写嵌套函数的&a…

Linux 下的 GPT 和 MBR 分区表详解

文章目录 Linux 下的 GPT 和 MBR 分区表详解一、分区表的作用二、MBR&#xff08;Master Boot Record&#xff09;1. **特点**2. **优点**3. **缺点**4. **适用场景** 三、GPT&#xff08;GUID Partition Table&#xff09;1. **特点**2. **优点**3. **缺点**4. **适用场景** 四…

基于单片机的智能婴儿床监护系统多功能婴儿床摇篮系统

功能介绍 以STM32单片机为控制核心蓝牙传输控制可以进行哭闹检测、尿床检测、音乐播放、语音提醒、哭闹时可以进行摇床有不同的模式自动模式和睡眠模式 实物可做&#xff0c;其他功能也可以 电路图 PCB 源代码 u8 Temperature_High; //室内温度高阈值 u8 Temperature_…

人工智能在VR展览中扮演什么角色?

人工智能&#xff08;AI&#xff09;在VR展览中扮演着多重关键角色&#xff0c;这些角色不仅增强了用户体验&#xff0c;还为展览的组织者提供了强大的工具。 接下来&#xff0c;由专业从事VR展览制作的圆桌3D云展厅平台为大家介绍AI在VR展览中的一些主要作用&#xff1a; 个性…

JVM和数据库面试知识点

JVM内存结构 主要有几部分&#xff1a;堆、栈、方法区和程序计数器 堆是JVM中最大的一块内存区域&#xff0c;用于存储对象实例&#xff0c;一般通过new创建的对象都存放在堆中。堆被所有的线程共享&#xff0c;但是它的访问时线程不安全的&#xff0c;通常通过锁的机制来保证线…

flask-admin+Flask-WTF 实现实现增删改查

背景&#xff1a; flask-adminflask-wtf在网上可以搜索到很多资料&#xff0c;但有价值的很少&#xff0c;或许是太简单&#xff0c;或者是很少人这么用&#xff0c;或者。。。&#xff0c;本文将作者近礼拜摸索到的一点经验分享出来&#xff0c;给自己做个记录。 材料&#…

C++简明教程(文章要求学过一点C语言)(3)

一、编程工具大揭秘——IDE 当我们准备踏入 C 编程的奇妙世界时&#xff0c;首先要认识一个重要的“魔法盒子”——集成开发环境&#xff08;IDE&#xff09;。IDE 就像是一个全能的编程工作室&#xff0c;它把我们写代码所需要的各种工具都整合到了一起&#xff0c;让编程这件…

STM32-笔记5-按键点灯(中断方法)

1、复制03-流水灯项目&#xff0c;重命名06-按键点灯&#xff08;中断法&#xff09; 在\Drivers\BSP目录下创建一个文件夹exti&#xff0c;在该文件夹下&#xff0c;创建两个文件exti.c和exti.h文件&#xff0c;并且把这两个文件加载到项目中&#xff0c;打开项目工程文件 加载…

实现 WebSocket 接入文心一言

目录 什么是 WebSocket&#xff1f; 为什么需要 WebSocket&#xff1f; HTTP 的局限性 WebSocket 的优势 总结&#xff1a;HTTP 和 WebSocket 的区别 WebSocket 的劣势 WebSocket 常见应用场景 WebSocket 握手过程 WebSocket 事件处理和生命周期 WebSocket 心跳机制 …

leetcode-80.删除有序数组的重复项II-day12

总结&#xff1a;不必过于死磕一道题目&#xff0c;二十分钟没做出来就可参考题解