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

Axios和Ajax的區(qū)別是什么(詳細(xì)介紹)

 更新時(shí)間：2023年10月13日 11:04:23   作者：書(shū)啟秋楓  
ajax技術(shù)實(shí)現(xiàn)了局部數(shù)據(jù)的刷新,axios實(shí)現(xiàn)了對(duì)ajax的封裝,axios有的ajax都有,ajax有的axios不一定有,總結(jié)一句話就是axios是ajax,ajax不止axios,本文對(duì)Axios和Ajax的區(qū)別是什么給大家講解的非常詳細(xì),需要的朋友一起看看吧

一、Axios 和 Ajax 的區(qū)別

1、Axios是一個(gè)基于Promise的HTTP庫(kù)，而Ajax是對(duì)原生XHR的封裝；

2、Ajax技術(shù)實(shí)現(xiàn)了局部數(shù)據(jù)的刷新，而Axios實(shí)現(xiàn)了對(duì)ajax的封裝。

二、Axios 和 Ajax 的區(qū)別及優(yōu)缺點(diǎn)

Ajax：

1、什么是Ajax

Ajax是對(duì)原生XHR的封裝，為了達(dá)到我們跨越的目的，增添了對(duì)JSONP的支持。

異步的javascript和xml，ajax不是一門(mén)新技術(shù)，而是多種技術(shù)的組合，用于快速的創(chuàng)建動(dòng)態(tài)頁(yè)面，能夠?qū)崿F(xiàn)無(wú)刷新更新數(shù)據(jù)從而提高用戶體驗(yàn)。

2、Ajax的原理？

由客戶端請(qǐng)求ajax引擎，再由ajax引擎請(qǐng)求服務(wù)器，服務(wù)器作出一系列響應(yīng)之后返回給ajax引擎，由ajax引擎決定將這個(gè)結(jié)果寫(xiě)入到客戶端的什么位置。實(shí)現(xiàn)頁(yè)面無(wú)刷新更新數(shù)據(jù)。

3、核心對(duì)象？

XMLHttpReques

4、Ajax優(yōu)缺點(diǎn)？

   優(yōu)點(diǎn)　

1、無(wú)刷新更新數(shù)據(jù)

2、異步與服務(wù)器通信

3、前端和后端負(fù)載平衡

4、基于標(biāo)準(zhǔn)被廣泛支持

5、界面與應(yīng)用分離

   缺點(diǎn)：

1、ajax不能使用Back和history功能，即對(duì)瀏覽器機(jī)制的破壞。

2、安全問(wèn)題 ajax暴露了與服務(wù)器交互的細(xì)節(jié)

3、對(duì)收索引擎的支持比較弱

4、破壞程序的異常處理機(jī)制

5、違背URL和資源定位的初衷

6、ajax不能很好的支持移動(dòng)設(shè)備

7、太多客戶端代碼造成開(kāi)發(fā)上的成本

5、Ajax適用場(chǎng)景

<1>.表單驅(qū)動(dòng)的交互
<2>.深層次的樹(shù)的導(dǎo)航
<3>.快速的用戶與用戶間的交流響應(yīng)
<4>.類(lèi)似投票、yes/no等無(wú)關(guān)痛癢的場(chǎng)景
 <5>.對(duì)數(shù)據(jù)進(jìn)行過(guò)濾和操縱相關(guān)數(shù)據(jù)的場(chǎng)景
<6>.普通的文本輸入提示和自動(dòng)完成的場(chǎng)景

6、Ajax不適用場(chǎng)景

<1>.部分簡(jiǎn)單的表單
<2>.搜索
<3>.基本的導(dǎo)航
<4>.替換大量的文本
<5>.對(duì)呈現(xiàn)的操縱

7、代碼

$.ajax({
   type: 'get',
   url: '/getuser/data',
   dataType: 'json',
   data: {
        firstName: '張',
        lastName: '三'
   },
   success: function (response) {
       console.log(response);
   },
   error: function (error) {
	   console.log(error);
   }
});
<script type="text/javascript">
    function login() {
        $.ajax({
            type: 'post',
            url: '/email/login',
            dataType: 'json',
            data: {
                'account': $('#account').val(),
                'password': $('#password').val()
            },
            success: function (data) {
                if (data.code == 1) {
                    alert("登錄成功");
                    window.location.href = "http://localhost:8080/email/success";
                } else {
                    alert("密碼錯(cuò)誤，請(qǐng)重新輸入！")
                    window.location.href = "http://localhost:8080/email/error"
                }
            }
        })
    }
