Axios和Ajax的區(qū)別是什么(詳細介紹)
一、Axios 和 Ajax 的區(qū)別
1、Axios是一個基于Promise的HTTP庫，而Ajax是對原生XHR的封裝；
2、Ajax技術(shù)實現(xiàn)了局部數(shù)據(jù)的刷新，而Axios實現(xiàn)了對ajax的封裝。
二、Axios 和 Ajax 的區(qū)別及優(yōu)缺點
Ajax：
1、什么是Ajax
Ajax是對原生XHR的封裝，為了達到我們跨越的目的，增添了對JSONP的支持。
異步的javascript和xml，ajax不是一門新技術(shù)，而是多種技術(shù)的組合，用于快速的創(chuàng)建動態(tài)頁面，能夠?qū)崿F(xiàn)無刷新更新數(shù)據(jù)從而提高用戶體驗。
2、Ajax的原理？
由客戶端請求ajax引擎，再由ajax引擎請求服務器，服務器作出一系列響應之后返回給ajax引擎，由ajax引擎決定將這個結(jié)果寫入到客戶端的什么位置。實現(xiàn)頁面無刷新更新數(shù)據(jù)。
3、核心對象？
XMLHttpReques
4、Ajax優(yōu)缺點？
優(yōu)點
1、無刷新更新數(shù)據(jù)
2、異步與服務器通信
3、前端和后端負載平衡
4、基于標準被廣泛支持
5、界面與應用分離
缺點：
1、ajax不能使用Back和history功能，即對瀏覽器機制的破壞。
2、安全問題 ajax暴露了與服務器交互的細節(jié)
3、對收索引擎的支持比較弱
4、破壞程序的異常處理機制
5、違背URL和資源定位的初衷
6、ajax不能很好的支持移動設備
7、太多客戶端代碼造成開發(fā)上的成本
5、Ajax適用場景
<1>.表單驅(qū)動的交互
<2>.深層次的樹的導航
<3>.快速的用戶與用戶間的交流響應
<4>.類似投票、yes/no等無關痛癢的場景
<5>.對數(shù)據(jù)進行過濾和操縱相關數(shù)據(jù)的場景
<6>.普通的文本輸入提示和自動完成的場景
6、Ajax不適用場景
<1>.部分簡單的表單
<2>.搜索
<3>.基本的導航
<4>.替換大量的文本
<5>.對呈現(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("密碼錯誤，請重新輸入！")
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("是否確認刪除" + 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請求的五個步驟
1. 創(chuàng)建XMLHttpRequest異步對象
2. 設置回調(diào)函數(shù)
3. 使用open方法與服務器建立連接
4. 向服務器發(fā)送數(shù)據(jù)
5. 在回調(diào)函數(shù)中針對不同的響應狀態(tài)進行處理
Axios：
1、Axios是什么
Axios 是一個基于 Promise 的 HTTP 庫，可以用在瀏覽器和 node.js 中。
2、Axios有那些特性？
1、在瀏覽器中創(chuàng)建 XMLHttpRequests
2、在node.js則創(chuàng)建http請求
3、支持Promise API
4、支持攔截請求和響應
5、轉(zhuǎn)換請求和響應數(shù)據(jù)
6、取消請求
7、自動轉(zhuǎn)換成JSON數(shù)據(jù)格式
8、客戶端支持防御XSRF
3、執(zhí)行g(shù)et請求，有兩種方式
params 是用于拼接 url 的，get 請求傳參就是拼到 url 中，
而 data 是放在 request body 中的，用于 post 請求
// 第一種寫法:將參數(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請求，注意執(zhí)行post請求的入?yún)?，不需要寫在params字段中，這個地方要注意與get請求的第二種方式進行區(qū)別。
axios.post('/query', {
name: 'tom',
icon: 'img_path'
}).then(function (response) {
console.log(response);
}).catch(function (error) {
console.log(error);
});下面這種data方式將參數(shù)放在請求體中，后端需要使用@RequestBody +實體類來接收。
axios({
url: '/getUsers',
method: 'post',
responseType: 'json', // 默認的
data: {
age: 18,
sex: '男',
}
}).then(function (response) {
console.log(response);
console.log(response.data);
}).catch(function (error) {
console.log(error);
});這種params傳參方式其實和get請求類似，把請求參數(shù)放到了請求頭中，
http://127.0.0.1/user?age=18&sex=男
所以這種需要使用@RequestParam來接收參數(shù)
axios({
url: '/getUsers',
method: 'post',
responseType: 'json', // 默認的
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實現(xiàn)對ajax技術(shù)的一種封裝，就像jquery對ajax的封裝一樣，簡單來說就是ajax技術(shù)實現(xiàn)了局部數(shù)據(jù)的刷新，axios實現(xiàn)了對ajax的封裝，axios有的ajax都有，ajax有的axios不一定有，總結(jié)一句話就是axios是ajax，ajax不止axios。
注： 傳統(tǒng)Ajax 指的是 XMLHttpRequest（XHR），axios和jQuer ajax都是對Ajax的封裝。
到此這篇關于Axios和Ajax的區(qū)別是什么的文章就介紹到這了,更多相關Axios和Ajax的區(qū)別內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
Ajax添加數(shù)據(jù)與刪除篇實現(xiàn)代碼
Hello 大家好！這個ajax系列教程講到這里已經(jīng)完成50%了．第4篇講了ajax向數(shù)據(jù)庫添加數(shù)據(jù)，第5篇講了ajax修改數(shù)據(jù)庫中的數(shù)據(jù)．今天我們來講ajax添加數(shù)據(jù)與刪除并存的實例效果．2010-10-10
Ajax創(chuàng)建XMLHttp對象的完美兼容性代碼
Ajax創(chuàng)建XMLHttp對象的完美兼容性代碼，需要的朋友可以參考下。2011-11-11
下面是ajax實現(xiàn)一個簡單的百度搜索欄的功能，當用戶在上面的輸入框中鍵入字符時，會執(zhí)行函數(shù) "showHint()" 。下文通過實例代碼給大家介紹的非常詳細，感興趣的朋友一起看看吧2016-11-11
隨著AJAX在互聯(lián)網(wǎng)上的廣泛運用，公司也在越來越多的項目里涉及到了AJAX，最近一段時間空閑，于是就用JS寫了一個基于AJAX的異步分頁類。先不多說，還是先將源碼貼出，再進行說明~~~2009-09-09
這篇文章主要給大家介紹了關于利用ajax傳遞數(shù)組及后臺接收的相關資料，文中介紹的非常詳細，對大家具有一定的參考學習價值，需要的朋友們下面跟著小編一起來學習學習吧。2017-06-06
用ajax實現(xiàn)用戶名的檢測，提示是否重復的實現(xiàn)代碼。2009-11-11
jQuery Ajax相關文章想必大家在網(wǎng)上面已經(jīng)看到了很多，本文主要目的是整理jQuery Ajax相關內(nèi)容，感興趣的朋友可以了解下，或許本文對你有所幫助2013-02-02
下面小編就為大家?guī)硪黄猘jax快速解決參數(shù)過長無法提交成功的問題。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-12-12
今天小編就為大家分享一篇快速解決ajax返回值給外部函數(shù)的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
webform使用ajax訪問后端接口的兩種方法小結(jié)
這篇文章主要介紹了webform使用ajax訪問后端接口的兩種方法小結(jié),本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-11-11