[TOC] ### 引入 在Web應用中，服務器把網頁傳給瀏覽器，實際上就是把網頁的HTML代碼發送給瀏覽器，讓瀏覽器顯示出來。而瀏覽器和服務器之間的傳輸協議是HTTP，所以： - HTML是一種用來定義網頁的文本，會HTML，就可以編寫網頁； - HTTP是在網絡上傳輸HTML的協議，用于瀏覽器和服務器的通信。 在舉例子之前，我們需要安裝`Google`的[`Chrome`瀏覽器](http://www.google.com/intl/zh-CN/chrome/)。 為什么要使用`Chrome`瀏覽器而不是`IE`呢？因為`IE`實在是太慢了，并且，`IE`對于開發和調試`Web`應用程序完全是一點用也沒有。 我們需要在瀏覽器很方便地調試我們的`Web`應用，而`Chrome`提供了一套完整地調試工具，非常適合`Web`開發。 安裝好`Chrome`瀏覽器后，打開`Chrome`，在菜單中選擇“視圖”，“開發者”，“開發者工具”，就可以顯示開發者工具：  `Elements`顯示網頁的結構，`Network`顯示瀏覽器和服務器的通信。我們點`Network`，確保第一個小紅燈亮著，`Chrome`就會記錄所有瀏覽器和服務器之間的通信：  當我們在地址欄輸入www.sina.com.cn 時，瀏覽器將顯示新浪的首頁。在這個過程中，瀏覽器都干了哪些事情呢？通過Network的記錄，我們就可以知道。在Network中，定位到第一條記錄，點擊，右側將顯示Request Headers，點擊右側的view source，我們就可以看到瀏覽器發給新浪服務器的請求：  最主要的頭兩行分析如下，第一行： ~~~ GET / HTTP/1.1 ~~~ `GET`表示一個讀取請求，將從服務器獲得網頁數據，`/`表示URL的路徑，URL總是以`/`開頭，`/`就表示首頁，最后的HTTP/1.1指示采用的HTTP協議版本是1.1。目前HTTP協議的版本就是1.1，但是大部分服務器也支持1.0版本，主要區別在于1.1版本允許多個HTTP請求復用一個TCP連接，以加快傳輸速度。 從第二行開始，每一行都類似于`Xxx: abcdefg：` ~~~ Host: www.sina.com.cn ~~~ 表示請求的域名是www.sina.com.cn 。如果一臺服務器有多個網站，服務器就需要通過Host來區分瀏覽器請求的是哪個網站。 繼續往下找到Response Headers，點擊view source，顯示服務器返回的原始響應數據：  `HTTP`響應分為`Header`和`Body`兩部分（`Body`是可選項），我們在`Network`中看到的`Header`最重要的幾行如下： ~~~ 200 OK ~~~ `200`表示一個成功的響應，后面的`OK`是說明。失敗的響應有`404 Not Found`：網頁不存在，`500 Internal Server Error`：服務器內部出錯，等等。 ~~~ Content-Type: text/html ~~~ `Content-Type`指示響應的內容，這里是`text/html`表示`HTML`網頁。請注意，瀏覽器就是依靠`Content-Type`來判斷響應的內容是網頁還是圖片，是視頻還是音樂。瀏覽器并不靠URL來判斷響應的內容，所以，即使URL是 http://example.com/abc.jpg ，它也不一定就是圖片。 `HTTP`響應的`Body`就是`HTML`源碼，我們在菜單欄選擇“視圖”，“開發者”，“查看網頁源碼”就可以在瀏覽器中直接查看HTML源碼：  當瀏覽器讀取到新浪首頁的`HTML`源碼后，它會解析`HTML`，顯示頁面，然后，根據`HTML`里面的各種鏈接，再發送`HTTP`請求給新浪服務器，拿到相應的圖片、視頻、`Flash`、`JavaScript`腳本、`CSS`等各種資源，最終顯示出一個完整的頁面。所以我們在Network下面能看到很多額外的`HTTP`請求。 ### HTTP請求 跟蹤了新浪的首頁，我們來總結一下`HTTP`請求的流程： 步驟1：瀏覽器首先向服務器發送`HTTP`請求，請求包括： 方法：`GET`還是`POST`，`GET`僅請求資源，`POST`會附帶用戶數據； 路徑：/full/url/path； 域名：由Host頭指定：Host: www.sina.com.cn 以及其他相關的Header； 如果是`POST`，那么請求還包括一個`Body`，包含用戶數據。 步驟2：服務器向瀏覽器返回`HTTP`響應，響應包括： 響應代碼：`200`表示成功，`3xx`表示重定向，`4xx`表示客戶端發送的請求有錯誤，`5xx`表示服務器端處理時發生了錯誤； 響應類型：由`Content-Type`指定； 以及其他相關的`Header`； 通常服務器的`HTTP`響應會攜帶內容，也就是有一個`Body`，包含響應的內容，網頁的`HTML`源碼就在`Body`中。 步驟3：如果瀏覽器還需要繼續向服務器請求其他資源，比如圖片，就再次發出`HTTP`請求，重復步驟1、2。 `Web`采用的`HTTP`協議采用了非常簡單的請求-響應模式，從而大大簡化了開發。當我們編寫一個頁面時，我們只需要在HTTP請求中把HTML發送出去，不需要考慮如何附帶圖片、視頻等，瀏覽器如果需要請求圖片和視頻，它會發送另一個HTTP請求，因此，一個HTTP請求只處理一個資源。 `HTTP`協議同時具備極強的擴展性，雖然瀏覽器請求的是http://www.sina.com.cn/ 的首頁，但是新浪在HTML中可以鏈入其他服務器的資源，比如`<img src="http://i1.sinaimg.cn/home/2013/1008/U8455P30DT20131008135420.png">`，從而將請求壓力分散到各個服務器上，并且，一個站點可以鏈接到其他站點，無數個站點互相鏈接起來，就形成了`World Wide Web`，簡稱`WWW`。 ### HTTP格式 每個HTTP請求和響應都遵循相同的格式，一個HTTP包含Header和Body兩部分，其中Body是可選的。 HTTP協議是一種文本協議，所以，它的格式也非常簡單。HTTP GET請求的格式： ~~~ GET /path HTTP/1.1 Header1: Value1 Header2: Value2 Header3: Value3 ~~~ 每個`Header`一行一個，換行符是`\r\n`。 `HTTP POST`請求的格式： ~~~ POST /path HTTP/1.1 Header1: Value1 Header2: Value2 Header3: Value3 body data goes here... ~~~ 當遇到連續兩個`\r\n`時，`Header`部分結束，后面的數據全部是Body。 HTTP響應的格式： ~~~ 200 OK Header1: Value1 Header2: Value2 Header3: Value3 body data goes here... ~~~ `HTTP`響應如果包含`body`，也是通過`\r\n\r\n`來分隔的。請再次注意，`Body`的數據類型由`Content-Type`頭來確定，如果是網頁，`Body`就是文本，如果是圖片，`Body`就是圖片的二進制數據。 當存在`Content-Encoding`時，`Body`數據是被壓縮的，最常見的壓縮方式是`gzip`，所以，看到`Content-Encoding: gzip`時，需要將`Body`數據先解壓縮，才能得到真正的數據。壓縮的目的在于減少`Body`的大小，加快網絡傳輸。 要詳細了解`HTTP`協議，推薦[`“HTTP: The Definitive Guide”`](http://shop.oreilly.com/product/9781565925090.do)一書，非常不錯，有中文譯本： [HTTP權威指南](https://www.amazon.cn/dp/B008XFDQ14/ref=cm_sw_r_si_7_dp_T.Qzub1780N06)