---
# System prepended metadata

title: AJAX - 2.同步&非同步
tags: [AJAX]

---

###### tags:`AJAX` 
# AJAX - 2.同步&非同步

承上一章節[AJAX - 1.透過 XMLHttpRequest 物件跨瀏覽器撈資料](https://hackmd.io/PsadAflPS06tkDqwXr0YPA?both)


`變數(自取名).open('','',true)`

自訂code參考
`NEWAJAX.open('get','https://hexschool.github.io/ajaxHomework/data.json',true);`

**true**:非同步.**false**:同步

### 非同步

這裡我們在打一段語法,測試撈到資料,發現沒有撈到任何資料,但是上一章節可以看到已經有連接到json資料
![](https://i.imgur.com/pszrhsU.jpg)

<span style="color:red"><b>true非同步</b>不會等資料傳回來,就讓程式繼續往下跑,等到回傳才會自動回傳.</span>

<span style="color:red"><b>fasle:同步</b>等資料傳回來,才會讓程式繼續往下去跑</span>

### 同步
將true改成flase,在重新跑一次,可以發現撈到responseText資料

```
var NEWAJAX = new XMLHttpRequest();

NEWAJAX.open('get','https://hexschool.github.io/ajaxHomework/data.json',true);

NEWAJAX.send(null);
console.log(NEWAJAX.responseText);
```

![](https://i.imgur.com/U1DuW1r.jpg)

<p style="color:red">大部分時候都使用true非同步,包括像是使用Vue,React等框架,因為資料量龐大時不可能等資料loading完</p>

### onload被動等資料載入完後才觸發
在true非同步情況下,如何撈資料並在製呢?這邊使用onload語法.被動等資料載入完後再作業,可以發現chorm console可以撈到資料

```
var NEWAJAX = new XMLHttpRequest();

NEWAJAX.open('get','https://hexschool.github.io/ajaxHomework/data.json',true);

NEWAJAX.send(null);


NEWAJAX.onload = function(){
    console.log(NEWAJAX.responseText);
}
```
![](https://i.imgur.com/ozWgkaK.jpg)

### onload情況下,抓資料傳送到網頁畫面

```
//html
 <div class="message"></div>
//js

var NEWAJAX = new XMLHttpRequest();

NEWAJAX.open('get','https://hexschool.github.io/ajaxHomework/data.json',true);

NEWAJAX.send(null);


NEWAJAX.onload = function(){
    console.log(NEWAJAX.responseText);
    var str = JSON.parse(NEWAJAX.responseText);
    document.querySelector('.message').textContent = str[0].name
}
```

![](https://i.imgur.com/Hl67KMZ.jpg)

 **整個流程為**
 1.建立一個XMLHttpRequest 
 2.傳送到對方伺服器要資料
 3.回傳資料到自己的瀏覽器
 4.拿到資料後再看看怎樣處理








