axios和Ajax的對比
技術標籤:JavaStudy2020vueajax
ajax:
1、什麼是ajax
Ajax是對原生XHR的封裝,為了達到我們跨越的目的,增添了對JSONP的支援。
非同步的javascript和xml,ajax不是一門新技術,而是多種技術的組合,用於快速的建立動態頁面,能夠實現無重新整理更新資料從而提高使用者體驗。
2、ajax的原理?
由客戶端請求ajax引擎,再由ajax引擎請求伺服器,伺服器作出一系列響應之後返回給ajax引擎,由ajax引擎決定將這個結果寫入到客戶端的什麼位置。實現頁面無重新整理更新資料。
3、核心物件?
XMLHttpReques
4、ajax優缺點?
優點
1、無重新整理更新資料
3、前端和後端負載平衡
4、基於標準被廣泛支援
5、介面與應用分離
缺點:
1、ajax不能使用Back和history功能,即對瀏覽器機制的破壞。
2、安全問題 ajax暴露了與伺服器互動的細節
3、對收索引擎的支援比較弱
4、破壞程式的異常處理機制
5、違背URL和資源定位的初衷
6、ajax不能很好的支援移動裝置
7、太多客戶端程式碼造成開發上的成本
5、Ajax適用場景
<1>.表單驅動的互動
<2>.深層次的樹的導航
<3>.快速的使用者與使用者間的交流響應
<5>.對資料進行過濾和操縱相關資料的場景
<6>.普通的文字輸入提示和自動完成的場景
6、Ajax不適用場景
<1>.部分簡單的表單
<2>.搜尋
<3>.基本的導航
<4>.替換大量的文字
<5>.對呈現的操縱
7、程式碼
$.ajax({
type: 'POST',
url: url,
data: data,
dataType: dataType,
success: function () {} ,
error: function () {}
});
8、ajax請求的五個步驟
1. 建立XMLHttpRequest非同步物件
2. 設定回撥函式
3. 使用open方法與伺服器建立連線
4. 向伺服器傳送資料
5. 在回撥函式中針對不同的響應狀態進行處理
axios:
1、axios是什麼
Axios 是一個基於 Promise 的 HTTP 庫,可以用在瀏覽器和 node.js 中。
2、axios有那些特性?
1、在瀏覽器中建立 XMLHttpRequests
2、在node.js則建立http請求
3、支援Promise API
4、支援攔截請求和響應
5、轉換請求和響應資料
6、取消請求
7、自動轉換成JSON資料格式
8、客戶端支援防禦XSRF
3、執行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、執行post請求,注意執行post請求的入參,不需要寫在params欄位中,這個地方要注意與get請求的第二種方式進行區別。
axios.post('/getMainInfo', {
id: 123
})
.then((res) => {
console.log(res)
})
.catch((err) => {
console.log(err)
})
axios和ajax的區別:
- axios是通過Promise實現對ajax技術的一種封裝,就像jquery對ajax的封裝一樣,簡單來說就是ajax技術實現了局部資料的重新整理,axios實現了對ajax的封裝,axios有的ajax都有,ajax有的axios不一定有,總結一句話就是axios是ajax,ajax不止axios。
注: 傳統Ajax 指的是 XMLHttpRequest(XHR),
axios和jQuer ajax都是對Ajax的封裝