延續上一個 筆記的內容
參考 CodePen範例
上一個筆記中,成功撈取資料了。
現在使用console.log來確認一下。
卻發現是空的?
為甚麼沒有撈到呢? 這邊就要來看同步與非同步觀念。
非同步 true
xhr.open('格式','網址',true);
true 指的是非同步,不會等資料傳回來,就讓程式繼續往下跑,等到回傳後才回自動傳回去。
同步 false
等資料傳回來程式才會往下跑console.log(xhr.responseText);
。
要使用true 還是 false?
大部分時候因為檔案大,若要等資料全部回傳後再繼續執行,會造成使用者體驗不佳。
通常會使用true非同步。
如何讓非同步正確撈到資料?
上圖顯示,因為使用非同步,所以在還沒有撈到資料前,就已經執行了console.log(xhr.responseText);
,所以顯示不出來,該如何設定讓他在正確取得資料後,才執行呢?
我們可以利用onload。
onload 在確定資料回傳後,才會執行。
xhr.onload = function(){
console.log(xhr.responseText)
}
處理回傳後的資料
JSON資料回傳後會變成字串,我們可以使用JSON.parse(),將他轉換成陣列格式。
xhr.onload = function(){
console.log(xhr.responseText)
var str = JSON.parse(xhr.responseText)
}
將資料帶入到HTML內
xhr.onload = function(){
console.log(xhr.responseText);
var str = JSON.parse(xhr.responseText);
document.querySelector('.message').textContent = str[0].name;
}
AJAX 步驟統整
- 建立一個物件 XMLHttpRequest()
- 傳送需求到對方伺服器 xhr.open()
- 回傳資料到自己的瀏覽器 xhr.send()
- 處理資料 xhr.onload