一窺 AJAX

本文寫於 2020 年 6 月 7 日

AJAX 這個詞非常常見，如果使初學者，說不定還會非常害怕這個名字看起來非常高端、非常難的技術。

AJAX，全稱 Async JavaScript And XML。它不是 JavaScript 的規範，它只是一個哥們“發明”的縮寫，意思就是用 JavaScript 執行非同步網路請求。

就算是在當年它剛剛出現的時候，也不是一個新技術，而是一個新名字。

技術領域其實經常這樣 —— 大家都在用某一個方法去寫代碼，突然有一天有個哥們兒覺得，要不咱給這個技術做個規範、起個名字吧！然後就有了一個新的技術名詞，但其實並不是一個新的技術。

那麼我們來思考一下：AJAX 為什麼需要存在呢？

我最早自學前端的時候，聽人家說：”JavaScript 有個技術叫做 AJAX 非常牛逼！“

我就去學了。

可我那個時候還是一個”小白菜“（很菜的小白），怎麼可能看兩篇教程就能懂呢？於是很自然的放棄了。

但等我一直學到了 Vue, React 我都沒有遇到過 AJAX 。

難道……AJAX 已死？

那肯定是扯淡。

這就是之前說的，AJAX 不是個什麼牛逼的新技術，他只是對已有技術的總結，我們已經在 coding 中不知不覺用到了類 AJAX 的代碼。

對 Web 來說，運作的原理就是一次 HTTP 請求對應一個頁面。

但如果我非要讓用戶再不刷新的情況下體驗新內容呢？我可不可以用 JS 和伺服器後端交換數據，但是並不去發送 HTTP 請求，而是用 JS 將新的數據動態寫到 HTML 中？

這樣就完成了不刷新的頁面和數據更新。

最早大規模使用 AJAX 的就是大名鼎鼎的 Gmail。Gmail 的頁面在首次載入後，剩下的所有數據都依賴於 AJAX 進行更新。

如何使用 AJAX？

用 JavaScript 寫 AJAX 並不複雜，唯一需要註意的就是 AJAX 是非同步執行的，也就是說需要通過回調函數獲得響應。

我們可以通過 XMLHttpRequest 構造函數來創建 XMLHttpRequest 對象來完成 AJAX。

什麼？你問我什麼是這個 XML...bla.. 對象？在 JS 中，Object() 可以構造對象、String() 可以構造字元串、Array() 可以構造數組。XMLHttpRequest 也只是一個構造某種對象的構造函數罷了。

看代碼：

function success(text) {
  console.log(`成功啦，${text}`);
}

function fail(code) {
  console.log(`失敗啦，${code}`);
}

const request = new XMLHttpRequest();

request.onreadystatechange = function () {
  if (request.readyState === 4) {
    if (request.status === 200) {
      return success(request.responseText);
    } else {
      return fail(request.status);
    }
  }
};

request.open('GET', '/index.html');
request.send();

接下來我們來一點點剖析代碼。

首先我們看最後，request.open() 是規定了請求的方式與 URL 參數；最後一行的 request.send() 是真正發出請求；request.onreadystatechange 其實是對請求進行監聽。

前兩個肯定沒有問題，問題就在於第三個，監聽什麼呢？

監聽的是當前的狀態。

官方解答：XMLHttpRequest.readyState 屬性返回一個 XMLHttpRequest 代理當前所處的狀態。

完美看不懂。

其實本質上就是說，當前你進行到哪一個階段了。

如果你 new XMLHttpRequest() ，那麼這個時候你的 request.readyState 就會變成 0，並且 onreadystatechange 事件還會被觸發，

當我們調用了 request.open() 之後， request.readyState 就會變成 1，同時觸發 onreadystatechange。

以此類推。

此時，我們就能看懂這段代碼了。

我們首先準備一個請求的包包，然後往包包里塞東西，並且每一個動作都有一個對應的數值、切換狀態會自動觸發一個事件。

也就是說，我們只需要：

1. 發出請求；
2. 接受請求；
3. 判斷請求；
4. 處理請求結果；
5. 請求結束。

就完成了一個完美的 AJAX。

（完）