---
# System prepended metadata

title: AJAX - 非同步觀念(下)
tags: [AJAX]

---

# AJAX - 非同步觀念(下)

我們知道 **AJAX** 在非同步的狀況下，獲取資料的過程中程式會繼續往下跑，那我們該如何在它載入完資料後及時的去抓取資料呢?

![](https://i.imgur.com/efj7tXC.png)


我們可以使用 **XMLHTTPRequest** 物件的 **onload** 屬性，它可以監聽當資料載入後我們要執行那些事情

因此我們這樣寫

```htmlembedded=
<body>
    <div class="message"></div>
    <script src="all.js"></script>
</body>
```

```javascript=

var xhr = new XMLHttpRequest();
xhr.open('get','https://hexschool.github.io/ajaxHomework/data.json',true);
xhr.send(null);

//當載入完成後
xhr.onload = function(){
    //獲取資料並處理
    var str = JSON.parse(xhr.responseText);
    document.querySelector('.message').textContent = str[0].name;
}
```

這樣就可以成功抓到值了!

![](https://i.imgur.com/MKPuP4h.png)

###### tags: `AJAX`
