udemy:js入門-學徒的試煉
# CH15 JS：AJAX(基本概念1)
> 網頁不需要重新載入，即可拿到後端資料
> ex.
> (1) 註冊郵件時顯示電子信箱是否已被使用
> (2) 商品加入購物車可立即知道有無庫存
> (3) google search的關鍵字
## 1. 透過XMLHttpRequest物件 跨瀏覽器撈資料

JS中設置透過瀏覽器請求對方伺服器的資料:

var xhr= new XMLHttpRequest();

### 1-1. redyState：0~4　不同的狀態

readyState:0
//0-你已經產生一個XMLHttpRequest，但還沒有連接撈的資料(網址)

readyState:1
//1-讀取到你用了.open()，但你還沒有把資料傳送過去
    (只用了瀏覽器開起來，還沒傳送)

readyState:2
//2-偵測到你有用send

readyState:3
//3-資料還在loading中

readyState:4
//4-你撈到資料了，數據已經完全接受到了

### 1-2. xhr.open("格式","讀取的網址",同步與非同步)
* 格式："get" 讀取資料(拿到資料) / "post" 傳送資料(帳號驗證)
* 讀取的網址：通常是後端
* 同步與分同步:false(同步) / true(非同步)

使用剛剛設置的變數打開
 xhr.open("get","https://hexschool.github.io/ajaxHomework/data.json",true)

### 1-3. 傳送 xhr.send()

xhr.send(null)
//只是要拿到資料(get): 可透過傳送空值null
//拿到資料後stateReady會變成:4

* 拿到資料後stateReady:4
* responseText: "撈到字串的資料"

responseText: "[{"name":"王曉明"}]"

### 1-4. 小結步驟 : XMLHttpRequest > .open() > .send()

## 2. Ajax非同步概念
### 2-1. 同步與非同步:false(同步) / true(非同步)
> * true 非同步: 不會等資料傳回來，就讓程式往下跑
> * false 同步: 會等資料傳回來，才讓程式往下跑

若使用非同步 true

var xhr= new XMLHttpRequest();

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

xhr.send(null);

console.log(xhr.responseText)

//程式碼跑到console.log()時資料還沒進來
  (速度太快)，因此會沒有印出資料
  
//此時若是設置為false同步 > 可以等資料傳回來才繼續跑程式(但容易因資料龐大而卡在這段程式)

### 2-2. onload 確定跑完後自動執行這個事件

onload= 全部載入完(readyState:4)會觸發/執行
onload不需要引數，直接接=一組動作function())

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

### 2-3. 建立html的class，把取得的資料放到class中

HTML中
<div class="message"></div>

JS中
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);
  //定義變數str將取得的資料轉成JSON(大寫)物件
  
  document.querySelector(".message").textContent=str[0].name
}
  //取得物件中的name資料 > 套用到.message中

### 2-4. 小結步驟
> 1. 建立一個XMLHttpRequest
> 2. 傳送資料到對方伺服器要資料
> 3. 回傳資料到自己的瀏覽器
> 4. 拿到資料後再看怎麼處理

## 3. stasus
> status:200 取得資料成功:資料正確回傳
> status:304 資料沒有編輯: 直接取用暫存的數據，不重新請求，減少多暫記憶體資源
> (304 透過清除快取解決)
> status:404 取得資料失敗:資料讀取錯誤
> status:500 資料錯誤
### 3-1. 使用if 套用status

//若資料取得成功(status:200)，
  則套用一下動作，else印出資料錯誤!

JS中:

var xhr=new XMLHttpRequest();
xhr.open("get","https://hexschool.github.io/ajaxHomework/data.json",true);
xhr.send(null);
xhr.onload=function(){ //資料跑完載入後，執行以下動作
  
  if(xhr.status==200){  //如果資料有取得成功(注意要使用==)
      var str=JSON.parse(xhr.responseText); 
      //定義變數str是轉成物件的引入字串 
      //變數記得要設定在布林中，因為有取得成功==200，才會有JSON物件
      document.querySelector(".message").textContent=str[0].name
      //取代class 文字
  }else{
      console.log("資料錯誤") //否則，印出"資料錯誤"
  }
  
}