您好,登錄后才能下訂單哦!
axios和ajax的區(qū)別有什么,很多新手對(duì)此不是很清楚,為了幫助大家解決這個(gè)難題,下面小編將為大家詳細(xì)講解,有這方面需求的人可以來(lái)學(xué)習(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的封裝。
本文操作環(huán)境:windows7系統(tǒng)、ECMAScript 6版、Dell G3電腦。
axios和ajax的區(qū)別是什么?
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: 'POST', url: url, data: data, dataType: dataType, success: function () {}, error: function () {} });
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)求,有兩種方式
// 第一種方式 將參數(shù)直接寫(xiě)在url中axios.get('/getMainInfo?id=123') .then((res) => { console.log(res) }) .catch((err) => { console.log(err) })// 第二種方式 將參數(shù)直接寫(xiě)在params中axios.get('/getMainInfo', { params: { id: 123 } }) .then((res) => { console.log(res) }) .catch((err) => { console.log(err) })
4、執(zhí)行post請(qǐng)求,注意執(zhí)行post請(qǐng)求的入?yún)?,不需要?xiě)在params字段中,這個(gè)地方要注意與get請(qǐng)求的第二種方式進(jìn)行區(qū)別。
axios.post('/getMainInfo', { id: 123}) .then((res) => { console.log(res) }) .catch((err) => { console.log(err) })
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的封裝
看完上述內(nèi)容是否對(duì)您有幫助呢?如果還想對(duì)相關(guān)知識(shí)有進(jìn)一步的了解或閱讀更多相關(guān)文章,請(qǐng)關(guān)注億速云行業(yè)資訊頻道,感謝您對(duì)億速云的支持。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。