001.HTTP協議簡介
在Web應用中,伺服器把網頁傳給瀏覽器,實際上就是把網頁的HTML程式碼傳送給瀏覽器,讓瀏覽器顯示出來。而瀏覽器和伺服器之間的傳輸協議是HTTP,所以:
-
HTML是一種用來定義網頁的文字,會HTML,就可以編寫網頁;
-
HTTP是在網路上傳輸HTML的協議,用於瀏覽器和伺服器的通訊。
在舉例子之前,我們需要安裝Google的
為什麼要使用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”一書,非常不錯,有中文譯本: