JavaScript - AJAX

AJAX

非同步 JavaScript 及 XML （Asynchronous JavaScript and XML，AJAX）不是一種「技術」，而是一種開發架構，主要以 JavaScript 與 XML 為主，也包括 CSS、DOM（Document Object Model）與 HTML 等，最重要的是 XMLHttpRequest 物件。使 AJAX 能達到非同步資料交換的目的。使瀏覽器不需要重新載入整個頁面就可以跟後端或伺服器取得資料。
Jesse Garrett 的文章中，對 AJAX 的定義如下：

● 使用 XHTML 與 CSS 作為展現標準
● 使用 DOM 作為動態顯示與互動
● 使用 XML 與 XSLT 作為資料交換與運用
● 使用 XMLHttpRequest 作為非同步的資料回饋
● 使用 JavaScript 結合以上所有結果

實作取得一個公車路線公開資料如下：

const URI =
  "https://ptx.transportdata.tw/MOTC/v2/Bus/Route/City/NewTaipei?$top=600&$format=JSON";
const xhr = new XMLHttpRequest();

xhr.open("GET", URI, true);
xhr.send(null);
xhr.onload = function () {
  if (this.readyState === 4 && this.status === 200) {
    var data = JSON.parse(this.responseText);
    console.log(data);
  }
};

XMLHttpRequest

建立一個名稱為 xhr 的 XMLHttpRequest 物件，利用這個物件的方法進行資料請求。執行後在 dev tool 裡用 console.log 查詢一下

const xhr = new XMLHttpRequest();

readyState 就是目前回傳狀態

0 - (request not initialized)還沒開始
1 - (server connection established)用了open()，但讀取中
2 - (request received)已讀取
3 - (processing request)資訊交換中
4 - (request finished and response is ready)一切完成

接著用 open()指令來初始設定發出請求的方式，包括三個參數：
第一個參數是 HTTP request 的方法，GET(讀取）、POST（發送），這些方法都是大寫。第二個參數是請求頁面的 URL。第三個是同步(false)與非同步(true) 。

xhr.open("GET", URI, true);

確實發出請求，此方法可帶參數，傳送給對方的資料。或空值，沒有要傳資料

xhr.send(null); //

利用 if 判斷式(xhr.status == 200)，來確認有沒有撈到資料，條件成立再去執行要做的行為。onload 表示當資料回傳，就會調用相應處理的函數。當中有 if 判斷。status 代表 HTTP 狀態碼，200 表示 ok，在此我們希望完成時有下一步動作，所以判斷條件爲 this.readyState === 4 && this.status === 200 。接著我們使用一個變數 data，存放取得的資料，responseText 返回在發送請求後從服務器接收的文本。我們利用 JSON.parse 解析數據，使數據成為 JavaScript 對象。接著使用 console.log 把它顯示出來。展開物件來看看結果如下：

xhr.onload = function () {
  if (this.readyState === 4 && this.status === 200) {
    var data = JSON.parse(this.responseText);
    console.log(data);
  }
};

成功拿到資料後，再按需求渲染到前端畫面即可

Asynchronous(非同步)概念

open 裡面第三個欄位的參數為。

true: 非同步,不會等資料傳回來就讓程式繼續往下跑,等到資料跑完才自動回傳。
false: 同步,會等資料跑完回傳回來,程式再繼續往下跑。有些伺服器的資料是很龐大的，一般來說不太可能等全部跑完再執行之後的程式碼，所以就會用非同步的概念。這種情況就需要用到onload這個事件來解決。意思就是當傳送後載入完成再去執行這個onload帶的 function。

HTTP 狀態碼

透過 chrome 瀏覽器開發工具中的 Network 去確認，選擇 JS 後看到 Status的

status = 200，資料有正確回傳，有撈到。
status = 404，資料讀取錯誤，沒有撈到。

詳細 http 狀況碼可以參考 MDN

POST Method

POST 相比 GET 需要在 open 之後多一個指令 setRequestHeader，告訴伺服器現在要傳送資料、並告知資料的格式。而setRequestHeader與send也會因為格式不同而要傳送不同的內容。這邊用註冊的概念來舉例，送出要註冊的帳號密碼，可以透過 xhr 中的responsText來確認是不是有相同帳號。

var account = {
  email: "qweasdqq@gamil.com",
  password: "555"
};
var xhr = new XMLHttpRequest();
xhr.open("post", "url", true);
xhr.setRequestHeader("Content-type", "application/json");
var data = JSON.stringify(account);
xhr.send(data);