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適用場景
<1>.表單驅(qū)動(dòng)的交互
<2>.深層次的樹的導(dǎo)航
<3>.快速的用戶與用戶間的交流響應(yīng)
<4>.類似投票、yes/no等無關(guān)痛癢的場景
<5>.對(duì)數(shù)據(jù)進(jìn)行過濾和操縱相關(guān)數(shù)據(jù)的場景
<6>.普通的文本輸入提示和自動(dòng)完成的場景
6、Ajax不適用場景
<1>.部分簡單的表單
<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的封裝一樣，簡單來說就是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 post下載flask文件流以及中文文件名問題，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-04-04
Ajax是Asynchronous Javascript And XML的縮寫，其作用通過Ajax可以使用Javascript語句來調(diào)用XMLHttpRequest對(duì)象，直接與服務(wù)器進(jìn)行通訊，可以在不重載頁面的情況下與服務(wù)器交換數(shù)據(jù)。2015-10-10
本文是ajax初級(jí)教程的第一篇，本系列教程將從實(shí)用的角度出發(fā)，以最快的速度讓讀者掌握基本的AJAX應(yīng)用，以最直接的方式展示AJAX技術(shù)。本文則講解下AJAX的基礎(chǔ)知識(shí)2014-12-12
php與ajax一些經(jīng)驗(yàn)...2006-11-11
AJAX請(qǐng)求是否真的不安全？談一談Web安全與AJAX的關(guān)系
Ajax中沒有固有的安全漏洞，但是對(duì)該技術(shù)向量的適配顯著地改變了網(wǎng)絡(luò)應(yīng)用的開發(fā)途徑以及方法論。AJAX請(qǐng)求的安全性是大家經(jīng)常會(huì)談?wù)摰囊粋€(gè)話題，AJAX請(qǐng)求是否真的不安全？下面這篇文章就來給大家詳細(xì)談一談Web安全與AJAX關(guān)系的相關(guān)資料，需要的朋友可以參考下。2018-01-01
和大家一起聊一聊Ajax的優(yōu)缺點(diǎn)，Ajax是一個(gè)動(dòng)態(tài)的WEB應(yīng)用的開發(fā)技術(shù)，它的出現(xiàn)豐富了用戶的體驗(yàn)，今天就和大家進(jìn)一步的了解Ajax,感興趣的小伙伴們可以參考一下2016-02-02
最近的項(xiàng)目用了到AJAX同步。這個(gè)同步的意思是當(dāng)JS代碼加載到當(dāng)前AJAX的時(shí)候會(huì)把頁面里所有的代碼停止加載2014-04-04
這篇文章主要介紹了Ajax請(qǐng)求成功后打開新窗口地址的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-08-08
發(fā)現(xiàn)個(gè)AJAX圖片瀏覽器SIMPLEVIEWER
發(fā)現(xiàn)個(gè)AJAX圖片瀏覽器SIMPLEVIEWER...2007-04-04
0 － （未初始化）還沒有調(diào)用send()方法 1 － （載入）已調(diào)用send()方法，正在發(fā)送請(qǐng)求 2 － （載入完成）send()方法執(zhí)行完成，已經(jīng)接收到全部響應(yīng)內(nèi)容 3 － （交互）正在解析響應(yīng)內(nèi)容 4 － （完成）響應(yīng)內(nèi)容解析完成，可以在客戶端調(diào)用了2008-12-12