筆記|網路基本運作原理-2 資料格式( XML, JSON )與交換方式( SOAP, REST )
📍 這份筆記僅作為日後快速查找或複習所用。
串接只接受 RESTful 的 API 時在 console 上看到 CORS 的錯誤訊息,初步得到解決辦法是建立代理伺服器或使用者端向對方發送請求,因此藉這機會複習網路基本知識與串接 API ,進而學習串接 API 的方式。
這篇文章提到的資料交換,是指使用者端透過網際網路發送請求到伺服器端,中間資料來回傳遞的過程。
資料交換的常見格式 XML 與 JSON
XML (eXtensible Markup Language)
電腦之間傳遞資料的格式規定,由標籤與放在標籤內的內容所組成;電腦可以透過標籤辨識標籤內的內容。
最容易懂的 XML 說明:What is XML | XML Beginner Tutorial | Learn XML with Demo in 10 min
假設去日本玩的朋友想請我推薦當地美食,我整理完幾項後將資料傳給朋友。朋友的手機會透過網路接收到這筆 XML 資料,可以看到資料內有不同標籤,包含標記這是一份食物清單的 foodlist
標籤,手機的瀏覽器可以透過這些標籤解讀不同的主題(標籤)。
例如這份 XML 檔案就包含 foodlist 、 food 、以及 recommanded 的標籤,朋友的手機可以透過這些標籤解讀推薦的食物是哪些、範圍到哪裡:
<foodlist>
<title>美食清單</title>
<food>
<name>豆大福</name>
</food>
<food>
<name>炸牛肉餅</name>
</food>
<food>
<name>蕎麥麵</name>
</food>
<recommaned>
<name>章魚燒</name>
</recommanded>
<recommaned>
<name>抹茶聖代</name>
</recommanded>
</foodlist>
解讀後朋友可以在手機上看到:
美食清單
豆大福
炸牛肉餅
蕎麥麵
章魚燒(推薦)
抹茶聖代(推薦)
JSON (JavaScript Object Notation)
資料格式的編寫方式與 Javascript 的物件相同,比起 XML 更容易閱讀與辨識,不用擔心遺漏標籤閉合的問題。
很好懂的 JSON 教學:Learn JSON in 10 Minutes
將上面提到的美食清單改成 JSON :
const foodlist = {
"food" : ["豆大福", "炸牛肉餅", "蕎麥麵"],
"remomanded" : ["章魚燒", "抹茶聖代"],
}
交換資料的方式
在 Web 服務中,兩個應用程式(通常是 client 與 sever )交換資料的方式通常遵循 SOAP 或 RESTful 。
Web 服務:支援不同軟體、機器在網路世界的互動,通常由許多 API 組成,透過網路的連線到伺服器執行使用者的需求。
SOAP
SOAP 簡單物件存取協定( Simple Object Access Protocol )規範在 Web 服務中*,使用者與伺服器需使用 XML 格式交換資料,且該 XML 必須包含被定義的 SOAP Message 結構:Envelope 、 Header 與 Body :
RESTful
RESTful 表現層狀態交換(Representational State Transfer)是 Web 服務在兩個應用程式之間交換/溝通的資料架構原則。 RESTful 將伺服器的 URL 作為取得或訪問伺服器各種資源的入口,例如想取得 dogland.dog 的 puppy 資料,只需透過 URL* http://dogland.dog/puppy
達成;在不同 HTTP/HTTPS 方法中都是使用相同的 URL :
[GET] http://dogland.dog/puppy
[POST] http://dogland.dog/puppy
[PUT] http://dogland.dog/puppy/1 // 更新特定 id
[DELETE] http://dogland.dog/puppy/1 // 刪除特定 id
...
配合 HTTP 方法,討論 RESTful 經常被提的到 CRUD 為:
C : Create (POST)
R : Read (GET)
U : Update (PATCH)
D : Destory (DELETE)
*實際上不是 URL 而是 URIs 統一資源標識符( Uniform Resourse Identifier )
- 大方向說明 RESTful 是將 URL 作為訪問應用程式的入口:What is REST?
- 概述 RESTful 、有提到 CRUD :What is a REST API?
- 更詳細說明 RESTful 的運作機制,也有提到關於使用者端向伺服器端發送請求時會一起發送目前的狀態、以及需處理快取的部分等等:
API Web Services Beginner Tutorial 5 — What are REST Web Services (Part-1)
API Web Services Beginner Tutorial 6 — What are REST Web Services (Part-2) - RESTful APIs in 100 Seconds // Build an API from Scratch with Node.js Express