淺談 Ajax 與應用

Ajax 的出現，優化了不少使用者體驗，也縮短了網頁顯示的時間，這篇僅單純的淺談什麼是 Ajax 以及應用 Ajax 來做非同步資料請求的方式。

Ajax 全名為 Asynchronous JavaScript and XML，一種允許瀏覽器與伺服器交換資料，而不需刷新頁面的技術，都可以叫做 Ajax.

Ajax 這個名字是在 2005 年 5 月的時候，Adaptive Path 的 Jasse James Garrett 在他所寫的「Ajax : New Approach to Web Application」文章中提出的。而 Ajax 這項技術，是由 Google 在 Google labs 發佈的 Google Maps 和 Google Suggest 後真正為人所認識。

Ajax 的技術特殊在於，資料在瀏覽器端與伺服器端交換資料時是「獨立傳輸」而不需要返回整個頁面，只需要更新頁面的一部分。而不需要更新整個頁面資料的技術有以下好幾種，目前最常見的是以XMLHttpRequest為基礎的 fetch 或使用 Axios 套件：

Flash
Java applet
框架
隱藏的 iframe
XMLHttpRequest : 此物件是 JavaScript 的一個模組，可使網頁與伺服器進行溝通，是創建 Ajax 應用的最佳選擇，實際上通常我們會把 Ajax 當成 XMLHttpRequest 物件的代名詞。

Ajax 的工作原理

客戶端	傳輸	伺服器端
xhtml	協議：xmlhttp	PHP…等
css	載體： Text, xml, Json…	其他語言
JavaScript

Ajax 相關工具

Ajax 並不是新技術，它實際上是集合好幾種技術，每種技術各盡其職，整合起來而成的技術。

伺服器端語言：伺服器端需具備像瀏覽器發送特定訊息的能力，Ajax 與伺服器端語言無關。
XML(eXtensible Markup Language, 可擴展標記語言)，是一種描述資料的格式。Ajax 需要某種格式化的格式來在客戶端和伺服器端之間傳遞資料，XML 是其中一種。
XHTML 和 CSS 標準化呈現
DOM 可以與之實現動態顯示與互動。DOM 簡介
使用 XMLHTTP 組件 XHLHttpRequest 物件進行非同步資料讀取。
使用 JavaScript 綁定和處理所有的資料。

Ajax 缺點

由 JavaScript 和 AJAX 引擎導致的瀏覽器兼容問題。
頁面局部更新，導致後退(回上一頁)功能失效。
對串接媒體的支持沒有 Flash, JavaScript 好。
部分 Mobile 設備如手機、平板支援度差。

XMLHttpRequest 概述

XMLHttpRequest 最早是在 IE 5 中以 ActiveX 組件的型態實現的，它並不是 W3C 的標準。

Internet Explorer 把 XMLHttpRequest 當成是一個 ActiveX 物件。
其他瀏覽器如 FireFox, Safari, Opera 把 XMLHttpRequest 當成一個本地端的 JavaSCript 的物件。
XMLHttpRequest 在不同瀏覽器上是可以互相兼容的，所以可以用同樣的方法去走訪 XMLHttpRequest 實例的屬性和方法，不論這個實例是用哪種方式創建。

創建 XMLHttpRequest 物件

為了每次寫 Ajax 的時候可快速開發，可以把 XMLHttpRequest 物件測試寫成一個可重複用的函式：

function getHTTPObject() {
  let xhr = false;
  if (window.XMLHttpRequest) {
    xhr = new XMLHttpRequest();
  } else if (window.ActiveXObject) {
    xhr = new ActiveXObject('Microsoft.XMLHTTP');
  }
}

HTTP 請求(request)與回應(response)

一個 HTTP 請求(request)由四個部分組成

HTTP 請求方法(method)或「動詞」(verb)
所請求的 url
一組選擇性的請求標頭(headers)，其中包含認證(authentication)資訊
一組選擇性的請求主體(body)

伺服器所送出的的 HTTP 回應(response)有三個部分

由數值與文字所組成的狀態碼(status code)，指定請求或失敗。
一組回應標頭(headers)
回應主體(body)

如何使用 Axios

Axios 在 Github 上說明，可透過 npm 安裝在開發專案上，或者也可以使用 CDN 將 Axios 引進來，就可以開始用了。

先以 GET 的方式向 Server 請求資料，因為 Axios 是非同步，所以response會在程式一行行都跑完後，最後才會跑.then的部分。

// 引入 axios
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>;

// 使用 GER 方法 / Make a request for a user with a given ID
axios
  .get('/user?ID=12345')
  .then(function (response) {
    // handle success 接收伺服器的回應
    console.log(response);
  })
  .catch(function (error) {
    // handle error 如有錯誤會到這裡
    console.log(error);
  })
  .then(function () {
    // always executed 無論如何都會執行
  });

// 使用 POST 方法
const newUser = { name: 'Tracy', age: 88, city: 'Paris' };
axios
  .post(urlParis, newUser)
  .then(function (response) {
    console.log(response.status);
    console.log(response.data);
  })
  .catch(function (error) {
    console.error(`something wrong! ${error}`);
  });