What is Ajax and Why Not 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();

参考资料