Ajax中的axios

news/2024/12/23 11:50:30 标签: ajax, 前端, javascript

既然提到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时做的一个思维导图

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

前提要知道,

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

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

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

例:

javascript"><!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的参数中,如果参数名和值一样,可以只写一个:

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

错误处理

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

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

在哪用:

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

查找错误:

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

请求报文:

响应报文:

例:

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

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

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

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

算了还是用edge吧

请求报文在标头那里

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

最后一些需要注意的点

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

比较项目

data 参数

params 参数

传输方式

放在请求体中传输

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

使用场景

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

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

数据大小限制

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

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

安全性

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

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

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

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


http://www.niftyadmin.cn/n/5796584.html

相关文章

深入理解 HTTP HEAD 请求:节省带宽、提高效率的秘密武器

序言&#xff1a; 在HTTP协议中&#xff0c;HEAD请求是一种非常实用且被忽略的请求方法。与GET请求相似&#xff0c;HEAD请求同样从服务器获取资源&#xff0c;但与GET请求的最大不同之处在与&#xff0c;HEAD请求 仅返回响应的头部信息&#xff0c;不包含内容提。这使得HEAD请…

移除0 - 简单

************* c topic&#xff1a;27. 移除元素 - 力扣&#xff08;LeetCode&#xff09; ************* Last case I moved all 0 in the end, and this one is to delete the zero: inspect the last projests code: 移动0 - 简单-CSDN博客文章浏览阅读82次。【代码】…

2. FPGA基础了解--全局网络

前言 引入扇出的概念介绍FPGA中的全局网络为后续时序优化埋下伏笔 扇出 在FPGA设计中扇出是一个重要的概念&#xff0c;所谓的扇出就是一个控制信号所能控制的数据信号的总个数&#xff0c;比如ctrl信号的扇出就是16 reg ctrl 0; reg [15:0] out 0; always (posedge c…

【多模态】swift-3框架使用

swift-3框架使用 前言swift3安装swift训练swift cli推理swift vllm python推理 前言 接前面&#xff0c;swift3相比于swift2做了大升级&#xff0c;很多swift2能使用的在3里面error改改改…但是效率确实大升级&#xff0c;推理速度快了很多&#xff5e;&#xff5e;&#xff5e…

【数字化】华为数字化转型架构蓝图-2

目录 1、客户联结的架构思路 1.1 ROADS体验设计 1.2 具体应用场景 1.3 统一的数据底座 1.4 案例与成效 2、一线作战平台的架构思路 2.1 核心要素 2.2 关键功能 2.3 实施路径 2.4 案例与成效 3、能力数字化的架构思路 3.1 能力数字化的核心目标 3.2 能力数字化的实…

汽车IVI中控开发入门及进阶(44):杰发科智能座舱芯片

概述: 杰发科技自成立以来,一直专注于汽车电子芯片及相关系统的研发与设计。 产品布局: 合作伙伴: 杰发科技不断提升产品设计能力和产品工艺,确保产品达 到更高的质量标准。目前杰发科技已通过ISO9001质 量管理体系与CMMIL3认证。 杰发科技长期合作的供应商(芯片代工厂、…

微服务分布式(二、注册中心Consul)

首先我们需要安装consul,到官网下载Consul Install | Consul | HashiCorp Developer 在解压的consul目录下 执行启动命令 consul agent -dev 启动服务 -dev表示开发模式 -server表示服务模式 启动后在浏览器访问8500端口http://localhost:8500/可以看到服务管理界面 项目…

【模块系列】STM321.69TFT屏幕

前言 在翻翻自己的器件盒的时候&#xff0c;发现这块好久之前买的TFT屏了&#xff0c;想起还没有用STM32点亮过&#xff0c;手头上正好有立创的梁山派STM32F4&#xff0c;就试着按照网上的文章教程顺便移植个LVGL看看&#xff0c;然后就有了就本文。 代码工程命名的是LvglDemo&…