Coding101 Day1 學習使用XMLHttpRequest

學習如何使用XMLHttpRequest筆記

open的格式

onload

確定有資料回傳了，可使用onload來取得回傳的值

var xhr = new XMLHttpRequest();
// readyState 狀態
// 0  已經產生XMLHttpRequest,但還沒連結要撈的資料
// 1  用了open,但還沒把資料傳送過去
// 2  偵測到你有用send
// 3  loading
// 4  你撈到資料了，數據已經完全接收

// open('格式(get:讀取資料／post:傳送資料到伺服器)','要讀取的網址',true(同步)false(非同步))
xhr.open('get','https://hexschool.github.io/ajaxHomework/data.json',true);

// true 非同步，不會等資料傳回來，就讓程式繼續往下跑，等到回傳才會自動回傳 (多數使用true)
// false 會等資料傳回來，才讓程式繼續往下

// 只要讀取資料的話，填null空值即可
xhr.send(null);

console.log(xhr.responseText);

// onload 當資料確定有回傳了，則開始執行以下function
xhr.onload = function() {
  console.log(xhr.responseText);
  var str = JSON.parse(xhr.responseText);
  document.querySelector('.data').textContent = str[0].name;
}