AJAX 非同步觀念

AJAX 是 Asynchronous JavaScript and XML 的縮寫，Asynchronous 意思就是「非同步」。

接續 AJAX 基礎篇 的內容

var xhr = new XMLHttpRequest();

xhr.open("get","https://www.ris.gov.tw/rs-opendata/api/v1/datastore/ODRP048/106",true);

xhr.send(null);

console.log(xhr.responseText)

跑完 1~5 行程式碼，而且也已經確定成功撈到資料了，接下來想用 console.log() 來看 responseText 中的內容

但是！怎麼沒有成功…

第 3 行的 true 表示「非同步」
在執行過程中，並不會等資料傳回來後才繼續往下跑，資料還沒撈回來，當然沒有東西可以看囉

有 true 那當然就有 false

true 不會等，後面就會直接先跑；false 則會等資料撈回才開始執行後續的程式

使用時機

如果要撈的資料很大，不可以就在這卡住，後面一堆都沒辦法跑，所以大部分都用「true (非同步)」

既然非同步狀態不會等，下面會直接跑，但這些程式又跟要撈的資料有關，那該怎麼修改？

搭配物件中的 onload 狀態，確認跑完才觸發事件內容，就能成功顯示撈回的資料

onload：網頁加載完畢後立刻執行

修改後

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

資料來源

上課筆記 加上個人詮釋與額外補充

• JavaScript 入門篇 - 學徒的試煉

tags: 六角學院 程式設計 前端 筆記