axios和ajax的區別有什么

axios和ajax的區別有什么，很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細講解，有這方面需求的人可以來學習下，希望你能有所收獲。

axios和ajax的區別：1、axios是一個基于Promise的HTTP庫，而ajax是對原生XHR的封裝；2、ajax技術實現了局部數據的刷新，而axios實現了對ajax的封裝。

本文操作環境：windows7系統、ECMAScript 6版、Dell G3電腦。

axios和ajax的區別是什么?

axios和ajax的區別及優缺點:

ajax：

1、什么是ajax

　　Ajax是對原生XHR的封裝，為了達到我們跨越的目的，增添了對JSONP的支持。

　　異步的javascript和xml，ajax不是一門新技術，而是多種技術的組合，用于快速的創建動態頁面，能夠實現無刷新更新數據從而提高用戶體驗。

2、ajax的原理？

　　由客戶端請求ajax引擎，再由ajax引擎請求服務器，服務器作出一系列響應之后返回給ajax引擎，由ajax引擎決定將這個結果寫入到客戶端的什么位置。實現頁面無刷新更新數據。

3、核心對象？

　　XMLHttpReques

4、ajax優缺點？

　　優點　

　　　　1、　無刷新更新數據

　　　　2、異步與服務器通信

　　　　3、前端和后端負載平衡

　　　　4、基于標準被廣泛支持

　　　　5、界面與應用分離

　　缺點：

　　　　1、ajax不能使用Back和history功能，即對瀏覽器機制的破壞。

　　　　2、安全問題  ajax暴露了與服務器交互的細節

　　　　3、對收索引擎的支持比較弱

　　　　4、破壞程序的異常處理機制

　　　　5、違背URL和資源定位的初衷

　　　　6、ajax不能很好的支持移動設備

　　　　7、太多客戶端代碼造成開發上的成本

5、Ajax適用場景
　　<1>.表單驅動的交互
　　<2>.深層次的樹的導航
　　<3>.快速的用戶與用戶間的交流響應
　　<4>.類似投票、yes/no等無關痛癢的場景
　　<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的封裝

看完上述內容是否對您有幫助呢？如果還想對相關知識有進一步的了解或閱讀更多相關文章，請關注億速云行業資訊頻道，感謝您對億速云的支持。