什么是Ajax

Ajax（Asynchronous JavaScript And XML），實際上就是異步的JavaScript和XML，Ajax是一種概念，指無需刷新頁面即可與服務(wù)器通信的技術(shù)。

記住：Ajax是一個技術(shù)統(tǒng)稱，包含了很多技術(shù)，不是特指某一種技術(shù)，也不是發(fā)送請求的一種方式。XMLHttpRequest 是實現(xiàn)Ajax的一種方式。

異步JavaScript

可以異步地向服務(wù)器端發(fā)送請求，在等待響應(yīng)的過程中，不會阻塞當前頁面。瀏覽器還可以做自己的事情，直到成功獲取響應(yīng)后，瀏覽器才開始處理響應(yīng)數(shù)據(jù)。

XML

只是一種前后端傳輸數(shù)據(jù)的格式，現(xiàn)在主要用JSON。

應(yīng)用場景

Ajax通常用于創(chuàng)建快速響應(yīng)的Web程序，例如：

1. 動態(tài)更新內(nèi)容：比如在微博中，用戶發(fā)布新評論可以實時更新到頁面上，不需要刷新整個頁面。
2. 自動完成功能：利用百度搜索引擎時，Ajax可以根據(jù)用戶輸入的內(nèi)容，及時向服務(wù)器發(fā)送請求并返回匹配的結(jié)果列表，提供反饋。
3. 分頁和無限滾動：在展示博客文章等內(nèi)容時，Ajax可以在用戶滾動到底部時自動加載更多內(nèi)容，或點擊分頁按鈕來加載特定數(shù)據(jù)塊，而不是一次性加載。

實現(xiàn)Ajax

我們來看一組代碼：

json
代碼解讀
復(fù)制代碼
//test.josn的代碼
{
    "reply":"我收到啦！"
}

ini
代碼解讀
復(fù)制代碼
const xhr = new XMLHttpRequest();
xhr.onreadystatechange = () => {
   if (xhr.readyState !== 4) return;
   if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
       console.log(xhr.responseText);
    }
};
xhr.open('GET', 'text.json', true);
xhr.send(null);

執(zhí)行結(jié)果如下：

這里有一點需要注意：JSON文件中的對象鍵名一定要用雙引號包裹，如果屬性值里有字符串，也需要用雙引號包裹。

執(zhí)行過程

1.創(chuàng)建xhr對象

ini
代碼解讀
復(fù)制代碼
const xhr = new XMLHttpRequest();

2.利用onreadystatechange屬性，封裝一個函數(shù)，來監(jiān)聽readyState的變化

ini
代碼解讀
復(fù)制代碼
xhr.onreadystatechange = () => {
if (xhr.readyState !== 4) return;
if (xhr.status >= 200 && xhr.status < 300 ){
    console.log(xhr.responseText);
    }
};

2.1當xhr對象執(zhí)行發(fā)送數(shù)據(jù)時，有五種狀態(tài)：

2.2判斷Http狀態(tài)碼

lua
代碼解讀
復(fù)制代碼
if (xhr.status >= 200 && xhr.status < 300 ){
    console.log(xhr.responseText);
    }

Ajax的狀態(tài)碼為4是不夠的，這只能表示收到了服務(wù)器端所有的響應(yīng)的數(shù)據(jù)，但不能保證這個數(shù)據(jù)是正確的。

所以還需要判斷Http的狀態(tài)碼，確保xhr對象的statue屬性值在200~300之間。

3.準備發(fā)送請求

kotlin
代碼解讀
復(fù)制代碼
xhr.open('GET','text.json',ture);

第一個參數(shù)是請求方式：method（“GET”或“POST”）；第二個參數(shù)是：url（文件在服務(wù)器上的位置）；第三個參數(shù)是：async（true：異步，false：同步）。

4.發(fā)送請求

csharp
代碼解讀
復(fù)制代碼
xhr.send(null)

注意：send（）的參數(shù)是通過請求體攜帶的數(shù)據(jù)，而GET請求是通過請求頭攜帶數(shù)據(jù)的，所以要把send（）參數(shù)設(shè)置為null。

Fetch

Fetch 出現(xiàn)在ES6，使用了ES6中的promise對象。是XMLHttpRequest的替代品。

