什麼是 AJAX ?如何遠端撈取資料?

Ajax 是 Asynchronous JavaScript and XML 的縮寫。
Asynchronous - 非同步
JavaScript - 使用的程式語言
XML - Client 與 Server 交換資料用的資料與方法，近年由於 JSON 等格式的流行，使用 Ajax 處理的資料並不限於 XML。

AJAX 基本觀念

AJAX可以在不用重整網頁(更新網頁)下，去和資料庫、後端程式、PHP 等拉取資料或結果。

透過 XMLHttpRequest 物件跨瀏覽器撈資料

如何拉遠端的資料?

步驟一
使用瀏覽器撈對方伺服器要資料時，一定要新產生這個物件: XMLHttpRequest();。
要透過這個物件，才能和其他伺服器要資料。

let xhr = new XMLHttpRequest();

上圖可以看到包裹中的項目，其中:
onload - 當資料取得完成後，立即觸發這個function
readyState - 撈取資料的狀態。

• readyState: 0 - 已產生XMLHttpRequest，但尚未連結要取得的資料。
• readyState: 1 - 用了open()，但尚未傳送send()。
• readyState: 2 - 偵測到有使用send()。
• readyState: 3 - 載入中。
• readyState: 4 - 有撈到資料了，數據已經完全接收到。

responceText - 資料文字，若回傳的是JSON資料，使用JSON.parse()解析。

步驟二
撈取資料。

let xhr = new XMLHttpRequest();
xhr.open('格式','要讀取的網址',同步或非同步)
//格式: get讀取資料；post傳送資料到伺服器(例如:要確定帳設定有沒有重複，所以會帶資料傳送過去到資料庫確認、驗證)

這時候 readyState 是 1 。已經設定好格式，但是還每把需求傳送過去。

步驟三
傳送需求。

let xhr = new XMLHttpRequest();
xhr.open('格式','要讀取的網址',同步或非同步)
xhr.send(null/需求);
//null: 格式使用get表示我們要讀取資料，所以不能傳送任何東西過去。
//需求: 格式使用post時，表示我們要傳送東西過去資料庫驗證，所以需要將需求附上。

這時候responceText就會撈到資料囉!。

XMLHttpRequest.withCredentials

XMLHttpRequest.withCredentials 屬性是一個 Boolean 型別，它指出無論是否使用 Access-Control 標頭在跨站的要求上，都應該使用像 Cookies、Authorization 標頭或 TLS 用戶端憑證來進行驗證。在相同來源的要求設定 withCredentials 沒有任何效果。

let xhr = new XMLHttpRequest();
xhr.open('GET', 'http://example.com/', true);
xhr.withCredentials = true;
xhr.send(null);