Leeboy's Study Log

前端學習。心得筆記

使用API的基本概念

內容摘要:
- API
- MVC
- 前端 & 後端 render

API

(英語:Application Programming Interface,簡稱:API), 可以視為應用程式之間溝通的窗口, 藉由這個窗口(取得/提供)對方的服務, API就像一台販賣機, 使用API的人不用知道販賣機底層如何運作 (黑箱的概念), 只要取用所需要的服務即可。
換句話說, API沒有提供的服務, 使用者因為不知道黑箱裏面的運作, 就不能取用。

(www.intel.com)

一個標準API基本上有3個要素構成
1. URLs (API的位置)
2. methods (通常是指HTML request 方法, POST, GET)
3. form-data (API要求的資料輸入)
當使用者提供API所需要的資訊時, 就能得到所需要的服務或資料。

MVC

(英語:Model View Controller), MVC是一種軟體工程的開發概念, 將系統分成3個部份:
1. Model, 與資料庫相關, 考慮資料如何存取
2. View, HTML, CSS, template
3. Controller, 處理使用者的請求, 取得資料, 回應給使用者

(MVC以網站開發角度)

情境模擬: 當使用者輸入網址, 向後端 (黑色框框部份) 傳送一個請求, 舉例來說: 向Yahoo請求一個'國內新聞'頁面。
當Controll收到這個請求時, 會進行分析, 接著跟Model取得資料、 跟View取得template, 將兩者結合成一個完整的網頁 (這也是所謂的後端Render), 最後把使用者引導 (路由) 到這個完整的網頁。

API 的功能

API提供了一個窗口, 開放給使用者取用存在資料庫的資料, 假設今天Yahoo開放了一個API讓取得新聞的原始資料 (可能是純文字或是JSON格式), 前端便可以寫一個template, 把從Yahoo取回來的資料作Render, 結合成一個完整的網頁。 可能的作法如下:

AJAX 向後端API送出http請求

AJAX 可以在不更新網頁的前提下,向伺服器傳送http request 取回資料,以達到動態更新頁面的目的。

$.ajax({
    url: 'a_cross_domain_url', //request 要送的地方,通常是後端開的API

    method: "POST", //http request方法

    data: data, //可以是Object or String or Array

    dataType: "json", //預期送回來的資料格式

    success: function(result) {
        callback(false, result); //請求成功後的動作

    },
    error: function(result) {
        callback(true, result); //錯誤處理

    },
});

以本例來說,回傳後,交由javascript做JSON.parse 即可做後續的取值,render的動作。

為何用AJAX

看到上例也許有一個疑問,為何不直接輸入url來取得資料就好,為何要包一個AJAX方法?
- 直接輸入url的話,預設的只有GET動作,不一定符合API的要求,
- 輸入API的URL 回傳的只是資料本身,並不是資料+template的完整網頁。

參考資料

1.jQuery.ajax()
2.AJAX
3.Model-View-Controller (MVC) with JavaScript
4.API

MVC