( 此系列文章用於記錄筆者在 Tealeaf Academy 學習 Rails 的心得和整理筆記,將不定期更新)

終於完成 Track1 的課程了,完成 Final Project 的感覺真的很棒!由於第三週和第四週的課程具有連貫性,所以我也順便把兩週的心得放在一起寫。

Track1 前兩週的課程都在幫學員建立 Ruby 基礎觀念,剩下兩週則是直接進入 Web Development 的領域,主要教 Sinatra 的用法和 HTTP, MVC 等觀念, 此外也教了一些基礎的 jQuery 和 Ajax ,最後會用 Sinatra 做網頁版的 Blackjack ,整體來說是一個相當紮實的課程。

其實我當初卡關的地方並不是 Ruby 而是 MVC, HTTP 等知識,原本想跳過 Track 1,但在馮學正大哥的建議下,我還是報名了。上完之後我覺得好險當初有聽馮大哥的建議,自己當初真是把 Ruby 想得太簡單了,建議想把 Rails 基礎功打穩的人還是乖乖從 Track1 開始上會比較好。(順帶一提,馮大哥30歲之後才開始學 coding ,經過一年多的自學從外行人變成 Rails Developer,學習態度令人敬佩!)

不過由於 Track1 的 Final Project 相對簡單,我們使用 Sinatra 而非 Rails 來打造 Web app,要一窺 Rails 全貌還是得要上 Track2 才行,筆者在 Track2 也會繼續記錄自己的學習過程,若大家對於 Tealeaf Academy 的課程有任何問題,都歡迎在底下留言詢問!

這次特別做了一些 HTTP 筆記,希望能幫到學 Rails 的新手:

HTTP ( Hypertext Transfer Protocol )

HTTP 全名為 Hypertext Transfer Protocol (超文本傳輸協定),我們可以把傳輸協定視為網路裝置的共同語言,當兩個裝置傳輸資料時,會需要用一定規格的語言來溝通,這個規格就是傳輸協定。傳輸協定被大量應用在具連線功能的裝置中,舉例來說,當未來物聯網成形時,所有的家電都可以連上網路,為了避免電飯鍋和洗衣機在傳輸資料時受到干擾,我們會先設計好專屬這兩個裝置的通訊協定,讓電飯鍋和洗衣機只會傳送或接收特定規格的指令。

而 HTTP 就是用戶端 (電腦 )和伺服器 (網路) 之間的傳輸協定,當我們瀏覽網站時,電腦會透過瀏覽器發起一個 HTTP 請求( request ),向伺服器要求一些資源( resource ),這個資源可以是圖片、 HTML 檔案、影片檔案等等,而儲存資源的地址就是我們俗稱的網址( URL )。以下是用戶端向伺服器要求圖片資源的範例http

HTTP 是每個 Web Developer 都要懂的基礎知識,但要搞懂並不太容易,以下將簡單介紹  URL、HTTP Verbs、Status code 和 Request / Response format。

(1) URL

URL 的全名是 Universal Resource Locator ,如同在網路上的門牌,是網際網路上標準的資源的位址,一個標準的 URL 應該包含五個元素,如下圖所示: url