</script>
<script type="text/javascript">
    function addFruit() {
        let name = $.trim($("#fname").val());
        let price = $.trim($("#fprice").val());
        let count = $.trim($("#fcount").val());
        $.post("http://localhost:8080/fruit/add",
            {name: name, price: price, count: count},
            function (data) {
                if (data.code == 1) {
                    alert(data.message);
                    window.location.href = "http://localhost:8080/fruit/index";
                }
                if (data.code == 0) {
                    alert(data.message);
                }
            });
    }
    function delFruit(id) {
        if (window.confirm("是否確認(rèn)刪除" + id + "?")) {
            $.post("http://localhost:8080/fruit/delete?id=" + id, {id: id},
                function (data) {
                    if (data.code == 1) {
                        alert(data.message);
                        window.location.href = "http://localhost:8080/fruit/index";
                    }
                    if (data.code == 0) {
                        alert(data.message);
                    }
                });
        }
    }
</script>

8、Ajax請(qǐng)求的五個(gè)步驟

1. 創(chuàng)建XMLHttpRequest異步對(duì)象

2. 設(shè)置回調(diào)函數(shù)

3. 使用open方法與服務(wù)器建立連接

4. 向服務(wù)器發(fā)送數(shù)據(jù)

5. 在回調(diào)函數(shù)中針對(duì)不同的響應(yīng)狀態(tài)進(jìn)行處理

Axios：

1、Axios是什么

Axios 是一個(gè)基于 Promise 的 HTTP 庫(kù)，可以用在瀏覽器和 node.js 中。

2、Axios有那些特性？

1、在瀏覽器中創(chuàng)建 XMLHttpRequests

2、在node.js則創(chuàng)建http請(qǐng)求

3、支持Promise API

4、支持?jǐn)r截請(qǐng)求和響應(yīng)

5、轉(zhuǎn)換請(qǐng)求和響應(yīng)數(shù)據(jù)

6、取消請(qǐng)求

7、自動(dòng)轉(zhuǎn)換成JSON數(shù)據(jù)格式

8、客戶端支持防御XSRF

3、執(zhí)行g(shù)et請(qǐng)求，有兩種方式

params 是用于拼接 url 的，get 請(qǐng)求傳參就是拼到 url 中，

而 data 是放在 request body 中的，用于 post 請(qǐng)求

// 第一種寫(xiě)法:將參數(shù)直接寫(xiě)在url中
axios.get('/query?name=tom').then(function (response) {
    console.log(response);
}).catch(function (error) {
    console.log(error);
});
// 第二種寫(xiě)法:將參數(shù)直接寫(xiě)在params中
axios.get('/query', {
    params: {
        name: 'tom'
    }
}).then(function (response) {
    console.log(response);
}).catch(function (error) {
    console.log(error);
});
// 第三種寫(xiě)法:將參數(shù)直接寫(xiě)在params中
axios({
  method: 'get',
  url: '/query',
  params: {
    name: 'tom',
  }
}).then(function (response) {
    console.log(response);
}).catch(function (error) {
    console.log(error);
});

4、執(zhí)行post請(qǐng)求，注意執(zhí)行post請(qǐng)求的入?yún)?，不需要?xiě)在params字段中，這個(gè)地方要注意與get請(qǐng)求的第二種方式進(jìn)行區(qū)別。

axios.post('/query', {
    name: 'tom',
    icon: 'img_path'
}).then(function (response) {
    console.log(response);
}).catch(function (error) {
    console.log(error);
});

 下面這種data方式將參數(shù)放在請(qǐng)求體中，后端需要使用@RequestBody +實(shí)體類(lèi)來(lái)接收。

 axios({
        url: '/getUsers',
        method: 'post',
        responseType: 'json', // 默認(rèn)的
        data: {
            age: 18,
            sex: '男',
        }
    }).then(function (response) {
        console.log(response);
        console.log(response.data);
    }).catch(function (error) {
        console.log(error);
    });

這種params傳參方式其實(shí)和get請(qǐng)求類(lèi)似，把請(qǐng)求參數(shù)放到了請(qǐng)求頭中，
http://127.0.0.1/user?age=18&sex=男
所以這種需要使用@RequestParam來(lái)接收參數(shù)

 axios({
        url: '/getUsers',
        method: 'post',
        responseType: 'json', // 默認(rèn)的
        params: {
            age: 18,
            sex: '男',
        }
    }).then(function (response) {
        console.log(response);
        console.log(response.data);
    }).catch(function (error) {
        console.log(error);
    });

三、Axios和Ajax的區(qū)別

axios是通過(guò)Promise實(shí)現(xiàn)對(duì)ajax技術(shù)的一種封裝，就像jquery對(duì)ajax的封裝一樣，簡(jiǎn)單來(lái)說(shuō)就是ajax技術(shù)實(shí)現(xiàn)了局部數(shù)據(jù)的刷新，axios實(shí)現(xiàn)了對(duì)ajax的封裝，axios有的ajax都有，ajax有的axios不一定有，總結(jié)一句話就是axios是ajax，ajax不止axios。

注： 傳統(tǒng)Ajax 指的是 XMLHttpRequest（XHR），axios和jQuer ajax都是對(duì)Ajax的封裝。

到此這篇關(guān)于Axios和Ajax的區(qū)別是什么的文章就介紹到這了,更多相關(guān)Axios和Ajax的區(qū)別內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論