Web開發學習筆記15 — AJAX、API、JSON、Axios


Posted by Teagan Hsu on 2021-01-04

什麼是AJAX?

簡單來說,我們可以讓JavaScript發送請求資料的需求給伺服器,而伺服器僅回傳給我們必要的資料,而非整個被渲染過的網頁。這使得伺服器回應更快,同時,Web伺服器的負荷也跟著減少。

什麼是API?

API就像是接口一樣,讓我們可以向API請求一些資料,然後API回應(response)我們,我們再把這些資料放進網頁中。例如今天我們想製作一個即時天氣的網站,我們可以透過天氣的API取得即時天氣的資料,並加入到HTML、CSS、JavaScript編寫好的完整的網站中。

XML與JSON

比較準確點來說XML是標記式語言,而JSON是資料交換語言的一種。當我們向API請求資料,API響應給我們的資料就會是這種純數據的資料。
XML的通用性較廣泛,有許多基於XML創造出來的應用程序、格式,包括XForms,SVG,MathML,RDF,OWL,WSDL等。
而相較於XML,JSON就屬於輕量級的資料交換語言,更易於閱讀,運用JSON.parse()我們可以解析JSON字串並返回JavaScript的物件形式。JSON.stringify()則是將物件轉換為JSON形式。
以現在常用的技術AJAX來說,JSON的J已經逐漸取代AJAX的"X",JSON雖然沒有像XML那麼廣泛、強大,但以網站傳輸資料檔案來說JSON更快、更易讀,且現今更多人使用此來當作資料交換的語言。

Postman


Postman是一個幫助我們測試API的工具。在我們使用這個API之前,我們要先測試這個API是否能正確運作,此時Postman就可以模擬HTTP Request的情形。

AJAX實現方式

XMLHttpRequest(XHR)

XMLHttpRequest(XHR)是一組API函式集,可被JavaScript呼叫。我們可以通過HTTP在瀏覽器和web伺服器之間收發XML或JSON、純文字。它強大的點在於可以取得資料的同時,也可以動態地更新網頁,而不需要進行頁面重載。不過XHR算是一個舊的方法,且它不支援Promise,因此會造成複雜的callback hell,現在有fetch()能幫我們取得API資料,它更簡單、簡潔,避免了callback hell。

fetch(IE不支援)

fetch是JavaScript的原生API,透過fetch我們可以向HTTP Requestfetch是基於Promise的,所以用法上會接.then,或是可以使用async。

//一個簡單的Request,使用.then連結資料
fetch('https://api.coindesk.com/v1/bpi/historical/close.json').then(res => {
    return res.json();
}).then(data => {
    console.log(data.time.updated)
}).catch(e => {
    console.log(e);
})

//一個簡單的Request,使用async連結資料
const fetchAPI = async() => {
    try {
        const res = await fetch('https://api.coindesk.com/v1/bpi/historical/close.json')
        const data = await res.json()
        console.log(data.time.updated)
    } catch (err) {
        console.log(err)
    }
}
fetchAPI();

Axios

相比起jQuery,Axios顯得輕量,一樣支援Promise語法,且能夠自動轉換JSON數據,主流瀏覽器都能支援Axios。以目前的趨勢來看,越來越多工程師選擇使用Axios。
用Axios改寫上面的範例,看起來又簡潔了一些呢:

//CDN:
//<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

axios.get('https://api.coindesk.com/v1/bpi/historical/close.json')
    .then(res => console.log(res.data.time.updated))
    .catch(err => console.log(err))

jQuery($.ajax)

串接API常會用的到的JavaScript函式庫,缺點在於為了要用AJAX功能必須載入整個 jQuery。

Axios練習

安裝Axios:axios - github

設置headers

每個API的使用方式都不相同(所以一定要看官方Document),在此以icanhazdadjoke為例,如果想取得此API的JSON資料,必須設定headers

//headers的寫法,像是物件一樣:
const header = { headers: { Accept: 'application/json' } }
axios.get('https://icanhazdadjoke.com/', header).then(res => {
    console.log(res.data.joke)
})

用icanhazdadjoke試做笑話產生器(超級陽春版)

const button = document.querySelector('button');
const ul = document.querySelector('ul')

const gotJokes = async() => {
    const header = { headers: { Accept: 'application/json' } }
    const res = await axios.get('https://icanhazdadjoke.com/', header)
    return res.data.joke
}

let addJokes = async() => {
    let textJokes = await gotJokes()
    let li = document.createElement('li')
    li.textContent = textJokes
    ul.appendChild(li)
}

button.addEventListener('click', addJokes)

參考資料:

  1. 關於AJAX與那些前端的request方法
  2. 在開始寫Code之前?
  3. JavaScript - 常見的 AJAX 實現方式
  4. Axios or fetch(): Which should you use?
  5. Stop Comparing JSON and XML

#ajax #API #JSON #Axios #HTTP Request







Related Posts

實作餐廳網站 FAQ 頁面

實作餐廳網站 FAQ 頁面

1. Entity Framework - DBFirst

1. Entity Framework - DBFirst

JavaScript this Keyword

JavaScript this Keyword


Comments