# AJAX - 透過 XMLHttpRequest 物件跨瀏覽器撈資料

## 生成 XMLHttpRequest

當我們開始使用 AJAX 技術時，首先需要先生成一個 **XMLHttpRequest** 物件

var xhr = new XMLHttpRequest();

生成之後，透過 console 來看，可以看到 **XMLHttpRequest** 物件有許多屬性，我們先關注在 **readyState** 上，可以看到目前是 **0**，代表瀏覽器偵測到你已經生成一個 **XMLHttpRequest** 物件，但還沒連結你要撈的資料


---

## open()

接著我們要使用 **open()** 函數來設定我們要撈的資料

xhr.open('類型','取得資料的網址','同步或非同步');

- 類型: **get(取得資料)/post(傳送資料到伺服器)**
- 同步或非同步: 後面會在講解，目前先寫 **true**

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

設定好要取得資料的相關設定後，我們再來看看 xhr 的狀態，可以看到 **readyState** 來到了狀態 **1**，表示瀏覽器偵測到你已經使用 **open()** 函數設定好了，但還沒把資料傳送過去。


---

## send()

接下來使用 **send()** 函數來將我們的請求傳送出去,而因為我們這次是使用 **get** 類型取得資料，並不用傳送任何值給伺服器，因此我們代入 **null**

xhr.send(null);

接著查看 xhr 的狀態， **readyState** 變為 **4**，代表 AJAX 的請求已經完成了! 數據成功接收到了!
另外也發現 **responseText** 成功撈到資料了!
後續我們會繼續說該如何處理這筆資料並把它更新到我們的畫面上!


---
## 等等啊 2 跟 3 咧?

原本打算呼攏過去但被你發現了~
**2** 代表偵測到你使用了 **send()**
**3** 代表還在 **loading** 中，當一切都完成了自然看不到這兩種狀態!

以下整理一下 **readyState** 的各種狀態

---

## readyState

**0** : 偵測到你已經生成一個 **XMLHttpRequest** 物件，但還沒連結你要撈的資料
**1** : 瀏覽器偵測到你已經使用 **open()** 函數設定好了，但還沒把資料傳送過去
**2** : 偵測到你使用了 **send()**
**3** : 還在 **loading** 中
**4** : **AJAX** 的請求已經完成了! 數據成功接收到了!

###### tags: `AJAX`