The Way Forward｜Eudora
Dev NotesAbout Me

Ajax 以 GET 方法讀取 JSON 文件

2020-07-22

JavaScriptAjax

本篇以

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

參考文件