(1)protocol: 通訊協定,沒有特別輸入的話一般預設是 http (這也是為什麼我們輸入 www.yahoo.com 其實就等於 http://www.yahoo.com),還有另一種用來加密 URL 的通訊協定 https 

(2)host: 伺服器(主機)

(3)port: 伺服器上的網路埠號,沒有特別輸入的話預設是 80

(4)resource path: 在伺服器上的 resource local 位置

(5)query: 參數,在「?」後面的都是參數,不同參數以「&」隔開。參數最常見的例子是搜尋網站內容,我們常會看到類似 http://xxx.xxx.xxx/searchresult.com?searchkey=XXX 的網址, xxx 是搜尋的內容,搜尋結果頁面會隨著 xxx 的不同而變化

(2) HTTP Verb

URL 指定了 resource 的位置,HTTP Verb 則用來表示客戶端要求伺服器對 resource 執行的動作種類,最常見的 Verb 有四種:

GET: 讀取一個已存在的 resource ,URL 包含所有應具備的資訊,讓 server 得以去找到並回傳 resource。EX:瀏覽論壇文章

POST: 新增一個新的 resource。 POST requests 會帶有新的 message body。 EX:張貼論壇文章

PUT: 更新一個已存在的 resource。 PUT requests 會帶有更新過後的 message body 。 EX:編輯論壇文章

DELETE: 刪除一個已存在的 resource。 EX:刪除論壇文章

除了上述四個 Verb 之外,還有其他比較少見的 Verb:

HEAD: 跟 GET 相似,但沒有 message body ,用來取得伺服器特定資源的 header 。最常見的用法是檢查 time stamps header 以查看資源是否有被更動過。

OPTIONS: 用來取得伺服器的 capability,客戶端可藉此 Verb 修改 request 以便符合伺服器的支持範圍。

(3) Status code

有了 URL 跟 HTTP Verb ,客戶端就可以傳送 request 到伺服器上,為了表示伺服器處理 request 的狀況,伺服器會回傳 status code 。以下介紹最常見的種類:

2xx: 代表伺服器成功處理了 request (Successful)
200 OK : 最常見的代碼 ,代表 request 一切順利運作
204 No Content: 伺服器處理 request 成功但 response 的 message body 是空的

3xx: 代表伺服器將轉聯 URL (Redirection)
301 Moved Permanently: 資源的位置被永久改變到了新的 URL
303 See Other: 資源的位置被暫時改變到了新的 URL ,新的 URL 會在放在 response 的 header 中

4xx: 客戶端錯誤 (Client Error)
400 Bad Request: Request 的格式不合乎要求
404 Not Found: 找不到 resource 
403 Forbidden: 伺服器拒絕了針對此資源的 request
405 Method Not Allowed: Request 包含不合格的 HTTP Verb,或伺服器不支援此 Verb 

5xx: 伺服器錯誤(Server Error)
500 Internal Server Error: 伺服器處理 request 失敗
503 Service Unavailable: 伺服器負載過度或內部系統當機,此情況下伺服器有可能甚至連 response 都不會回傳,使得 request 逾時

(4) Request / Response message format

剛剛提到的 Status code 和 HTTP Verb 其實都只是 Request / Response 訊息的一部份,依照 HTTP 的規範,Request / Response 訊息分成三個部分 — initial line、header 和 message body ,如下所示:

Initial line (request or response ) 
Header1: value1 
Header2: value2 
Header3: value3 

<optional message body>

訊息一定會包含 initial line,header則可有可無,數量也非固定, message body 也是可有可無,但只會有一個。

Initial line

request initial line 會包含資源的 local path 、 HTTP Verb 和 HTTP 版本:

GET /path/example/index.html HTTP/1.0
Post /path/to/example/index.html HTTP/1.1

response initial line 則會包含 HTTP 版本、 status code 跟 status code 的描述詞:

HTTP/1.0 200 OK
HTTP/1.0 404 Not Found
Header

header 用來提供 request 或 response 的資訊,以 Header-name: value 的格式呈現,每一行都代表一個 header 。HTTP 1.0 中有 16 種 header,沒有強制要求一定要包含哪一種,HTTP 1.1則有 46 種 header,強制規定 request message 中要包含 host header。 header 有以下四種分類:

General headers           (request or response message 都能用)
Request specific headers  (request message 專用)
Response specific headers (response message 專用)
Entity headers            (request or response message 都能用,用來描述 message body)

礙於篇幅,此文不會詳細介紹 header ,有興趣的朋友可以到此篇文章查看。

Message body

最後是 message body,在 response 中 message body 通常會是伺服器回傳的資源 (這是最常見的狀況),或是錯誤發生時解釋用的文字。在 request 中,message body 則會是用戶輸入的 data 或上傳給伺服器的檔案,像是 PUT 或是 POST 這種需要更動資源的 request 才會用到。

看實際例子會比較清楚,以 Chrome 為例,按下右鍵檢查元素->Network->點擊資源->點選右下角 Header 就可以看到,如下圖所示 :

request msgresponse msg
總結一下上述的概念
1. HTTP 是一種通訊協定,可視為客戶端 (電腦) 跟伺服器 (網路) 之間溝通的語言
2. 資源 (resource) 泛稱所有的網站元素,包括圖片、音樂、影片或 HTML 文本等等檔案
3. 客戶端向伺服器要求資源的動作被稱為 request;伺服器依據 request 回覆客戶端的動作則是 response
4. 客戶端發出 request 或伺服器回覆 response 時,會傳送某種特定格式的 message 給彼此
5. message 包含三大元素--initial line、header 跟 message body

想像一下,客戶端就像是金庫的主人,伺服器就像金庫的守門員,資源就像金庫裡的財物,有鈔票、珠寶、金條等等。主人和守門員之間有固定的溝通模式,這個溝通模式就是 HTTP 。主人可以做很多事--存錢、領錢、存珠寶、拿走珠寶或查看金庫財物,但必須要透過守門員才能做到。主人每一次下命令,都是一次 request,主人必須告訴守門員他的目標資源位置 (URL) ,和他想做對這些資源做的行為 (HTTP Verb),守門員的回應則是 response,守門員會告訴他處理命令的狀況 (status code)。希望這樣的解釋能把 HTTP 從抽象轉為實際的概念。

這次的筆記就到這邊,下一步就真的要往 Rails 邁進了!!

cover photo via Unsplash