淺談 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 的技術特殊在於，資料在瀏覽器端與伺服器端交換資料時是「獨立傳輸」而不需要返回整個頁面，只需要更新頁面的一部分。

不需要更新整個頁面資料的技術有好幾種：

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的部分。

線上模擬 api www.mocky.io

<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.error(error);
  })
  .then(function () {
    // always executed 無論如何都會執行
  });

// 使用 POST 方法

HTTP Methods

運作方式為 Server -> JSON -> Client -> AJAX -> Server

1. GET 讀取 readoncy

只有 GET 才應使用 Query String (重要)
如果 fd 結尾 -> 讀取單一物
如果沒有 fd 結尾 -> 讀取該物的 collection

2. DELELE 刪除特定資料

3. POST 建立新資源

會把資源的 ID 傳回給用戶
如果 POST 兩次怎麼辦？

4. PATCH 更動資源的部分內容

URL = /v1/users/1001
Method = PATCH
Request Body = { “age” : 31}

5. PUT 新上傳的內容、覆蓋原來的

或是 Partial Update 部分更動

6. Method OPTIONS

用來查詢某ㄧ資源，並能使用的 method
在 cors domain request 時 Client 端會先發出 OPTIONS 查詢