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 指定资源标识符 |
对服务器性能的影响 | 较小 | 较大 | 较大 | 较大 |
是否适用对同一个资源进行多次操作 | 可查询 | 否 | 否 | 否 |
应用场景 | 获取网页、查询数据 | 创建新资源 | 更新已存在资源(完整更新) | 删除已存在资源 |
优点 | 可以被缓存和浏览器保存。 对服务器性能的影响较小。 | 可以提交比 相对更安全,因为请求参数不会被包含在 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 上可见,不适合传递敏感信息如密码等 |
就先说这些吧,其他的如果什么时候想起来了,可能会继续补充(虽然可能性不大)
如果文章中有什么错误,欢迎在评论区提出。