java中Ajax與Axios的使用小結(jié)

更新時(shí)間：2024年02月01日 16:23:21 作者：是程序喵呀

在項(xiàng)目中我們經(jīng)常會(huì)遇到需要向請(qǐng)求頭中添加消息的場(chǎng)景,本文主要介紹了java中Ajax與Axios的使用小結(jié),文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

1，Ajax

1.1 概述

==AJAX (Asynchronous JavaScript And XML)：異步的 JavaScript 和 XML。==

我們先來(lái)說(shuō)概念中的 JavaScript 和 XML，JavaScript 表明該技術(shù)和前端相關(guān)；XML 是指以此進(jìn)行數(shù)據(jù)交換。而這兩個(gè)我們之前都學(xué)習(xí)過(guò)。

1.1.1 作用

AJAX 作用有以下兩方面：

與服務(wù)器進(jìn)行數(shù)據(jù)交換：通過(guò)AJAX可以給服務(wù)器發(fā)送請(qǐng)求，服務(wù)器將數(shù)據(jù)直接響應(yīng)回給瀏覽器。如下圖

我們先來(lái)看之前做功能的流程，如下圖：

如上圖，Servlet 調(diào)用完業(yè)務(wù)邏輯層后將數(shù)據(jù)存儲(chǔ)到域?qū)ο笾?，然后跳轉(zhuǎn)到指定的 jsp 頁(yè)面，在頁(yè)面上使用 EL表達(dá)式 和 JSTL 標(biāo)簽庫(kù)進(jìn)行數(shù)據(jù)的展示。

而我們學(xué)習(xí)了AJAX 后，就可以==使用AJAX和服務(wù)器進(jìn)行通信，以達(dá)到使用 HTML+AJAX來(lái)替換JSP頁(yè)面==了。如下圖，瀏覽器發(fā)送請(qǐng)求servlet，servlet 調(diào)用完業(yè)務(wù)邏輯層后將數(shù)據(jù)直接響應(yīng)回給瀏覽器頁(yè)面，頁(yè)面使用 HTML 來(lái)進(jìn)行數(shù)據(jù)展示。

異步交互：可以在==不重新加載整個(gè)頁(yè)面==的情況下，與服務(wù)器交換數(shù)據(jù)并==更新部分網(wǎng)頁(yè)==的技術(shù)，如：搜索聯(lián)想、用戶(hù)名是否可用校驗(yàn)，等等…

上圖所示的效果我們經(jīng)常見(jiàn)到，在我們輸入一些關(guān)鍵字（例如 奧運(yùn)）后就會(huì)在下面聯(lián)想出相關(guān)的內(nèi)容，而聯(lián)想出來(lái)的這部分?jǐn)?shù)據(jù)肯定是存儲(chǔ)在百度的服務(wù)器上，而我們并沒(méi)有看出頁(yè)面重新刷新，這就是 ==更新局部頁(yè)面== 的效果。再如下圖：

我們?cè)谟脩?hù)名的輸入框輸入用戶(hù)名，當(dāng)輸入框一失去焦點(diǎn)，如果用戶(hù)名已經(jīng)被占用就會(huì)在下方展示提示的信息；在這整個(gè)過(guò)程中也沒(méi)有頁(yè)面的刷新，只是在局部展示出了提示信息，這就是 ==更新局部頁(yè)面== 的效果。

1.1.2 同步和異步

知道了局部刷新后，接下來(lái)我們?cè)倭牧耐胶彤惒?

同步發(fā)送請(qǐng)求過(guò)程如下

瀏覽器頁(yè)面在發(fā)送請(qǐng)求給服務(wù)器，在服務(wù)器處理請(qǐng)求的過(guò)程中，瀏覽器頁(yè)面不能做其他的操作。只能等到服務(wù)器響應(yīng)結(jié)束后才能，瀏覽器頁(yè)面才能繼續(xù)做其他的操作。

