HTTP 簡單瞭解

標籤：包含   技術   開始   .com   處理   undefined   val   重要   中文   

在Web應用中，伺服器把網頁傳給瀏覽器，實際上就是把網頁的HTML代碼發送給瀏覽器，讓瀏覽器顯示出來。而瀏覽器和伺服器之間的傳輸協議是HTTP，所以：

• HTML是一種用來定義網頁的文本，會HTML，就可以編寫網頁；

• HTTP是在網路上傳輸HTML的協議，用於瀏覽器和伺服器的通訊。

在舉例子之前，我們需要安裝Google的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.1Header1: Value1Header2: Value2Header3: Value3

每個Header一行一個，分行符號是\r\n。

HTTP POST請求的格式：

POST /path HTTP/1.1Header1: Value1Header2: Value2Header3: Value3body data goes here...

當遇到連續兩個\r\n時，Header部分結束，後面的資料全部是Body。

HTTP響應的格式：

200 OKHeader1: Value1Header2: Value2Header3: Value3body 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權威指南

HTTP 簡單瞭解