如何使用Ajax完成與后臺服務(wù)器的數(shù)據(jù)交互詳解

更新時(shí)間：2025年07月09日 08:30:56 作者：星星不打輰

Ajax是一種在Web應(yīng)用程序中實(shí)現(xiàn)前后端交互的技術(shù),通過使用Ajax,前端頁面無需刷新即可與后端服務(wù)器進(jìn)行數(shù)據(jù)交換,這篇文章主要介紹了如何使用Ajax完成與后臺服務(wù)器的數(shù)據(jù)交互的相關(guān)資料,需要的朋友可以參考下

Ajax（異步的JavaScript和XML）

##注意Ajax為異步的

異步：即為不同步，同步相當(dāng)于是我們在向后臺發(fā)送請求的時(shí)候，必須返回一個(gè)響應(yīng)數(shù)據(jù)才可以在瀏覽器下一步操作

（形象描述：一次聊天，兩者進(jìn)行一問一答）–》這就叫做同步

異步就是一者向另外一者發(fā)送信息，但是不等對方回復(fù)，可以繼續(xù)向其發(fā)送信息

**Ajax與服務(wù)器之間進(jìn)行交換數(shù)據(jù)，更新的是部分網(wǎng)頁的信息，而不是將整個(gè)網(wǎng)頁進(jìn)行更新操作。**相當(dāng)于在注冊界面的時(shí)候，用戶名，密碼校驗(yàn)就算有一方未通過但是另外一方任然保留信息，而不需要像同步的那樣去更新整個(gè)網(wǎng)頁

Ajax的交互原理：

Ajax支持異步訪問，網(wǎng)頁局部刷新，主要依賴于核心對象：XMLHttpRequest，Ajax就是通過XMLHttpRequest對象發(fā)送異步請求的

通過axios事項(xiàng)Ajax的異步操作：

axios為鏈?zhǔn)骄幊蹋空{(diào)用一個(gè)方法返回一個(gè)對象

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

then方法執(zhí)行在后臺響應(yīng)成功的時(shí)候

catch方法執(zhí)行在出現(xiàn)Ajax請求異常的時(shí)候

finally方法不論請求響應(yīng)成功與否都要執(zhí)行的方法

導(dǎo)入axios：

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

使用axios對象調(diào)用函數(shù)向后臺服務(wù)器發(fā)送ajax的get異步請求

/*整體： axios.get().then().catch().finally();*/
          1）get()函數(shù)表示兩后臺服務(wù)器發(fā)送get請求，格式：
              get(url?key=value&key=value...);===axios.get("/axiosDemo01Servlet?username=axios&password=1234")
          2)then() 處理后臺服務(wù)器響應(yīng)的，格式：
                then(function(接收響應(yīng)數(shù)據(jù)的對象名){
                    處理響應(yīng)的代碼
                });

                then(function (resp){
                 console.log(resp);
             })
             后臺響應(yīng)數(shù)據(jù)：
                resp={
                        data: 'axios實(shí)現(xiàn)ajax異步get請求,username=鎖哥',
                        status: 200,
                        statusText: '',
                        headers: {…},
                        config: {…},
                    }

                resp.data就可以獲取 數(shù)據(jù)： axios實(shí)現(xiàn)ajax異步get請求,username=鎖哥

          3)catch() :處理異常
                catch(function (error) {
                    console.log(error);
                })

                let person ={
                    username:"鎖哥",
                    age:18
                }

使用axios對象調(diào)用函數(shù)向后臺服務(wù)器發(fā)送ajax的post異步請求

<script type="text/javascript">
    //1.使用axios對象調(diào)用函數(shù)向后臺服務(wù)器發(fā)送ajax異步請求
    /*
        整體： axios.post().then().catch().finally();
          1）post()函數(shù)表示向后臺服務(wù)器發(fā)送post請求，格式：
              post(url,key=value&key=value...);===axios.post("/axiosDemo01Servlet","username=鎖哥&password=1234")
          2)then() 處理后臺服務(wù)器響應(yīng)的，格式：
                then(function(接收響應(yīng)數(shù)據(jù)的對象名){
                    處理響應(yīng)的代碼
                });
            其實(shí)在then函數(shù)中的回調(diào)函數(shù)我們可以使用es6的新語法，箭頭函數(shù)：
                (參數(shù))=>{函數(shù)體}
            格式：
            then(resp=>{
                    函數(shù)體
            });
     */
    /*
             說明：
                1.http://localhost:8080/axiosDemo03Servlet 表示后臺服務(wù)器地址
                2.username=鎖哥&password=1234：表示向后臺攜帶的參數(shù)
    */
    //使用es6的箭頭函數(shù)簡化上述回調(diào)函數(shù)的寫法
    // TODO：post方法的URL和請求參數(shù)之間用逗號分隔
    axios.post("http://localhost:8080/axiosDemo03Servlet","username=Java&password=1234")
        .then(Response=>{
            //后臺響應(yīng)成功相應(yīng)數(shù)據(jù)
            console.log(Response);
        })
        .catch(error=>{
            //后臺響應(yīng)失敗相應(yīng)數(shù)據(jù)
            console.log(error);
            console.log("響應(yīng)失敗");
        })
        .finally(()=>{
            //無論響應(yīng)成功還是失敗都要執(zhí)行的代碼
            console.log("無論響應(yīng)成功還是失敗都要執(zhí)行的代碼");
        });

</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>
<!--  導(dǎo)入axios類庫  -->
<script type="text/javascript" src="js/axios-0.18.0.js"></script>
<script type="text/javascript">
    /*
        說明：
            1.后臺地址url："http://localhost:8080/registerServlet"
            2.后臺需要根據(jù)key即參數(shù)名是username來獲取前端提交的用戶名數(shù)據(jù)
            3.后臺已經(jīng)存在的用戶名是："巖巖"
     */
    //1、給用戶名輸入框綁定離焦事件
    document.getElementById("username").onblur=()=>{
        //2、獲取用戶名輸入框中的數(shù)據(jù)
        //this表示當(dāng)前事件onblur的標(biāo)簽對象document.getElementById("username")
        let usernameValue=document.getElementById('username').value;
        // let usernameValue=this.value;
        console.log(usernameValue);
        //判斷是否輸入數(shù)據(jù)
        //trim() 方法用于刪除字符串的頭尾空白符再返回字符串
        if(usernameValue.trim()!=''){
           //此邏輯表示用戶名輸入框中有數(shù)據(jù)
            //3、向后臺發(fā)送ajax請求
            axios.post("http://localhost:8080/registerServlet","username="+usernameValue)
            .then(resp => {
                //4、處理響應(yīng)數(shù)據(jù)
                // console.log(resp);
                if(resp.data){
                    document.getElementById("usernameSpan").innerHTML="用戶名可用";
                    //通過JS代碼實(shí)現(xiàn)css樣式設(shè)置字體顏色為綠色
                    document.getElementById("usernameSpan").style.color="green";
                }else{
                    document.getElementById("usernameSpan").innerHTML="用戶名不可用";
                    //通過JS代碼實(shí)現(xiàn)css樣式設(shè)置字體顏色為紅色
                    document.getElementById("usernameSpan").style.color="red";
                }
            });
        }
    }
</script>
</body>

</html>