AJAX // XHR是什麼:
- 利用 Javascript 程式進行連線
- 近期使用最新的 fetch
fetch 函示基本語法:
fetch("網址").then(function(回應物件){
return (回應物件);
});
處理不同格式的語法:
- 根據連線後回傳的資料格式, 寫出相對應的程式
- 取得純文字資料的回應
fetch("網址").then(function(response){
return (response).text();
}).then(function(data){
console.log(data); // 純文字資料
});
fetch("網址").then(function(response){
return respones.json();
}).then(function(data){
console.log(data); // JSON 資料
});
練習:
<button onclick="getData()">取得連線資料</button>
<div id="result"></div>
<script>
// 利用 fetch 取得資料
fetch("網址").then(function(response){
return response.json();
}).then(function(data){
// 把取得的資料, 呈現在畫面上
let result=document.querySelector("#result");
result.innerHTML=""; // 先把畫面清空, 避免重複
for(let i=0;i<data.length;i++){
let product=data[i];
// 要寫 += 如果寫 = 會覆蓋不會一條一條列出
result.innerHTML+="<div>"+product.name+","+product.price;
}
});
}
</script>