使用Ajax完成与后台服务器的数据交互

使用Ajax实现与后台服务器的数据交互

Ajax（异步的JavaScript和XML）

##注意Ajax为异步的

异步：即为不同步，同步相当于是我们在向后台发送请求的时候，必须返回一个响应数据才可以在浏览器下一步操作

（形象描述：一次聊天，两者进行一问一答）--》这就叫做同步

异步就是一者向另外一者发送信息，但是不等对方回复，可以继续向其发送信息

**Ajax与服务器之间进行交换数据，更新的是部分网页的信息，而不是将整个网页进行更新操作。**相当于在注册界面的时候，用户名，密码校验就算有一方未通过但是另外一方任然保留信息，而不需要像同步的那样去更新整个网页

Ajax的交互原理：

Ajax支持异步访问，网页局部刷新，主要依赖于核心对象：XMLHttpRequest，Ajax就是通过XMLHttpRequest对象发送异步请求的

通过axios事项Ajax的异步操作：

axios为链式编程，每调用一个方法返回一个对象

axios.get().then().catch().finally();

then方法执行在后台响应成功的时候

catch方法执行在出现Ajax请求异常的时候

finally方法不论请求响应成功与否都要执行的方法

导入axios：

html 复制代码

<script src="js/axios-0.18.0.js"></script>

使用axios对象调用函数向后台服务器发送ajax的get异步请求

javascript 复制代码

/*整体： 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异步请求

javascript 复制代码

<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>

综合案例：

html 复制代码

<!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>