【AJAX】用XMLHttpReques向遠端請求資料

▌前言

▌JS是單線程語言 (Single Thread)

代表在JS同時間一次只能做一件事情，所有事情要排隊一個個執行。

▌不屬於單線程的範圍(非同步)

像setTimeout、Ajax、Promise是WebAPIs，就不是單線程，可以同時執行。

▌AJAX是什麼?

AJAX又稱「Asynchronous JavaScript and XML」（非同步的JavaScript與XML技術）。
透過AJAX技術，可以向遠端的伺服器請求資料，但再發出請求的同時，並不會需要重整頁面。請求到資料後，可以再由前端進行整理，呈現出想要的資料。
例如可以到opendata找出想要的資料並使用。像之前做過的口罩地圖就是使用衛服部所提供資料，Kiang 整理的Json檔案進行資料請求，更新地圖資訊。比較常見的應用像是信箱的認證，確認是否有填寫錯誤，或是重複註冊等。

過去比較流行XML這種格式的資料，現在以JSON為大宗。

▌如何向伺服器請求資料?

我們可以使用XMLHttpRequest這個WebAPIs物件。

AJAX不等於XMLHttpRequest，XMLHttpRequest只是一個可以做到AJAX的方式

▌宣告XMLHttpReques

首先，先宣告一個XMLHttpRequest物件

1 2	var xhr = new XMLHttpRequest();

來看看他有哪些屬性可以操作

▌查看目前狀態XMLHttpRequest.readyState

XMLHttpRequest.readyState這個屬性會回傳目前的狀態

值	狀態	說明
0	UNSENT	有建立一個XMLHttpRequest物件，但 open() 方法尚未被呼叫，還沒有連結到要的資料
1	OPENED	已經open()這個方法，但是還沒有使用send()
2	HEADERS_RECEIVED	send() 方法已被呼叫，而且可取得 header 與狀態。
3	LOADING	回應資料下載中，此時 responseText 會擁有部分資料。
4	DONE	接收到遠端資料

▌設定要請求的資料open()

宣告完物件之後，現在要設定要連結遠端伺服器的資料，使用open()這個方法。

async：預設為true非同步，false為同步，選擇false會再資料還沒接收回來前都不會執行別的任務，這樣會破壞使用者體驗，不建議使用

1
2
3

xhr.open('讀取資料方式','遠端網址',同步或非同步-填ture或是false)
//以剛剛提到衛服部的資料作為範例
xhr.open('get', 'https://raw.githubusercontent.com/kiang/pharmacies/master/json/points.json', true);

可以看到readyState顯示1，使用open()，尚未send()的階段

▌送出設定好的資料到遠端伺服器進行請求send()

1
2
3

xhr.send(參數)
//因為使用GET的方式，所以不用傳遞參數
xhr.send(null)//預設參數是null

送出之後，這時候就要等一段時間等伺服器傳送資料
那要怎麼之道資料已經傳過來客戶端了呢?

▌確認資料回來了，使用onload

可以使用onload來執行資料回來之後的要做的事情
那我們就來看看接收到的xhr有什麼

1
2
3

xhr.onload= function(){
console.log(xhr);
}

可以看到readyState顯示4，成功接收到資料
在xhr.response也有內容
xhr.responseText也有字串

這樣就可以撈出資料，進行想要的處理

1
2
3

//將回來的資料從字串轉成JSON格式
var strData = xhr.responseText;
var JsonData = JSON.parse(strData);

以上就是使用XMLHttpReques向遠端伺服器請求資料!

參考資料：