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

更新时间：2025年07月09日 08:30:56 作者：星星不打輰

Ajax是一种在Web应用程序中实现前后端交互的技术,通过使用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：

<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 请求区分 $_SERVER[''HTTP_X_REQUESTED_WITH''] 小解
关于这个内容,很多人都有所了解.但从我搜索的内容来看,他们只是略微看一下,根本不知道里面到底是什么情况.
2011-06-06
ajax提交到java后台之后处理数据的实现
下面小编就为大家带来一篇ajax提交到java后台之后处理数据的实现。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-05-05
你的jquery ajax无效和你的jquery引入路径有关
当你发现你的jquery ajax无效的时候,不妨使用 fire bug调试一下，这时你会发现，提示"$"无效，为什么会有这种提示呢？可能是你引入jquery.js的路径有问题
2013-06-06
ajax的定时调用每5秒调用一次
这篇文章主要介绍了关于ajax的定时调用，本例为每5秒调用一次，大家可以根据自己的需求更改
2014-05-05
AJAX如何接收JSON数据示例介绍
如何使用AJAX返回JSON数据，就是dataType，当你设置json后返回的json字符串传递到客户端就是JSON对象了，示例如下，感兴趣的朋友可以参考下
2013-08-08
Ajax跨域登录请求未携带cookie错误解决
这篇文章主要为大家介绍了Ajax跨域登录请求未携带cookie错误解决,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2023-10-10
浅析IE针对Ajax请求结果的缓存问题
我们通过一个ASP.NET MVC应用来重现IE针对Ajax请求结果的缓存。在一个空ASP.NET MVC应用中我们定义了如下一个默认的HomeController，其中包含一个返回当前时间的Action方法GetCurrentTime。
2015-09-09
关于前端ajax请求的优雅方案（http客户端为axios）
这篇文章主要给大家介绍了关于前端ajax请求的优雅方案，本文http客户端为axios，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。
2017-12-12
Ajax四种元素的关系介绍
应用程序通过XMLHttpRequest对象以后台的方式从服务器获取数据，通过CSS和DOM改变界面的外观，感兴趣的朋友可以了解下本文
2014-01-01
ajax交互Struts2的action(客户端/服务器端)
本文为大家探讨下ajax交互Struts2的action并有客户端及服务器端代码，感兴趣的朋友可以参考下，希望对大家有所帮助
2013-08-08