axios和ajax的區(qū)別點總結
本文操作環(huán)境:windows7系統(tǒng)、ECMAScript 6版、Dell G3電腦。
axios和ajax的區(qū)別是什么?
axios和ajax的區(qū)別及優(yōu)缺點:
ajax:
1、什么是ajax
Ajax是對原生XHR的封裝,為了達到我們跨越的目的,增添了對JSONP的支持。
異步的javascript和xml,ajax不是一門新技術,而是多種技術的組合,用于快速的創(chuàng)建動態(tài)頁面,能夠實現(xiàn)無刷新更新數據從而提高用戶體驗。
2、ajax的原理?
由客戶端請求ajax引擎,再由ajax引擎請求服務器,服務器作出一系列響應之后返回給ajax引擎,由ajax引擎決定將這個結果寫入到客戶端的什么位置。實現(xiàn)頁面無刷新更新數據。
3、核心對象?
XMLHttpReques
4、ajax優(yōu)缺點?
優(yōu)點
1、 無刷新更新數據
2、異步與服務器通信
3、前端和后端負載平衡
4、基于標準被廣泛支持
5、界面與應用分離
缺點:
1、ajax不能使用Back和history功能,即對瀏覽器機制的破壞。
2、安全問題 ajax暴露了與服務器交互的細節(jié)
3、對收索引擎的支持比較弱
4、破壞程序的異常處理機制
5、違背URL和資源定位的初衷
6、ajax不能很好的支持移動設備
7、太多客戶端代碼造成開發(fā)上的成本
5、Ajax適用場景
<1>.表單驅動的交互
<2>.深層次的樹的導航
<3>.快速的用戶與用戶間的交流響應
<4>.類似投票、yes/no等無關痛癢的場景
<5>.對數據進行過濾和操縱相關數據的場景
<6>.普通的文本輸入提示和自動完成的場景
6、Ajax不適用場景
<1>.部分簡單的表單
<2>.搜索
<3>.基本的導航
<4>.替換大量的文本
<5>.對呈現(xiàn)的操縱
7、代碼
$.ajax({
type: 'POST',
url: url,
data: data,
dataType: dataType,
success: function () {},
error: function () {}
});
8、ajax請求的五個步驟
1. 創(chuàng)建XMLHttpRequest異步對象
2. 設置回調函數
3. 使用open方法與服務器建立連接
4. 向服務器發(fā)送數據
5. 在回調函數中針對不同的響應狀態(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、轉換請求和響應數據
6、取消請求
7、自動轉換成JSON數據格式
8、客戶端支持防御XSRF
3、執(zhí)行get請求,有兩種方式
// 第一種方式 將參數直接寫在url中axios.get('/getMainInfo?id=123')
.then((res) => {
console.log(res)
})
.catch((err) => {
console.log(err)
})// 第二種方式 將參數直接寫在params中axios.get('/getMainInfo', { params: {
id: 123
}
})
.then((res) => {
console.log(res)
})
.catch((err) => {
console.log(err)
})
4、執(zhí)行post請求,注意執(zhí)行post請求的入參,不需要寫在params字段中,這個地方要注意與get請求的第二種方式進行區(qū)別。
axios.post('/getMainInfo', {
id: 123})
.then((res) => {
console.log(res)
})
.catch((err) => {
console.log(err)
})
axios和ajax的區(qū)別:
axios是通過Promise實現(xiàn)對ajax技術的一種封裝,就像jquery對ajax的封裝一樣,簡單來說就是ajax技術實現(xiàn)了局部數據的刷新,axios實現(xiàn)了對ajax的封裝,axios有的ajax都有,ajax有的axios不一定有,總結一句話就是axios是ajax,ajax不止axios。
注: 傳統(tǒng)Ajax 指的是 XMLHttpRequest(XHR),axios和jQuer ajax都是對Ajax的封裝
到此這篇關于axios和ajax的區(qū)別點總結的文章就介紹到這了,更多相關axios和ajax的區(qū)別是什么內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
ajax post方式表單提交setRequestHeader報錯解決方法
ajax post方式表單提交設置異步對象的xhr.setRequestHeader,在谷歌瀏覽器的編譯器中顯示傳值在Request Payload中這是錯誤的2014-09-09
Ajax 動態(tài)載入html頁面后不能執(zhí)行其中的js快速解決方法
這篇文章主要介紹了Ajax 動態(tài)載入html頁面后不能執(zhí)行其中的js快速解決方法,需要的朋友可以參考下2018-06-06
Jquery Ajax請求文件下載操作失敗的原因分析及解決辦法
jQuery確實是一個挺好的輕量級的JS框架,能幫助我們快速的開發(fā)JS應用,并在一定程度上改變了我們寫JavaScript代碼的習慣,本文重點給大家介紹Jquery Ajax請求文件下載操作失敗的原因分析及解決辦法,對ajax請求失敗的原因分析感興趣的朋友一起學習把2015-11-11
使用AJAX異步通信技術實現(xiàn)搜索聯(lián)想和自動補全示例
這篇文章主要介紹了使用AJAX異步通信技術實現(xiàn)搜索聯(lián)想和自動補全示例,AJAX是前后臺交互的能? 也就是我們客戶端給服務端發(fā)送消息的?具,以及接受響應的?具,需要的朋友可以參考下2023-05-05

