0%

淺談 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 物件測試寫成一個可重複用的函式:

1
2
3
4
5
6
7
8
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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<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 查詢

相關連結:
axios/axios: Promise based HTTP client for the browser and node.js