使用Ajax实现与后台服务器的数据交互
Ajax（异步的JavaScript和XML）
##注意Ajax为异步的
异步：即为不同步，同步相当于是我们在向后台发送请求的时候，必须返回一个响应数据才可以在浏览器下一步操作
（形象描述：一次聊天，两者进行一问一答）–》这就叫做同步
异步就是一者向另外一者发送信息，但是不等对方回复，可以继续向其发送信息
**Ajax与服务器之间进行交换数据，更新的是部分网页的信息，而不是将整个网页进行更新操作。**相当于在注册界面的时候，用户名，密码校验就算有一方未通过但是另外一方任然保留信息，而不需要像同步的那样去更新整个网页
Ajax的交互原理：
Ajax支持异步访问，网页局部刷新，主要依赖于核心对象：XMLHttpRequest，Ajax就是通过XMLHttpRequest对象发送异步请求的
通过axios事项Ajax的异步操作：
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>
<br>
<input type="password" name="password" placeholder="请输入密码"> <br>
<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>