異步發(fā)送請(qǐng)求過(guò)程如下

瀏覽器頁(yè)面發(fā)送請(qǐng)求給服務(wù)器，在服務(wù)器處理請(qǐng)求的過(guò)程中，瀏覽器頁(yè)面還可以做其他的操作。

1.2 快速入門(mén)

1.2.1 服務(wù)端實(shí)現(xiàn)

在項(xiàng)目的創(chuàng)建 com.itheima.web.servlet ，并在該包下創(chuàng)建名為 AjaxServlet 的servlet

@WebServlet("/ajaxServlet")
public class AjaxServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //1. 響應(yīng)數(shù)據(jù)
        response.getWriter().write("hello ajax~");
    }
?
    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doGet(request, response);
    }
}

1.2.2 客戶(hù)端實(shí)現(xiàn)

在 webapp 下創(chuàng)建名為 01-ajax-demo1.html 的頁(yè)面，在該頁(yè)面書(shū)寫(xiě) ajax 代碼

創(chuàng)建核心對(duì)象，不同的瀏覽器創(chuàng)建的對(duì)象是不同的

 var xhttp;
if (window.XMLHttpRequest) {
    xhttp = new XMLHttpRequest();
} else {
    // code for IE6, IE5
    xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

發(fā)送請(qǐng)求

//建立連接
xhttp.open("GET", "http://localhost:8080/ajax-demo/ajaxServlet");
//發(fā)送請(qǐng)求
xhttp.send();

獲取響應(yīng)

xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        // 通過(guò) this.responseText 可以獲取到服務(wù)端響應(yīng)的數(shù)據(jù)
        alert(this.responseText);
    }
};

完整代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
?
<script>
    //1. 創(chuàng)建核心對(duì)象
    var xhttp;
    if (window.XMLHttpRequest) {
        xhttp = new XMLHttpRequest();
    } else {
        // code for IE6, IE5
        xhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    //2. 發(fā)送請(qǐng)求
    xhttp.open("GET", "http://localhost:8080/ajax-demo/ajaxServlet");
    xhttp.send();
?
    //3. 獲取響應(yīng)
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            alert(this.responseText);
        }
    };
</script>
</body>
</html>

1.2.3 測(cè)試

在瀏覽器地址欄輸入 http://localhost:8080/ajax-demo/01-ajax-demo1.html ，在 01-ajax-demo1.html加載的時(shí)候就會(huì)發(fā)送 ajax 請(qǐng)求，效果如下

我們可以通過(guò) 開(kāi)發(fā)者模式 查看發(fā)送的 AJAX 請(qǐng)求。在瀏覽器上按 F12 快捷鍵

這個(gè)是查看所有的請(qǐng)求，如果我們只是想看異步請(qǐng)求的話(huà)，點(diǎn)擊上圖中 All 旁邊的 XHR，會(huì)發(fā)現(xiàn)只展示 Type 是 xhr 的請(qǐng)求。如下圖：

1.3 案例

需求：在完成用戶(hù)注冊(cè)時(shí)，當(dāng)用戶(hù)名輸入框失去焦點(diǎn)時(shí)，校驗(yàn)用戶(hù)名是否在數(shù)據(jù)庫(kù)已存在

1.3.1 分析

前端完成的邏輯

給用戶(hù)名輸入框綁定光標(biāo)失去焦點(diǎn)事件 onblur

發(fā)送 ajax請(qǐng)求，攜帶username參數(shù)

處理響應(yīng)：是否顯示提示信息
后端完成的邏輯

接收用戶(hù)名

調(diào)用service查詢(xún)User。此案例是為了演示前后端異步交互，所以此處我們不做業(yè)務(wù)邏輯處理

返回標(biāo)記

整體流程如下：

1.3.2 后端實(shí)現(xiàn)

在 com.ithiema.web.servlet 包中定義名為 SelectUserServlet 的servlet。代碼如下：

