第十二天：從瀏覽器認識 HTTP 協定（ 2018 iT邦幫忙鐵人賽－只要有心，人人都可以作卡米狗 ）

markdown # 複習 HTTP 協定 我們在[第六天：認識網站](https://ithelp.ithome.com.tw/articles/10193664)，安裝了chrome瀏覽器，並且在[第九天：作一個最簡單的 Rails 網站](https://ithelp.ithome.com.tw/articles/10194359)成功架好一個 Rails 網站。  我們可以透過 Chrome 的開發人員工具來觀察瀏覽器開啟一個網頁的過程。 # 認識 Chrome 開發人員工具 從昨天結束的地方繼續，先開啟 rails server 之後開啟 [http://localhost:3000/](http://localhost:3000/)。  按下 `F12` 或 `Ctrl`+`Shift`+`I`，就可以叫出開發人員工具。  這個畫面有點複雜，總之先按這裡的`X`，把多餘的部分關掉。  按了之後應該會看起來像這樣：  開發人員工具有很多的功能，我們只需要用到其中的一小部分，這裡就不一一介紹。  請先切換到 `Network` 分頁。  一個複雜的介面，但是什麼資料都沒有顯示，那是因為開發人員工具開啟後才會開始監控數據，所以我們要重開網頁，這裡按下 `Ctrl`+`R`。  出現了兩筆資料，一個是 `localhost`，另一個是 `favicon.ico`，我們點 `localhost`。  我們看見這裡有四個分頁：`Headers`、`Preview`、`Response`、`Timing`，我們只需要認識 `Headers` 和 `Response`。 # Headers `Headers` 這裡的資料也很多，我們只需要認識其中的三項：  - Request URL:http://localhost:3000/ - Request Method:GET - Status Code:304 Not Modified 接下來就一項一項講解。 ### Request URL 請求網址：就是你在瀏覽器上輸入的網址，因為你輸入的是 http://localhost:3000/，所以他顯示 http://localhost:3000/。 ### Request Method 請求方法：瀏覽器希望網頁伺服器做些什麼事，我們這裡是用 `GET` 是表示我們想要下載檔案。 除了 `GET` 之外，還有其他的請求方法可以使用，比方說 `POST`、`PUT`、`DELETE`，以下是各個請求方法的用途： - GET：下載檔案 - POST：上傳資料 - PUT：更新資料 - DELETE：刪除資料 舉個例：當你想在論壇發文，你把文章標題和內文填好，按下送出時，那就應該是一個 POST 請求方法。 依照目前可公開的情報，我們只需要知道 `GET` 和 `POST` 即可。 ### Status Code 狀態碼：是網頁伺服器用一個數字來表示瀏覽器提出的請求最後有沒有完成，如果沒有，為什麼沒有。其實提款機也有類似的東西，叫做[訊息代碼](http://www.bot.com.tw/services/atmmsg.htm)。 當然這個[狀態碼](https://zh.wikipedia.org/wiki/HTTP%E7%8A%B6%E6%80%81%E7%A0%81)列出來會有很多，但因為我們只是要做一個聊天機器人，不需要認識全部，我們現階段只認識必須認識的那些。最主要的是你必須知道有狀態碼的存在，當你知道有狀態碼這種東西時，你需要相關資訊時就能在 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 程式語言開始。