首頁  >  文章  >  web前端  >  axios和ajax的差別是什麼

axios和ajax的差別是什麼

藏色散人
藏色散人原創
2021-12-17 15:38:0052631瀏覽

axios和ajax的區別:1、axios是一個基於Promise的HTTP庫,而ajax是對原生XHR的封裝;2、ajax技術實現了局部資料的刷新,而axios實現了對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、異步與伺服器通訊

    2、非同步與伺服器通訊

   端

#    4、基於標準被廣泛支持

    5、介面與應用分離

     

    1、ajax 器機制的破壞。

    2、安全問題  ajax揭露了與伺服器互動的細節

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

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

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

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

    6、ajax不能很好的支援行動裝置

    7、客戶端程式碼造成開發上的成本不能很好的支援行動裝置

    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的封裝###

推薦學習:《ajax影片教學

以上是axios和ajax的差別是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn