iT邦幫忙

2024 iThome 鐵人賽

DAY 21
0
JavaScript

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

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

  • 分享至 

  • xImage
  •  

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函式之前,先了解網路連線步驟。

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

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
點入網址就會看到資料內容如下:
https://ithelp.ithome.com.tw/upload/images/20240828/20168410Sn0VWJwVTO.jpg

  • 練習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顯示的還有其他網頁資料
Yes


  • 練習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影片播放)
可以看到取得的資料已經可以看到內容了。
Yes


  • 練習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
重新整理,按下取得資料後,就會看到伺服器資料都顯示在網頁了。
https://ithelp.ithome.com.tw/upload/images/20240828/20168410p8sk38egkz.jpg

以上就是今天學習的內容。
謝謝大家,明天見!


上一篇
[Day 20] JavaScript HTTP 通訊協定簡介
下一篇
[Day 22] JavaScript 箭頭函式 (Arrow Function)
系列文
從零開始學習JavaScript 30天30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言