iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 12
7
Modern Web

只要有心,人人都可以做卡米狗系列 第 12

第十二天:從瀏覽器認識 HTTP 協定

複習 HTTP 協定

我們在第六天:認識網站,安裝了chrome瀏覽器,並且在第九天:作一個最簡單的 Rails 網站成功架好一個 Rails 網站。

我們可以透過 Chrome 的開發人員工具來觀察瀏覽器開啟一個網頁的過程。

認識 Chrome 開發人員工具

從昨天結束的地方繼續,先開啟 rails server 之後開啟 http://localhost:3000/

按下 F12Ctrl+Shift+I,就可以叫出開發人員工具。

這個畫面有點複雜,總之先按這裡的X,把多餘的部分關掉。

按了之後應該會看起來像這樣:

開發人員工具有很多的功能,我們只需要用到其中的一小部分,這裡就不一一介紹。

請先切換到 Network 分頁。

一個複雜的介面,但是什麼資料都沒有顯示,那是因為開發人員工具開啟後才會開始監控數據,所以我們要重開網頁,這裡按下 Ctrl+R

出現了兩筆資料,一個是 localhost,另一個是 favicon.ico,我們點 localhost

我們看見這裡有四個分頁:HeadersPreviewResponseTiming,我們只需要認識 HeadersResponse

Headers

Headers 這裡的資料也很多,我們只需要認識其中的三項:

接下來就一項一項講解。

Request URL

請求網址:就是你在瀏覽器上輸入的網址,因為你輸入的是 http://localhost:3000/,所以他顯示 http://localhost:3000/。

Request Method

請求方法:瀏覽器希望網頁伺服器做些什麼事,我們這裡是用 GET 是表示我們想要下載檔案。

除了 GET 之外,還有其他的請求方法可以使用,比方說 POSTPUTDELETE,以下是各個請求方法的用途:

  • GET:下載檔案
  • POST:上傳資料
  • PUT:更新資料
  • DELETE:刪除資料

舉個例:當你想在論壇發文,你把文章標題和內文填好,按下送出時,那就應該是一個 POST 請求方法。

依照目前可公開的情報,我們只需要知道 GETPOST 即可。

Status Code

狀態碼:是網頁伺服器用一個數字來表示瀏覽器提出的請求最後有沒有完成,如果沒有,為什麼沒有。其實提款機也有類似的東西,叫做訊息代碼

當然這個狀態碼列出來會有很多,但因為我們只是要做一個聊天機器人,不需要認識全部,我們現階段只認識必須認識的那些。最主要的是你必須知道有狀態碼的存在,當你知道有狀態碼這種東西時,你需要相關資訊時就能在 Google 搜尋時輸入正確的關鍵字。

正式版說明:

  • 200:表示成功。
  • 304:表示瀏覽器已經有一模一樣的檔案。
  • 400:瀏覽器發出的請求被網頁伺服器拒收,通常是發出的請求格式不正確。
  • 404:找不到網頁。
  • 500:網頁伺服器掛了。

網頁伺服器擬人:

  • 200:網頁伺服器:「好哦~好哦~」
  • 304:網頁伺服器:「你手上的檔案是最新的。」
  • 400:網頁伺服器:「駁回!」
  • 404:網頁伺服器:「你想找的東西不在我這。」
  • 500:網頁伺服器:「阿阿我要壞掉惹。」

Response

又稱為 Response Body(回應內容):指的是網頁伺服器回應給瀏覽器的內文部分。

其實就是檔案內容的部分。

HTTP 總結

  • 由瀏覽器發給網頁伺服器的請求稱為 HTTP Request,HTTP Request 包含 Header 和 Body。
  • 由網頁伺服器回應瀏覽器的請求稱為 HTTP Response,HTTP Response 也包含 Header 和 Body。
  • Request Header 中的 Request Method 表示瀏覽器希望網頁伺服器做些什麼事。
  • Response Header 中的 Status Code 表示網頁伺服器告訴瀏覽器事情辦好沒。

接下來我們從網頁伺服器的角度來觀察 HTTP Request 和 HTTP Response,但這需要寫點程式,所以我們明天會先從認識 Ruby 程式語言開始。


上一篇
第十一天:認識文字編輯器
下一篇
第十三天:認識 Ruby 的資料型態
系列文
只要有心,人人都可以做卡米狗33

尚未有邦友留言

立即登入留言