@WebServlet("/selectUserServlet")
public class SelectUserServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //1. 接收用戶(hù)名
        String username = request.getParameter("username");
        //2. 調(diào)用service查詢(xún)User對(duì)象，此處不進(jìn)行業(yè)務(wù)邏輯處理，直接給 flag 賦值為 true，表明用戶(hù)名占用
        boolean flag = true;
        //3. 響應(yīng)標(biāo)記
        response.getWriter().write("" + flag);
    }
?
    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doGet(request, response);
    }
}

1.3.3 前端實(shí)現(xiàn)

將 04-資料\1. 驗(yàn)證用戶(hù)名案例\1. 靜態(tài)頁(yè)面 下的文件整體拷貝到項(xiàng)目下 webapp 下。并在 register.html 頁(yè)面的 body 結(jié)束標(biāo)簽前編寫(xiě) script 標(biāo)簽，在該標(biāo)簽中實(shí)現(xiàn)如下邏輯

第一步：給用戶(hù)名輸入框綁定光標(biāo)失去焦點(diǎn)事件 onblur

//1. 給用戶(hù)名輸入框綁定 失去焦點(diǎn)事件
document.getElementById("username").onblur = function () {
    
}

第二步：發(fā)送 ajax請(qǐng)求，攜帶username參數(shù)

在 第一步 綁定的匿名函數(shù)中書(shū)寫(xiě)發(fā)送 ajax 請(qǐng)求的代碼

//2. 發(fā)送ajax請(qǐng)求
//2.1. 創(chuàng)建核心對(duì)象
var xhttp;
if (window.XMLHttpRequest) {
    xhttp = new XMLHttpRequest();
} else {
    // code for IE6, IE5
    xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
//2.2. 發(fā)送請(qǐng)求
xhttp.open("GET", "http://localhost:8080/ajax-demo/selectUserServlet);
xhttp.send();
?
//2.3. 獲取響應(yīng)
xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        //處理響應(yīng)的結(jié)果
    }
};

由于我們發(fā)送的是 GET 請(qǐng)求，所以需要在 URL 后拼接從輸入框獲取的用戶(hù)名數(shù)據(jù)。而我們?cè)?nbsp;第一步 綁定的匿名函數(shù)中通過(guò)以下代碼可以獲取用戶(hù)名數(shù)據(jù)

// 獲取用戶(hù)名的值
var username = this.value;  //this ： 給誰(shuí)綁定的事件，this就代表誰(shuí)

而攜帶數(shù)據(jù)需要將 URL 修改為：

xhttp.open("GET", "http://localhost:8080/ajax-demo/selectUserServlet?username="+username);

第三步：處理響應(yīng)：是否顯示提示信息

當(dāng) this.readyState == 4 && this.status == 200 條件滿(mǎn)足時(shí)，說(shuō)明已經(jīng)成功響應(yīng)數(shù)據(jù)了。

此時(shí)需要判斷響應(yīng)的數(shù)據(jù)是否是 "true" 字符串，如果是說(shuō)明用戶(hù)名已經(jīng)占用給出錯(cuò)誤提示；如果不是說(shuō)明用戶(hù)名未被占用清除錯(cuò)誤提示。代碼如下

//判斷
if(this.responseText == "true"){
    //用戶(hù)名存在，顯示提示信息
    document.getElementById("username_err").style.display = '';
}else {
    //用戶(hù)名不存在 ，清楚提示信息
    document.getElementById("username_err").style.display = 'none';
}

綜上所述，前端完成代碼如下：