大多數(shù)時候我們會將Ajax和Fetch放在一起比較，實際上比的是Ajax中的XMLHttpRequest和Fetch。

注意：Fetch是一個API，是基于Promise真實存在的。

Fetch的特點

1. 基于Promise：Fetch會返回一個Promsie對象，使得異步操作更加簡潔和理解。還可以通過鏈式調(diào)用.then()和.catch()，可以更加清晰處理響應(yīng)和錯誤。
2. 簡潔的API：Fetch有一套簡潔的方法來執(zhí)行HTTP請求。
3. 支持跨域請求：Fetch默認支持跨域請求，但需要在服務(wù)器端配置CORS（跨域資源共享）。通過設(shè)置credentials屬性，還可以在跨域請求中發(fā)送cookies。
4. 支持流式輸出：Fetch支持流式輸出，讓大型響應(yīng)或請求時更高效。

發(fā)送請求

Fetch 發(fā)送請求和Ajax相比較為簡單，來看個POST請求：

javascript
代碼解讀
復(fù)制代碼
fetch('https://example.com/api/data', {
  method: 'POST', // 請求方法
  headers: {
    'Content-Type': 'application/json' // 指定發(fā)送的數(shù)據(jù)格式
  },
  body: JSON.stringify({ // 將 JavaScript 對象轉(zhuǎn)換為 JSON 字符串
    name: 'Kimi',
    age: 25
  })
})
.then(response => response.json())
.then(data => console.log(data))
.catch(err => console.error('Fetch error:', err));

以上代碼就是向特定的端點發(fā)送包含用戶信息的POST請求，設(shè)定了請求頭和請求體來明確信息。

Axios

Axios是一個隨著Vue興起而被廣泛使用的，Vue大多數(shù)項目中都是利用Axios來發(fā)起請求的。

注意：Axios不是一個思想，也不是一個技術(shù)。而是一個基于Promise封裝的網(wǎng)絡(luò)請求庫，是基于XMLHttpRequest進行二次封裝。

那有沒有想過，為什么Axios是基于XMLHttpRequest的而不是Fetch？

原因有以下幾點：

1. 歷史性：在Axios首次開發(fā)時，F(xiàn)etch還沒有被一個普遍使用，因為它是隨著ES6誕生的。而XMLHttpRequest已經(jīng)使用多年，幾乎所有瀏覽器都支持。
2. 自動轉(zhuǎn)換JSON數(shù)據(jù)：Axios可以自動將傳入傳出的數(shù)據(jù)轉(zhuǎn)換成JSON格式，但早期的Fetch需要手動轉(zhuǎn)換。
3. 請求和響應(yīng)攔截器：Axios允許在請求發(fā)送前或響應(yīng)被處理之前對其進行修改或干預(yù)，這有利于添加通用認證令牌。Fetch本身不支持這種功能。

從Axios官網(wǎng)我們可以了解到Axios有以下特點：

• 從瀏覽器創(chuàng)建 XMLHttpRequests

• 從 node.js 創(chuàng)建 http 請求

• 支持 Promise API

• 攔截請求和響應(yīng)

• 轉(zhuǎn)換請求和響應(yīng)數(shù)據(jù)

• 取消請求

• 超時處理

• 查詢參數(shù)序列化支持嵌套項處理

• 自動將請求體序列化為：

  • JSON (application/json)
  • Multipart / FormData (multipart/form-data)
  • URL encoded form (application/x-www-form-urlencoded)

• 將 HTML Form 轉(zhuǎn)換成 JSON 進行請求

• 自動轉(zhuǎn)換JSON數(shù)據(jù)

• 獲取瀏覽器和 node.js 的請求進度，并提供額外的信息（速度、剩余時間）

• 為 node.js 設(shè)置帶寬限制

• 兼容符合規(guī)范的 FormData 和 Blob（包括 node.js）

• 客戶端支持防御XSRF 所以，Axios是XHR的一個子集，而XHR又是Ajax的一個子集。我們在一開始就說過Axios是一個庫，所以需要在使用時引入。

看個POST請求：

javascript
代碼解讀
復(fù)制代碼
axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

總結(jié)