AJAX // XHR 練習

AJAX // XHR是什麼：

1. 利用 Javascript 程式進行連線
2. 近期使用最新的 fetch

fetch 函示基本語法：

fetch("網址").then(function(回應物件){
　　return (回應物件);
});

處理不同格式的語法：

• 根據連線後回傳的資料格式, 寫出相對應的程式
• 取得純文字資料的回應

fetch("網址").then(function(response){
　　return (response).text();
}).then(function(data){
　　console.log(data); // 純文字資料
});

• 取得 JSON 資料的回應

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>