文章目录
目录
- Ajax（异步的JavaScript和XML）
- 通过axios事项Ajax的异步操作：
- 总结
##注意Ajax为异步的
异步：即为不同步，同步相当于是我们在向后台发送请求的时候，必须返回一个响应数据才可以在浏览器下一步操作
（形象描述：一次聊天，两者进行一问一答）–》这就叫做同步
异步就是一者向另外一者发送信息，但是不等对方回复，可以继续向其发送信息
**Ajax与服务器之间进行交换数据，更新的是部分网页的信息，而不是将整个网页进行更新操作。**相当于在注册界面的时候，用户名，密码校验就算有一方未通过但是另外一方任然保留信息，而不需要像同步的那样去更新整个网页
Ajax的交互原理：
Ajax支持异步访问，网页局部刷新，主要依赖于核心对象：XMLHttpRequest，Ajax就是通过XMLHttpRequest对象发送异步请求的
axios为链式编程，每调用一个方法返回一个对象
axios.get().then().catch().finally();
then方法执行在后台响应成功的时候
catch方法执行在出现Ajax请求异常的时候
finally方法不论请求响应成功与否都要执行的方法
导入axios：
<script src="js/axios-0.18.0.js"></script>
使用axios对象调用函数向后台服务器发送ajax的get异步请求
/*整体： axios.get().then().catch().finally();*/
1）get()函数表示两后台服务器发送get请求，格式：
get(url?key=value&key=value...);===axios.get("/axiosDemo01Servlet?username=axios&password=1234")
2)then() 处理后台服务器响应的，格式：
then(function(接收响应数据的对象名){
处理响应的代码
});
then(function (resp){
console.log(resp);
})
后台响应数据：
resp={
data: 'axios实现ajax异步get请求,username=锁哥',
status: 200,
statusText: '',
headers: {…},
config: {…},
}
resp.data就可以获取 数据： axios实现ajax异步get请求,username=锁哥
3)catch() :处理异常
catch(function (error) {
console.log(error);
})
let person ={
username:"锁哥",
age:18
}
使用axios对象调用函数向后台服务器发送ajax的post异步请求
<script type="text/javascript">
//1.使用axios对象调用函数向后台服务器发送ajax异步请求
/*
整体： axios.post().then().catch().finally();
1）post()函数表示向后台服务器发送post请求，格式：
post(url,key=value&key=value...);===axios.post("/axiosDemo01Servlet","username=锁哥&password=1234")
2)then() 处理后台服务器响应的，格式：
then(function(接收响应数据的对象名){
处理响应的代码
});
其实在then函数中的回调函数我们可以使用es6的新语法，箭头函数：
(参数)=>{函数体}
格式：
then(resp=>{
函数体
});
*/
/*
说明：
1.http://localhost:8080/axiosDemo03Servlet 表示后台服务器地址
2.username=锁哥&password=1234：表示向后台携带的参数
*/
//使用es6的箭头函数简化上述回调函数的写法
// TODO：post方法的URL和请求参数之间用逗号分隔
axios.post("http://localhost:8080/axiosDemo03Servlet","username=Java&password=1234")
.then(Response=>{
//后台响应成功相应数据
console.log(Response);
})
.catch(error=>{
//后台响应失败相应数据
console.log(error);
console.log("响应失败");
})
.finally(()=>{
//无论响应成功还是失败都要执行的代码
console.log("无论响应成功还是失败都要执行的代码");
});
</script>
综合案例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="">
<input type="text" name="username" placeholder="请输入用户名" id="username">
<span id="usernameSpan"></span>
<input type="password" name="password" placeholder="请输入密码">
<button>提交</button>
</form>
<!-- 导入axios类库 -->
<script type="text/javascript" src="js/axios-0.18.0.js"></script>
<script type="text/javascript">
/*
说明：
1.后台地址url："http://localhost:8080/registerServlet"
2.后台需要根据key即参数名是username来获取前端提交的用户名数据
3.后台已经存在的用户名是："岩岩"
*/
//1、给用户名输入框绑定离焦事件
document.getElementById("username").onblur=()=>{
//2、获取用户名输入框中的数据
//this表示当前事件onblur的标签对象document.getElementById("username")
let usernameValue=document.getElementById('username').value;
// let usernameValue=this.value;
console.log(usernameValue);
//判断是否输入数据
//trim() 方法用于删除字符串的头尾空白符再返回字符串
if(usernameValue.trim()!=''){
//此逻辑表示用户名输入框中有数据
//3、向后台发送ajax请求
axios.post("http://localhost:8080/registerServlet","username="+usernameValue)
.then(resp => {
//4、处理响应数据
// console.log(resp);
if(resp.data){
document.getElementById("usernameSpan").innerHTML="用户名可用";
//通过JS代码实现css样式设置字体颜色为绿色
document.getElementById("usernameSpan").style.color="green";
}else{
document.getElementById("usernameSpan").innerHTML="用户名不可用";
//通过JS代码实现css样式设置字体颜色为红色
document.getElementById("usernameSpan").style.color="red";
}
});
}
}
</script>
</body>
</html>
到此这篇关于如何使用Ajax完成与后台服务器的数据交互的文章就介绍到这了,更多相关Ajax与后台服务器数据交互内容请搜索风君子博客以前的文章或继续浏览下面的相关文章希望大家以后多多支持风君子博客！
您可能感兴趣的文章:
- ajax交互Struts2的action(客户端/服务器端)
- Ajax中浏览器和服务器交互详解