上週工作繁忙, 忙到廢寢忘食, 文章也一併給忘了
所以這週準備了兩篇都是精華~(至少我覺得是xD)

#什麼是阿賈克斯?

不是他xD

所謂的阿賈克斯是機翻的AJAX, 即「Asynchronous JavaScript And XML」取其開頭組合成的詞, 意指「非同步的JavaScript與XML技術」

其最大的優點, 就是能在不更新整個頁面的前提下維護資料
這使得Web應用程式更為迅捷地回應用戶動作, 並避免了在網路上傳送那些沒有改變的資訊

參考資料 -維基百科-AJAX

如字面上所說, 此技術可以非同步方式取得資料作運用
讓我們可以「局部的更新網頁」, 而不用「整個網頁重新整理」

#基本使用方式

使用時我們透過 XMLHttpRequest 物件跨瀏覽器撈資料
使用方式如下:

// 建立一個XMLHttpRequest物件
var xhr = new XMLHttpRequest();

接著會需要用到 XMLHttpRequest 內的 open() 方法, 此方法可設定傳遞方式&請求的Url&是否非同步:

// open(傳遞方式, 請求的Url, 是否非同步)
xhr.open();

第一個參數填入傳遞方式, 填入值遵循 HTTP標準, 都必須為大寫
其中常見的有: GET、POST、PUT等等
參考資料 -MDN-HTTP 請求方法
第二個參數填入請求的Url, 填入要抓資料的url, 例如要抓「臺北市立動物園行事曆」的open data 就可以填它提供的url: "https://data.taipei/opendata/datalist/apiAccess?scope=resourceAquire&rid=87b38c72-f9e7-4f75-b3af-5b6684f2a059"
參考資料 -台北市資料大平台
第三個參數填入是否非同步, 填入值為true或false

填完長這樣

// open(傳遞方式, 請求的Url, 是否非同步)
xhr.open('GET', 'https://data.taipei/opendata/datalist/apiAccess?scope=resourceAquire&rid=87b38c72-f9e7-4f75-b3af-5b6684f2a059', true);

接著要設定取回的資料要做什麼處理, 就必須在XMLHttpRequest上新增load事件:

// 回傳後做處理
xhr.addEventListener('load', function () {
    console.log(xhr.responseText); // 印出回傳的資料
});

最後把XMLHttpRequest送出, 也就是使用send()方法即可:

xhr.send();

完整的js長這樣:

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://data.taipei/opendata/datalist/apiAccess?scope=resourceAquire&rid=87b38c72-f9e7-4f75-b3af-5b6684f2a059', true);
xhr.addEventListener('load', function () {
    console.log(xhr.responseText);
});
xhr.send();

來看看console:

如此基本的抓資料的方式就完成囉~

太棒了又騙了一篇文xD
最近真的忙碌, 但再忙碌, 也要喝杯咖啡, 寫篇文

預告本週開始都會是AJAX系列文, 會將所學以及參考資料全部記錄下來
主要還是怕自己日後金魚腦袋又忘了xD