# AJAX 非同步觀念

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

接續 [AJAX 基礎篇](/pCxNDP9JRUij1AvMpS3Lsw) 的內容

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)

<p style="text-align: justify">跑完 1~5 行程式碼，而且也已經確定成功撈到資料了，接下來想用 console.log() 來看 responseText 中的內容</p>

但是！怎麼沒有成功...

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

有 true 那當然就有 false

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

## 使用時機

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

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

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

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

修改後

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

## 資料來源
上課筆記 加上個人詮釋與額外補充
- [JavaScript 入門篇 - 學徒的試煉](https://www.udemy.com/course/javascript-learning/)

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