//1. 給用戶(hù)名輸入框綁定 失去焦點(diǎn)事件
document.getElementById("username").onblur = function () {
    //2. 發(fā)送ajax請(qǐng)求
    // 獲取用戶(hù)名的值
    var username = this.value;
?
    //2.1. 創(chuàng)建核心對(duì)象
    var xhttp;
    if (window.XMLHttpRequest) {
        xhttp = new XMLHttpRequest();
    } else {
        // code for IE6, IE5
        xhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    //2.2. 發(fā)送請(qǐng)求
    xhttp.open("GET", "http://localhost:8080/ajax-demo/selectUserServlet?username="+username);
    xhttp.send();
?
    //2.3. 獲取響應(yīng)
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            //alert(this.responseText);
            //判斷
            if(this.responseText == "true"){
                //用戶(hù)名存在，顯示提示信息
                document.getElementById("username_err").style.display = '';
            }else {
                //用戶(hù)名不存在 ，清楚提示信息
                document.getElementById("username_err").style.display = 'none';
            }
        }
    };
}

2，axios

Axios 對(duì)原生的AJAX進(jìn)行封裝，簡(jiǎn)化書(shū)寫(xiě)。

Axios官網(wǎng)是：https://www.axios-http.cn

2.1 基本使用

axios 使用是比較簡(jiǎn)單的，分為以下兩步：

引入 axios 的 js 文件

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

使用axios 發(fā)送請(qǐng)求，并獲取響應(yīng)結(jié)果

發(fā)送 get 請(qǐng)求

axios({
    method:"get",
    url:"http://localhost:8080/ajax-demo1/aJAXDemo1?username=zhangsan"
}).then(function (resp){
    alert(resp.data);
})

發(fā)送 post 請(qǐng)求

axios({
    method:"post",
    url:"http://localhost:8080/ajax-demo1/aJAXDemo1",
    data:"username=zhangsan"
}).then(function (resp){
    alert(resp.data);
});

axios() 是用來(lái)發(fā)送異步請(qǐng)求的，小括號(hào)中使用 js 對(duì)象傳遞請(qǐng)求相關(guān)的參數(shù)：

method 屬性：用來(lái)設(shè)置請(qǐng)求方式的。取值為 get 或者 post。
url 屬性：用來(lái)書(shū)寫(xiě)請(qǐng)求的資源路徑。如果是 get 請(qǐng)求，需要將請(qǐng)求參數(shù)拼接到路徑的后面，格式為： url?參數(shù)名=參數(shù)值&參數(shù)名2=參數(shù)值2。
data 屬性：作為請(qǐng)求體被發(fā)送的數(shù)據(jù)。也就是說(shuō)如果是 post 請(qǐng)求的話(huà)，數(shù)據(jù)需要作為 data 屬性的值。

then() 需要傳遞一個(gè)匿名函數(shù)。我們將 then() 中傳遞的匿名函數(shù)稱(chēng)為 ==回調(diào)函數(shù)==，意思是該匿名函數(shù)在發(fā)送請(qǐng)求時(shí)不會(huì)被調(diào)用，而是在成功響應(yīng)后調(diào)用的函數(shù)。而該回調(diào)函數(shù)中的 resp 參數(shù)是對(duì)響應(yīng)的數(shù)據(jù)進(jìn)行封裝的對(duì)象，通過(guò) resp.data 可以獲取到響應(yīng)的數(shù)據(jù)。

2.2 快速入門(mén)

2.2.1 后端實(shí)現(xiàn)

定義一個(gè)用于接收請(qǐng)求的servlet，代碼如下：

@WebServlet("/axiosServlet")
public class AxiosServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        System.out.println("get...");
        //1. 接收請(qǐng)求參數(shù)
        String username = request.getParameter("username");
        System.out.println(username);
        //2. 響應(yīng)數(shù)據(jù)
        response.getWriter().write("hello Axios~");
    }
?
    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        System.out.println("post...");
        this.doGet(request, response);
    }
}

2.2.2 前端實(shí)現(xiàn)

引入 js 文件

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

發(fā)送 ajax 請(qǐng)求

get 請(qǐng)求

