###### tags:`AJAX`
# AJAX - 1.透過 XMLHttpRequest 物件跨瀏覽器撈資料

以下為記錄**透過 XMLHttpRequest 物件跨瀏覽器撈資料**方式

1.在HTML檔連結的js檔宣告

`var 變數(自取名) = new XMLHttpRequest();`

2.打開網頁chorme console 輸入自己設的變數名,可以看到相關資料.
這邊我設的是NEWAJAX

### readyState撈資料狀態顯示
**readyState:0** 你已經產生一個新的XMLHttpRequest,但還沒有連結你要撈的資料

3.開始寫撈資料語法,語法是

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

三個參數個別代表意義是:**格式、撈資料網址、同步或非同步**

常見格式:get(讀取資料)、post(傳送資料倒伺服器)、
這邊讀取網址是使用六角學院線上課程的老師給的範例json url
**true**:非同步.**false**:同步
(非同步資料請看另一[章節](https://hackmd.io/KxaZa7V0SLebq2cPvi3kWA))

4.寫完後再重新整理,打開chorme console看一下XMLHttpRequest狀態

**readyState:1** 你用了open(),但你還沒有把資料傳送過去
注意:這邊可以看到responseText是空值

5.傳送資料,和json互動,因為我們這邊沒有要改變資料,所以可以傳送空值<kbd>null</kbd>

`變數(自取名).send(null)`

6.寫完後再重新整理,打開chorme console看一下XMLHttpRequest狀態,
可以發現出現readyState:4,以及response和responseText都撈到資料.

**readyState:4** 你撈到資料了,數據已經完全接收到了
**readyState:3** loading中,資料量較為龐大時出現
**readyState:2** 偵測到你有用send

Ps:<kbd>readyState:2</kbd> 沒有截到圖片,因為資料量很少,很快就撈到,直接讀取到<kbd>readyState:4</kbd>