# 詳細解釋什麼是Ajax?
> Explain Ajax in as much detail as possible.
:::info
:a: jax 是 Asynchronous JavaScript and XML 的縮寫，並不是新的程式語言，是多個技術的組合，用於建立快速動態的網頁。
通過在後台與伺服器進行少量資料交換，Ajax可以使網頁實現非同步更新，也就是說可以不用重整網頁就能達到局部更新，進而減少了網頁等待時間，同時也降低了網絡流量，增強使用者體驗。
:::
## 什麼是 Ajax?
**Ajax**：非同步 JavaScript 及 XML（Asynchronous JavaScript and XML）
> **A**synchronous：非同步
> **J**avaScript：使用的程式語言
> **A**nd
> **X**ML：Client 與 Server 交換資料用的資料與方法，近年由於 JSON 等格式的流行，使用 Ajax 處理的資料並不限於 XML。
> [color=#3b75c6]
Ajax並不能稱作是單一的「技術」，而是 2005 年時由 Jesse James Garrett 所發明的==術語==，描述一種使用數個既有技術的「新」方法。這些技術包括:
* **HTML**（超文本標記語言，語法較為鬆散的、不嚴格的Web語言）
* **XML**（可擴展標記語言，主要用於存儲數據和結構）
* **XHTML**（可擴展超文本標記語言，基於XML，作用與HTML類似，但語法更嚴格）
* **XSLT**（一種用於將 XML 文檔轉換為 XHTML 文檔或其他 XML 文檔的語言）
* **CSS**（層疊樣式表）
* **JavaScript**
* **DOM**（文件物件模型）
* **XMLHttpRequest物件**（最重要的一項，Ajax利用這個物件來向伺服器進行通訊。 它可以傳送並接收多種格式的資訊，包括JSON、XML、HTML、以及文字檔案。）
:pushpin:當這些技術被結合在 Ajax 模型中，Web 應用程式便能快速、即時更動介面及內容，不需要重新讀取整個網頁，讓程式更快回應使用者的操作。
*:bulb:「AJAX」概念的命名者 - 傑西·詹姆士·賈瑞特
「Google地圖」於2005年上線後，當年2月傑西發表出一篇談論此讓網頁透過Javascript以XML格式來回傳資料、達到非同步更新網頁內容技術的文章，並將此技術以「AJAX」來簡稱。(維基百科)*
## 沒有Ajax的傳統網頁
使用**同步請求 (Synchronous request)：**
1. 客戶端 (Client) 對伺服器端 (Server) 送出 Request ，並且在收到伺服器端的 Response 之後才會繼續下一步的動作，等待的期間無法處理其他事情。
2. 對照上圖來看，每一次的發送Request，瀏覽器都要重新載入整個頁面。假設頁面有100k的數據，只有1k數據需要刷新，如果使用同步載入的方式，每一次載入都會消耗100k，這樣使得瀏覽器要一次處理很多資料，造成運作速度緩慢。
## 運用Ajax的現代網頁
使用**非同步請求 (Asynchronous request)：**
1. 客戶端 (Client) 向伺服器端 (Server) 送出 Request 之後，不需要等待結果，仍可以持續處理其他事情，甚至繼續送出其他 Request。
2. Responese 傳回之後，內容就被即時融合進當下頁面或應用中。這也是為什麼當我們瀏覽 Facebook、Twitter 內容時，不會看見整個網頁一直重新整理。
3. 套用剛剛的例子，假設頁面有100k的數據，使用Ajax的網頁只需要刷新1k的數據來更新局部，其餘99k的數據都不需要再重傳。
4. 使用Ajax的網頁相較於傳統網頁，它大幅度降低每次請求與回應的資料量，提高了瀏覽速度。
> **Ajax執行的特色**
* 使用 JavaScript 來和 Server 通訊
* Server-side 需要運用 XHR 物件
* Server-side 的後端程式將 response 組織成XML
* Response 也有其他的替代格式(Text, html tags, JSON)
* 瀏覽器接收到的 Response 交給 DOM 來處理
## Ajax 實現非同步請求的工具
**==XMLHttpRequest 物件==**
* XMLHttpRequest(XHR)是原生 JS 對於 HTTP 請求的操作物件。
``` JavaScript
function sendRequest(){
// 創建 XMLHttpRequest 物件
var xhttp = new XMLHttpRequest();
// 發送 Request 給 Sever 時內容的類型 (POST時一定要設置)
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
// 處理伺服器傳回的資料
xhttp.onreadystatechange = function() {
// 當 readyState 等於 4(Request發送完成) 且狀態為 200("ok") 時，表示載入已就緒：
if(this.readyState == 4 && this.status == 200) {
document.getElementById('responseOutput').innerHTML = this.responseText;
}
};
// 規定 Request 的類型、URL 以及是否異步處理 Request。
xhttp.open("GET","http://www.example.org/example.txt", true);
// 將 Request 發送到 Server
xhttp.send();
}
```
[MDN - AJAX 相關技術的基礎](https://developer.mozilla.org/en-US/docs/Web/Guide/AJAX/Getting_Started)
**==Fetch API==**
* Fetch() 是 ES6 新增的 HTTP 請求方法，基於 Promise 所設計，他讓接口更簡單、簡潔、同時也避免了回調的複雜性，主要就是用來取代傳統的 XMLHttpRequest。
```javascript
// post 的範例
fetch('https://randomuser.me//admin/signin', {
// 設定為 POST 請求
method: 'post',
// 在 headers 加入 json 格式
headers: {
'Content-Type': 'application/json',
},
// 傳送內容須轉換為字串
body: JSON.stringify({
username: 'test@gmail.com',
password: '66666666',
}),
})
.then((response) => {
return response.json();
})
.then((data) => {
console.log(data);
})
.catch((error) => {
console.log(error);
});
```
**==Server-Sent Events==**
* 傳統的網頁架構下，如果瀏覽器要持續接收來自於伺服器端的新資料時，通常都是透過 Polling、Long-Polling 或 Streaming 等方式來達成，而後來出現的 WebSocket 徹底解決了這個問題，不過除此之外，在 HTML5 標準中還有一個 Server-Sent Events 也可以處理這類型的問題。
* Server-Sent Events（簡稱 SSE）是一個已經被 W3C 納入 HTML5 標準的 API，它提供一個跨平台與瀏覽器的資料傳輸方式，可以讓伺服器主動傳送資料給瀏覽器。
* SSE 基本的概念跟 WebSocket 有點類似，瀏覽器透過 SSE 來「訂閱」伺服器上的一個資料來源，每當伺服器有新資料產生的時候，就會傳送通知訊息給瀏覽器，以便及時更新瀏覽器的網頁內容。
[HTML5 的 Server-Sent Events 介紹、串流使用教學 - G. T. Wang](https://blog.gtwang.org/web-development/stream-updates-with-server-sent-events/)
[MDN - 使用 server-sent 事件](https://developer.mozilla.org/zh-TW/docs/Web/API/Server-sent_events/Using_server-sent_events)
## 延伸 - Ajax 的挑戰
[使用Ajax的挑战](http://blog.itpub.net/374079/viewspace-130000/)
---
[MDN - Ajax](https://developer.mozilla.org/en-US/docs/Web/Guide/AJAX)
[什麼是 Ajax？ 搞懂非同步請求 (Asynchronous request)概念](https://tw.alphacamp.co/blog/ajax-asynchronous-request)
[(影片)重現90年代的網頁 - The Internet As It Was In 1996 - 90's Websites](https://www.youtube.com/watch?v=ojT0gQHeyJQ)
[(影片)Ajax - Introduction with Example](https://youtu.be/VTpPNIX1JXc)
Sign in with Wallet
Connect another wallet