本篇以

  • 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(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){  ....}

# 參考文件