Why you need Ajax and why not call it Ajaj?

什麼是 Ajax 以及為什麼不是 Ajaj？

@ 模式

什麼是 Ajax

Ajax 是指一種網頁開發技巧的稱互，也就是「非同步 JavaScript 與 XML」，主要解決傳統網頁需要更新頁面內容的時候只能重新向伺服器索取一個全新的頁面的窘境。

透過 Ajax 非同步的使用 JavaScript 對伺服器發出請求，並獲取純文字、HTML、XML、JSON 之類的格式資料用於更新網頁，達成高效率的更新資料、即時的交互性與流暢體驗。

現在的 Ajax

Ajax 技術流程圖
傳統網頁更新頁面內容的技術流程圖

在早期會使用像是：XMLHTTP、XMLHttpRequest等方法來達成該目的，因此命名為 Ajax 很合理，如今就算很少使用 XML 仍會這樣來稱呼：「非同步使用 JavaScript 來索取資料」這項技巧。

就算現代更常使用 JSON 格式來傳輸資料，會沿用 Ajax 這個名稱總結大致有幾個要點：

  • 更改名稱容易導致混亂
  • 更好發音
  • 就算更改名稱也不能很好的代表其意涵(像是 AJAJ ……) 更明確的命名應該會是 JAHR？！

因此如今我們仍然可以稱呼 Ajax ，不過如今的 X 可以被視為任何資料種類，總歸還是習慣的問題，東西沒壞就不需要修正。

如何撰寫 Ajax

絕對會先需要理解非同步 JavaScript 開發的基礎再去了解語法如何撰寫會更好，可以參考我的另外一篇文章：從動圖輕鬆入門非同步 JavaScript（第一章）。

語法上與其使用早期的 XMLHttpRequest 方法，現在可以使用 fetch 或是 async/await 來達成，以下是三種不同的寫法：

let xhr = new XMLHttpRequest();
xhr.open('GET', 'send-Ajax-data.php');


xhr.onreadystatechange = function () {
  const DONE = 4;
  const OK = 200;
  if (xhr.readyState === DONE) {
    if (xhr.status === OK) {
      console.log(xhr.responseText);
    } else {
      console.log('Error: ' + xhr.status);
    }
  }
};


xhr.send(null);
fetch('send-Ajax-data.php')
  .then((data) => console.log(data))
  .catch((error) => console.log('Error:' + error));
async function doAjax() {
  try {
    const res = await fetch('send-Ajax-data.php');
    const data = await res.text();
    console.log(data);
  } catch (error) {
    console.log('Error:' + error);
  }
}


doAjax();

參考資料