axios({
    method:"get",
    url:"http://localhost:8080/ajax-demo/axiosServlet?username=zhangsan"
}).then(function (resp) {
    alert(resp.data);
})

post 請(qǐng)求

axios({
    method:"post",
    url:"http://localhost:8080/ajax-demo/axiosServlet",
    data:"username=zhangsan"
}).then(function (resp) {
    alert(resp.data);
})

整體頁(yè)面代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
?
<script src="js/axios-0.18.0.js"></script>
<script>
    //1. get
   /* axios({
        method:"get",
        url:"http://localhost:8080/ajax-demo/axiosServlet?username=zhangsan"
    }).then(function (resp) {
        alert(resp.data);
    })*/
?
    //2. post  在js中{} 表示一個(gè)js對(duì)象，而這個(gè)js對(duì)象中有三個(gè)屬性
    axios({
        method:"post",
        url:"http://localhost:8080/ajax-demo/axiosServlet",
        data:"username=zhangsan"
    }).then(function (resp) {
        alert(resp.data);
    })
</script>
</body>
</html>

2.3 請(qǐng)求方法別名

為了方便起見(jiàn)， Axios 已經(jīng)為所有支持的請(qǐng)求方法提供了別名。如下：

get 請(qǐng)求： axios.get(url[,config])
delete 請(qǐng)求： axios.delete(url[,config])
head 請(qǐng)求： axios.head(url[,config])
options 請(qǐng)求： axios.option(url[,config])
post 請(qǐng)求：axios.post(url[,data[,config])
put 請(qǐng)求：axios.put(url[,data[,config])
patch 請(qǐng)求：axios.patch(url[,data[,config])

而我們只關(guān)注 get 請(qǐng)求和 post 請(qǐng)求。

入門(mén)案例中的 get 請(qǐng)求代碼可以改為如下：

axios.get("http://localhost:8080/ajax-demo/axiosServlet?username=zhangsan").then(function (resp) {
    alert(resp.data);
});

入門(mén)案例中的 post 請(qǐng)求代碼可以改為如下：

axios.post("http://localhost:8080/ajax-demo/axiosServlet","username=zhangsan").then(function (resp) {
    alert(resp.data);
})

到此這篇關(guān)于java中Ajax與Axios的使用小結(jié)的文章就介紹到這了,更多相關(guān)java Ajax與Axios內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

java中Ajax與Axios的使用小結(jié)

目錄

1，Ajax

1.1 概述

1.1.1 作用

1.1.2 同步和異步

1.2 快速入門(mén)

1.2.1 服務(wù)端實(shí)現(xiàn)

1.2.2 客戶(hù)端實(shí)現(xiàn)

1.2.3 測(cè)試

1.3 案例

1.3.1 分析

1.3.2 后端實(shí)現(xiàn)

1.3.3 前端實(shí)現(xiàn)

2，axios

2.1 基本使用

2.2 快速入門(mén)

2.2.1 后端實(shí)現(xiàn)

2.2.2 前端實(shí)現(xiàn)

2.3 請(qǐng)求方法別名

相關(guān)文章

最新評(píng)論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線(xiàn)小工具

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

java中Ajax與Axios的使用小結(jié)

目錄

1，Ajax

1.1 概述

1.1.1 作用

1.1.2 同步和異步

1.2 快速入門(mén)

1.2.1 服務(wù)端實(shí)現(xiàn)

1.2.2 客戶(hù)端實(shí)現(xiàn)

1.2.3 測(cè)試

1.3 案例

1.3.1 分析

1.3.2 后端實(shí)現(xiàn)

1.3.3 前端實(shí)現(xiàn)

2，axios

2.1 基本使用

2.2 快速入門(mén)

2.2.1 后端實(shí)現(xiàn)

2.2.2 前端實(shí)現(xiàn)

2.3 請(qǐng)求方法別名

相關(guān)文章

最新評(píng)論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線(xiàn)小工具

1，Ajax

2，axios