[Day 21] JavaScript AJAX 網路連線實務(利用fetch函式)

2024 iThome 鐵人賽

DAY 21

JavaScript

從零開始學習JavaScript 30天系列第 21 篇

16th鐵人賽

tonywang0707

團隊噗攏共

2024-08-28 23:09:38

216 瀏覽

分享至

Hi，大家好，我是Tony，是一個對於JavaScript有一點點概念的新手。

第21天，加油！
今天的學習內容是：JavaScript AJAX 網路連線實務(利用fetch函式)

學習內容來自
彭彭老師AJAX 網路連線實務
https://www.youtube.com/watch?v=6X8sDGFGRss&list=PL-g0fdC5RMbqW54tWQPIVbhyl_Ky6a2VI&index=28

昨天的學習內容：[Day 20] JavaScript HTTP 通訊協定簡介
https://ithelp.ithome.com.tw/articles/10346561

1. 什麼事 AJAX/XHR技術？

意思是在網頁前端，利用JavaScript程式，到伺服器進行網路連線的動作。
初期稱為Asynchronous JavaScript and XML技術，簡稱AJAX。
中期使用XMLHttpRequest物件，來跟伺服器連線，稱為XHR技術。
近年採用fetch函式來做到網路連線功能。
接下來就會學習使用fetch函式來進行連線。

2. 網路連線的步驟

學習fetch函式之前，先了解網路連線步驟。

確認要連線的網址。
用程式建立、發出連線。
取得伺服器的回應。
這樣就算是完成了一次網路連線。

3. 使用fetch函式

是一種JavaScript內建的連線函式。
基本語法：

fetch(網址).then(function(回應物件){
    console.log(回應物件)
});

由於伺服器給的資料有不同格式，針對不同格式要用不同程式。

取得的是純文字的資料回應，語法就是

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

取得的是JSON格式的資料回應，語法就是

fetch(網址).then(function(response){
    return response.json();
});.then(function(data){
    console.log(data);  //JSON格式資料
});

練習

由於要練習AJAX需要用到後端伺服器的資料，
但是目前學習的內容都還是在前端，
彭彭老師提供了一了後端JSON格式資料讓我們練習。
資料網址：https://cwpeng.github.io/live-records-samples/data/products.json
點入網址就會看到資料內容如下：

練習1：建立按鈕，利用fetch函式，連線取得資料

使用getData與response
印出來看看有沒有連到

<body>
    <h3>AJAX / XHR 網路連線實務</h3>
    <button onclick="getData();">連線取得資料</button>
    <script>
        function getData(){
            //利用 fetch 進行連線
            fetch("https://cwpeng.github.io/ive-records-samples/data/products.json")
            .then(function(response){
                console.log(response);
            });
        }
    </script>
</body>

網頁結果1 (點擊Youtube影片播放)
有連到，response顯示的還有其他網頁資料

練習2：連線取得資料，並能夠解讀JSON格式

剛剛只有連線取得回應物件，現在要
印出來看看有沒有連到

<body>
    <h3>AJAX / XHR 網路連線實務</h3>
    <button onclick="getData();">連線取得資料</button>
    <script>
        function getData(){
            fetch("https://cwpeng.github.io/live-records-samples/data/products.json")
            .then(function(response){
                return response.json();
            }).then(function(data){
                console.log(data)
            });
        }
    </script>
</body>

網頁結果2 (點擊Youtube影片播放)
可以看到取得的資料已經可以看到內容了。

練習3：連線取得資料，並顯示在頁面上

能夠連線取得資料後，試著將資料顯示在頁面中
寫一個div，再把資料放進去，
利用for迴圈，將陣列的資料每一筆都拿出來，

<body>
    <h3>AJAX / XHR 網路連線實務</h3>
    <button onclick="getData();">連線取得資料</button>
    <div id="result"></div>  <!--div用來顯示資料-->
    <script>
        function getData(){
            fetch("https://cwpeng.github.io/ive-records-samples/data/products.json")
            .then(function(response){
                return response.json();
            }).then(function(data){
                // 已經取得資料，把資料呈現在畫面上
                let result=document.querySelector("#result");
                for(let i=0;i<data.length;i++){
                    let product=data[i];
                    result.innerHTML+="<div>"+product.name+","+product.price+","+product.description+"</div>";
                }
            });
        }
    </script>
</body>

網頁結果3
重新整理，按下取得資料後，就會看到伺服器資料都顯示在網頁了。