iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 25
1
Modern Web

For 前端小幼苗的圖解筆記系列 第 25

Ajax - 以 GET 方法串接 API 資料 ( 以 JSON 為例 )

本篇以

  • GET 方法串接 JSON 文件內容示例。
  • 原生JavaScript、jQuery、Axios 三種寫法供參考。

適用於

  • 有基本的 JavaScript 應用能力。
  • 知道什麼是 Ajax 。
  • 知道透過 API 串接文件的用途。


1. XMLHttpRequest

示例

var dataUrl= "https://cloud.culture.tw/frontsite/trans/SearchShowAction.do?method=doFindTypeJ&category=6"
var xhr = new XMLHttpRequest()
xhr.open('GET',dataUrl, true)
xhr.send()
xhr.onload = function(){
    var data = JSON.parse(this.responseText);
    console.log(data);
}
//↑行5可以改成
xhr.onreadystatechange = function(){
    if(this.readyState === 4 && this.status === 200){
        var data = JSON.parse(this.responseText);
            console.log(data);
    }
}

分段說明:

// 1.設一個變數把API的URL存起來
var dataUrl= "API的URL"

// 2.new一個XMLHttpRequest物件(以此物件的方法進行資料請求) 
var xhr = new XMLHttpRequest()
// 3.以GET方法開啟一個請求
//open('Method',API的URL,預設值為true非同步進行)
xhr.open('GET',dataUrl, true)
// 4.送出請求(若為GET參數不填或填null)
xhr.send() 
// 5-1 或直接用 onload => 資料接收/送出成功後執行的function
xhr.onload = function () {
    var data = JSON.parse(this.responseText);
    console.log(data);
}
// 5-2.寫一個function處理狀態改變時(onReadyStateChange)
//   0=執行前    1=讀取中   2=已讀取  3=資訊交換中  4=完成
//   status(HTTP狀態碼):200 正常完成
xhr.onreadystatechange = function(){

    // 如果完成(readyState=4 , 且HTTP狀態正常 status=200)
    if(this.readyState === 4 && this.status === 200){
    
        // 將接回的資料存到變數data
        var data = JSON.parse(this.responseText);
        
        // 6.~~ 應用data(這裡先以console.log確認打回來的資料內容):  
            console.log(data);
    }
}

備註

  1. .open('~',~, true/false)

    • true 非同步(預設值):程式碼不會等資料回傳回來就會繼續執行後續程式碼
    • false 同步等資料處理(回傳/接收)完畢才繼續往下執行後續程式碼
    • 預設使用非同步的原因:若資料量大時等全部載完才執行後續動作UX很糟(卡在那)
  2. JSON.parse

    • JSON格式資料型態是陣列內包物件
    • 資料傳輸時會被轉換成string(字串)
    • 使用JSON.parse將資料轉換回原本的格式(陣列包物件)

2. Axios:

示例

需先安裝Axios,引入CDN:

<script src='https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js'></script>
var dataUrl= "https://cloud.culture.tw/frontsite/trans/SearchShowAction.do?method=doFindTypeJ&category=6"

axios.get(dataUrl)
.then( (res) => {
    console.log(res.data);
})
.catch( (err) => {
    console.log(err);
});

3. jQuery $.Ajax()

示例

需先安裝jQuery,引入CDN:

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
var dataUrl= "https://cloud.culture.tw/frontsite/trans/SearchShowAction.do?method=doFindTypeJ&category=6"
$.ajax({
    url: dataUrl,
    method: 'GET',
    dataType: 'json',
    data: '',
    async: true, 
   
    success: res =>{
        console.log(res)
        },
    error: err =>{
        console.log(err)
        },
});

詳解

// 先把API的URL存成一個變數
var dataUrl= "API URL"
$.ajax({
    url: dataUrl,  // 指定API 的 URL 
    method: 'GET', // 指定請求方法
    dataType: 'json',// API的格式
    data: '', //若有傳送資料時的資料設定 (GET沒有)
    async: true, //  預設是true=非同步,false=同步 (true時整行可省略)
    success: res =>{ // 成功的話執行...
        ...
        },
    error: err =>{ // 失敗的話執行...
        ...
        },
});
// 箭頭涵式寫法:success: res =>{  ....}
// 原始一般寫法:success: function(res){  ....}

備註:

若選擇開放使用的 API 仍出現無法成功取得資料,開啟開發者瀏覽工具查看錯誤訊息,若原因為 CORS (Cross-Origin Resource Sharing 跨來源資源共用 ) 問題,在純練習用時可先透過 cors-anywhere 的應用將 API URL 前面加上 https://cors-anywhere.herokuapp.com/,可暫時避開 CORS 問題,成功完成 GET 請求。


嘿嘿!成功抓到 JSON 資料後的下一步,當然就是將資料內容 Show 在畫面上囉!來到下篇實作栗子吧:Ajax 將取得的 API 資料應用於頁面中 ( 以 JSON 為例 )


參考文件


個人 Blog: https://eudora.cc/


上一篇
[CSS] Animation 動畫
下一篇
Ajax - 將取得的 API 資料應用於頁面中 ( 以 JSON 為例 )
系列文
For 前端小幼苗的圖解筆記30

尚未有邦友留言

立即登入留言