一窺 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，
以此類推，
| 值 | 狀態 | 描述 |
|---|---|---|
| 0 | UNSENT | 代理被創建，但尚未呼叫 open() 方法， |
| 1 | OPENED | open() 方法已經被呼叫， |
| 2 | HEADERS_RECEIVED | send() 方法已經被呼叫，并且頭部和狀態已經可獲得， |
| 3 | LOADING | 下載中； responseText 屬性已經包含部分資料， |
| 4 | DONE | 下載操作已完成， |
此時，我們就能看懂這段代碼了，
我們首先準備一個請求的包包，然后往包包里塞東西，并且每一個動作都有一個對應的數值、切換狀態會自動觸發一個事件，
也就是說，我們只需要：
- 發出請求；
- 接受請求；
- 判斷請求；
- 處理請求結果；
- 請求結束，
就完成了一個完美的 AJAX，
（完）
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/73782.html
標籤：JavaScript