天天看點

HTTP原理(四)—— HTTP請求過程

我們在浏覽器中輸入一個 URL,回車之後便會在浏覽器中觀察到頁面内容,實際上這個過程是浏覽器向網站所在的伺服器發送了一個 Request,即請求,網站伺服器接收到這個 Request 之後進行處理和解析,然後傳回對應的一個 Response,即響應,然後傳回給浏覽器,Response裡面就包含了頁面的源代碼等内容,浏覽器再對其進行解析便将網頁呈現了出來,模型如圖所

示:

HTTP原理(四)—— HTTP請求過程

模型圖

此處用戶端即代表我們自己的 PC 或手機浏覽器,伺服器即要通路的網站所在的伺服器。為了更直覺地地說明這個的過程,我們在這裡用 Chrome 浏覽器的開發者模式下的 Network監聽元件來做下示範,它可以顯示通路目前請求網頁時發生的所有網絡請求和響應。打開 Chrome 浏覽器,右鍵點選檢查,或按下快捷鍵 F12 即可打開浏覽器的開發者工具,我們在這裡通路百度:baidu.com/,輸入該 URL,敲擊回車通路這個頁面,觀察一下在這個過程中發生了怎樣的網絡請求,這時我們可以看到在 Network 頁面的下方出現了一個個的條目,那麼這一個條目就代表一次發送 Request 和接收 Response 的過程,如圖所示:

HTTP原理(四)—— HTTP請求過程

Network 面闆

我們觀察第一個網絡請求,即 www.baidu.com,如圖所示:

HTTP原理(四)—— HTTP請求過程

網絡請求記錄

這一個條目的各列分别代表:

第一列 Name,即 Request 的名稱。一般會用URL的最後一部分内容當做名稱。

第二列 Status,即 Response 的狀态碼。這裡顯示為 200,代表 Response 是正常的,通過狀态碼我們可以判斷發送了 Request 之後是否得到了正常的 Response。

第三列 Type,即 Request 請求的文檔類型。這裡為 document,代表我們這次請求的是一個 HTML 文檔,内容就是一些 HTML 代碼。

第四列 Initiator,即請求源。用來标記 Request 是由哪個對象或程序發起的。

第五列 Size,即從伺服器下載下傳的檔案和請求的資源大小。如果是從緩存中取得的資源則該列會顯示 from cache。

第六列 Time,即發起 Request 到擷取到 Response 所用的總時間。

第七列 Timeline,即網絡請求的可視化瀑布流。

我們點選這個條目即可看到其更詳細的資訊,如圖 所示:

HTTP原理(四)—— HTTP請求過程

詳細資訊

首先是 General 部分,Request URL 為 Request 的 URL,Request Method 為請求的方法,Status Code 為響應狀态碼,Remote Address 為遠端伺服器的位址和端口,Referrer Policy為 Referrer 判别政策。再繼續往下看可以看到有一個 Response Headers 和一個 Request Headers,這分别代表響應頭和請求頭,請求頭裡面帶有許多請求資訊,例如浏覽器辨別、Cookies、Host 等資訊,這是Request 的一部分,伺服器會根據請求頭内的資訊判斷請求是否合法,進而作出對應的響應,傳回 Response,那麼在圖中看到的 Response Headers 就是 Response 的一部分,例如其中包含了伺服器的類型、文檔類型、日期等資訊,浏覽器接受到 Response 後,會解析響應内容,進而呈現網頁内容。