异步请求
-
异步请求:只多线程同时可以做几件事情,可以实现
局部刷新
-
异步请求: 指客户端由主线程负责页面展示相关, 由子线程负责发请求获取数据,这样的话主线程只负责展示页面相关,页面内容就不需要清空, 子线程得到数据后可以在原页面的基础上做改动,这种就叫做页面的局部刷新.
-
同步请求:一个线程只能做一件事情,只能实现
整体刷新
-
同步请求: 指客户端只有一个主线程, 主线程既要负责页面展示相关,也需要负责发请求获取数据,由于只有一个线程,当获取数据时不能同时显示着内容(清空页面), 当服务器把数据响应回来之后再次显示内容, 这样的话只能实现页面的整体改变(整体刷新),无法实现页面的局部刷新.
第一步
通过Axios框架发出异步请求
Axios框架是一个前端js框架, 使用此框架的话需要在html页面中引入 axios.js文件
<!--引入axios框架-->
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
第二步
<!--引入Vue框架-->
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
具体实现:
<div>
<input type="text" placeholder="用户名" v-model="user.username">
<input type="text" placeholder="密码" v-model="user.password">
<input type="text" placeholder="昵称" v-model="user.nickname">
<input type="button" value="注册" @click="reg()">
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
let v = new Vue({
el:"body>div",
data:{
user:{username:"",password:"",nickname:""}
},
methods:{
reg(){
//发出异步请求,response代表服务器响应对象
//response.data得到响应的ResultVO对象
axios.post("/v1/users/reg",v.user).then(function (response) {
if (response.data.code==1){
alert("注册成功")
location.href="/"
}else {
alert("用户名已存在")
}
})
}
}
})
</script>
Get和Post区别
localhost:8080/helloAxios?username=tomg&password=123456&nick=汤姆
- GET: 请求参数在请求地址的后面, 由于参数在地址中可见所以不能传递敏感信息, 参数大小有限制只能传递几k的数据
- 应用场景: 一般情况下查询请求都是用Get请求, 删除数据一般也使用get请求
- POST:请求参数是在请求体里面, 由于参数在请求体中,用户不可见所以可以传递敏感信息,没有大小的限制
- 应用场景: 因为参数是写在请求地址后面通过拼接的方式传递参数,如果参数较多推荐使用post请求, 参数中包含敏感信息时使用, 上传文件时使用