有天小明在寫一封 Email 打了好長好長，突然間..電腦變成黑畫面，小明頓時臉綠了起來，明天就得交出報告了，剛剛又沒存檔..心想：「死定了！」，結果又打開時，發現竟然跑出相同的文件，並且出現了個提示：「您有一封尚未完成的信件，是否要繼續編輯」，小明馬上點擊【繼續】後，眼前突然一片光….。
AJAX即「Asynchronous JavaScript and XML」（非同步的JavaScript與XML技術），指的是一套綜合了多項技術的瀏覽器端網頁開發技術。
AJAX 做的事情就是可以幫助我們在運行網頁時，偷偷的在背後做一些不為人知的事情，其實這一切也不是為了要偷偷做什麼，而是可以讓使用者體驗更卓越，讓我們來解釋一下關於我所了解的 AJAX。
將 Asynchronous JavaScript and XML 拆為
Asynchronous
非同步，很口語化就是可以在你網頁執行做事情的時候，AJAX也可以一邊做事情
JavaScript
就是我們現在所用的 JavaScript
XML(Extensible Markup Language)
XML 是因為在最早開始通用的可延伸標記式語言，能讓資料更好閱讀，而在現今大部分的 XML 格式已經漸漸被 JSON 給取代了。
如何開始使用 AJAX
- 準備一個網頁伺服器
- 準備一份簡單的文字檔案或 JSON 檔案
- 利用 XMLHttpRequest 或 jQuery.ajax 來取得資源
準備一個網頁伺服器
為什麼需要準備一個網頁伺服器？在 AJAX 的協議（protocol）中，為了安全性是禁止 file:/// 這樣子的檔案位置，所以我們必須要有一個網頁伺服器來產生 http(s):// 這樣的網址。
如何利用 nodeJS 架設一個網頁伺服器可以參考 nodeJS Day — 1 的文章介紹
準備一份簡單的文字檔案或 JSON 檔案
note.txt
今日目標：學會 AJAX 產生 txt 的內容note.json
{
"name": "JS20Min",
"goal": "學會 AJAX 產生 txt 的內容"
}利用 XMLHttpRequest 或 jQuery.ajax 來取得資源
XMLHttpRequest 是比較舊式的寫法，也是最初 AJAX 的起源，而後來的 AJAX 函式庫都是透過包裝 XMLHttpRequest 來簡化舊式寫法所帶來的麻煩。
XMLHttpRequest 取得資源
首先要先取得瀏覽器所提供的 XMLHttpRequest 方法，建立一個 XMLHttpRequest 實體
const xhttp = new XMLHttpRequest()
xhttp.onreadystatechange = function() {
if (this.readyState === 4 && this.status === 200) {
document.write(xhttp.responseText)
}
}
xhttp.open('GET', './note.txt', true)
xhttp.send()有幾個比較關鍵及重點的部分
XMLHttpRequest
使用 AJAX 前必須要產生一個 XMLHttpRequest 物件的實體，而我們要用 new XMLHttpRequest() 來產生
onreadystatechange
onreadystatechange 是一個 callback(callback-回呼是什麼可以參考這篇文章) 在 XMLHttpRequest 運作時會回傳每次的狀態（readyState），而狀態（readyState）分為四種
0: send 方法還沒有被呼叫
- send 已經呼叫，已經發出請求，正在運行中
- send 執行結束，收到結果
- 解析內容
- 解析完成，已經可以使用
像範例中的一樣，我們可以利用
this.readyState來取得目前狀態，每次的狀態回傳都會產生不一樣的結果，因此我們會等到 readyState 是 4 的時候知道完成了。
還有一個是網頁的狀態碼
this.status代表的是網站目前所回應的結果狀態，通常 200 代表的是伺服器完成整個資源的提取，並且回傳成功時。
因此我們會將兩種狀態拿來一起判斷，直到整個狀態都確定完成了，就可以做下一件事情。
open(method, url, async)
設定要請求的類型設定
method: 網頁資源的常用請求方法有兩種（GET、POST），兩種的資源請求都有不同的場景用法
url: 要連接的資源（檔案）位置
async: 是否要異步處理
send()
確定將資源請求傳送至伺服器
jQuery.ajax 取得資源
載入外部 jQuery 與 main.js
<html>
<head></head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src='./main.js'></script>
</body>
</html>- $.ajax(url: string, setting: object)
jQuery 包裝了一個 ajax 方法，可以讓我們快速的產生 Ajax 的程式碼，不用再一個一個去做出並分析功能。
$.ajax('./main.js', {
success: (data) => {
document.write(xhttp.responseText)
}
})success
success 是一個 callback 回呼方法，相當於
if (this.readyState === 4 && this.status = 200) {
document.write(xhttp.responseText)
}在 jQuery 世界中，只要用 ajax 方法就解決了很多打字的成本。
參考資料
