Axios和Ajax的區(qū)別是什么(詳細(xì)介紹)
一、Axios 和 Ajax 的區(qū)別
1、Axios是一個(gè)基于Promise的HTTP庫,而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不是一門新技術(shù),而是多種技術(shù)的組合,用于快速的創(chuàng)建動(dòng)態(tài)頁面,能夠?qū)崿F(xiàn)無刷新更新數(shù)據(jù)從而提高用戶體驗(yàn)。
2、Ajax的原理?
由客戶端請(qǐng)求ajax引擎,再由ajax引擎請(qǐng)求服務(wù)器,服務(wù)器作出一系列響應(yīng)之后返回給ajax引擎,由ajax引擎決定將這個(gè)結(jié)果寫入到客戶端的什么位置。實(shí)現(xiàn)頁面無刷新更新數(shù)據(jù)。
3、核心對(duì)象?
XMLHttpReques
4、Ajax優(yōu)缺點(diǎn)?
優(yōu)點(diǎn)
1、無刷新更新數(shù)據(jù)
2、異步與服務(wù)器通信
3、前端和后端負(fù)載平衡
4、基于標(biāo)準(zhǔn)被廣泛支持
5、界面與應(yīng)用分離
缺點(diǎn):
1、ajax不能使用Back和history功能,即對(duì)瀏覽器機(jī)制的破壞。
2、安全問題 ajax暴露了與服務(wù)器交互的細(xì)節(jié)
3、對(duì)收索引擎的支持比較弱
4、破壞程序的異常處理機(jī)制
5、違背URL和資源定位的初衷
6、ajax不能很好的支持移動(dòng)設(shè)備
7、太多客戶端代碼造成開發(fā)上的成本
5、Ajax適用場(chǎng)景
<1>.表單驅(qū)動(dòng)的交互
<2>.深層次的樹的導(dǎo)航
<3>.快速的用戶與用戶間的交流響應(yīng)
<4>.類似投票、yes/no等無關(guān)痛癢的場(chǎng)景
<5>.對(duì)數(shù)據(jù)進(jìn)行過濾和操縱相關(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 庫,可以用在瀏覽器和 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)求
// 第一種寫法:將參數(shù)直接寫在url中 axios.get('/query?name=tom').then(function (response) { console.log(response); }).catch(function (error) { console.log(error); }); // 第二種寫法:將參數(shù)直接寫在params中 axios.get('/query', { params: { name: 'tom' } }).then(function (response) { console.log(response); }).catch(function (error) { console.log(error); }); // 第三種寫法:將參數(shù)直接寫在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)?,不需要寫在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í)體類來接收。
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)求類似,把請(qǐng)求參數(shù)放到了請(qǐng)求頭中,
http://127.0.0.1/user?age=18&sex=男
所以這種需要使用@RequestParam來接收參數(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是通過Promise實(shí)現(xiàn)對(duì)ajax技術(shù)的一種封裝,就像jquery對(duì)ajax的封裝一樣,簡(jiǎn)單來說就是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)文章
Ajax添加數(shù)據(jù)與刪除篇實(shí)現(xiàn)代碼
Hello 大家好!這個(gè)ajax系列教程講到這里已經(jīng)完成50%了.第4篇講了ajax向數(shù)據(jù)庫添加數(shù)據(jù),第5篇講了ajax修改數(shù)據(jù)庫中的數(shù)據(jù).今天我們來講ajax添加數(shù)據(jù)與刪除并存的實(shí)例效果.2010-10-10Ajax創(chuàng)建XMLHttp對(duì)象的完美兼容性代碼
Ajax創(chuàng)建XMLHttp對(duì)象的完美兼容性代碼,需要的朋友可以參考下。2011-11-11AJax實(shí)現(xiàn)類似百度搜索欄的功能 (面試多見)
下面是ajax實(shí)現(xiàn)一個(gè)簡(jiǎn)單的百度搜索欄的功能,當(dāng)用戶在上面的輸入框中鍵入字符時(shí),會(huì)執(zhí)行函數(shù) "showHint()" 。下文通過實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧2016-11-11利用ajax傳遞數(shù)組及后臺(tái)接收的方法詳解
這篇文章主要給大家介紹了關(guān)于利用ajax傳遞數(shù)組及后臺(tái)接收的相關(guān)資料,文中介紹的非常詳細(xì),對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面跟著小編一起來學(xué)習(xí)學(xué)習(xí)吧。2017-06-06AJAX 用戶唯一性驗(yàn)證實(shí)現(xiàn)代碼
用ajax實(shí)現(xiàn)用戶名的檢測(cè),提示是否重復(fù)的實(shí)現(xiàn)代碼。2009-11-11jQuery Ajax使用心得詳細(xì)整理及注意事項(xiàng)
jQuery Ajax相關(guān)文章想必大家在網(wǎng)上面已經(jīng)看到了很多,本文主要目的是整理jQuery Ajax相關(guān)內(nèi)容,感興趣的朋友可以了解下,或許本文對(duì)你有所幫助2013-02-02ajax快速解決參數(shù)過長(zhǎng)無法提交成功的問題
下面小編就為大家?guī)硪黄猘jax快速解決參數(shù)過長(zhǎng)無法提交成功的問題。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-12-12webform使用ajax訪問后端接口的兩種方法小結(jié)
這篇文章主要介紹了webform使用ajax訪問后端接口的兩種方法小結(jié),本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-11-11