ASP.NET MVC Framework - XHR

XHR

Ajax 在 JavaScirpt 中，是透過 XML HttpRequest（XHR）物件作為實作
他能夠在 Client 端對 Server 端送出 Http Request，使用的資料格式是 JSON (也可以用 XML 格式)

原生的 JavaScript 就可以使用 Ajax，不一定要用 jQuery 封裝 Ajax

XHR process

XHR 的流程

建立一個 XHR 物件，設定 URL 與 HTTP Method 然後送出 Request
等待伺服器 Response 後，透過 Callback Function 來進行後續動作

var xhr = new XMLHttpRequest();

// true: 非同步, false: 同步
xhr.open('get', 'http://xxx', true);
xhr.send(null);

XHR readyState

XMLHttpRequest 有各種狀態碼（readyState），能夠知道當前進行到什麼狀態了

0
- 已經產生 XMLHttpRequest，但還沒連結到要取得的網址
1
- 用了 open()，但還沒傳送資料過去
2
- 用了 send()
3
- loading 資料
4
- 撈回資料了，數據已接收完全

XHR Get

透過 API 取得資料

// 建立配置並使用 API
var xhr = new XMLHttpRequest();
xhr.open('get', 'http://xxx', true);

// 傳送資訊
xhr.send(null);

// 接收伺服器回傳資料
xhr.onload = function(data){
    console.log(xhr.responseText);
};

XHR Post

var xhr = new XMLHttpRequest();
xhr.open('post', 'http://xxx', true);

// 設定 RequestHeader，設定發送的資料是 form 的格式
xhr.setRequestHeader('Content-type', "application/x-www-form-urlencoded");

// 因為要 Login 所以需要帳號密碼
xhr.send('name=Test&password=123456');

XHR Post JSON

JSON 格式，記得先序列化

// 寫好要發送的資料（JavaScript Object）
var account = {
    name: 'Test',
    password: '123456'
}

var xhr = new XMLHttpRequest();
xhr.open('post', 'http://xxx', true);

// 設定 RequestHeader，設定發送的資料是 JSON 的格式
xhr.setRequestHeader('Content-type', "application/json");

// 資料先用 JSON 序列化，才能將其送給後端
var data = JSON.stringify(account);
xhr.send(data);

Summary

由於現今網站普遍需要複雜的應用，為了不讓程式碼裡滿滿的都在建立新的 XMLHttpRequest 實例，造成程式碼可讀性、可維護性降低

通常不會使用原生的方式操作 AJAX，而是利用 jQuery 或 Fetch 等方式
~~不過還是要瞭解一下嘛~~