HackMD
Ajax、API串接與跨來源處理
tags: Ajax
原文網址：輕鬆理解 Ajax 與跨來源請求
Ajax也俗稱API串接，目的是取得資料，可以從不同網域或是後端取得資料。
通常串接API會使用非同步處理js，例如：
當非同步的操作完成時，就可以呼叫這個 Function，並且把資料帶進來。
// 假設有個發送 Request 的函式叫做 sendRequest
sendRequest('https://api.twitch.tv/kraken/games/top?client_id=xxx', callMe);
function callMe (response) {
console.log(response);
}
// 或者寫成匿名函式
sendRequest('https://api.twitch.tv/kraken/games/top?client_id=xxx', function (response) {
console.log(response);
});
要發送 Request 的話，就要透過瀏覽器幫我們準備好的一個物件，叫做XMLHttpRequest，範例程式碼如下：
var request = new XMLHttpRequest();
request.open('GET', `https://api.twitch.tv/kraken/games/top?client_id=xxx`, true);
request.onload = function() {
if (request.status >= 200 && request.status < 400) {
// Success!
console.log(request.responseText);
}
};
request.send();
CORS
可以跨域 Domain 的API串接方式
Header 裡面必須加上Access-Control-Allow-Origin
JSONP
利用<script>達到跨域的請求
<script>
receiveData({
data: 'test'
});
</script>
<script>
function receiveData (response) {
console.log(response);
}
</script>
利用 JSONP，也可以存取跨來源的資料。但 JSONP 的缺點就是你要帶的那些參數永遠都只能用附加在網址上的方式（GET）帶過去，沒辦法用 POST。
