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>