瀏覽器輸入U(xiǎn)RL枚荣，發(fā)生了什么？【HTTP篇】

CreateTime：2016-09-06 20:07:17
Author：zhongxia
瀏覽器輸入U(xiǎn)RL之后啼肩，發(fā)生了什么橄妆？ 針對前端來說，最重要的是 http 和 瀏覽器渲染祈坠。底層硬件害碾，網(wǎng)絡(luò)通訊，后端的相關(guān)知識赦拘，這里就大概一概而過了慌随。 這一篇主要講解一下http相關(guān)方面的。

1. 瀏覽器輸入U(xiǎn)RL另绩，解析URL

用戶輸入U(xiǎn)RL地址儒陨，瀏覽器會去解析URL地址，得到請求服務(wù)器地址笋籽，請求頁面文件路徑蹦漠，以及請求參數(shù)

2. DNS解析

根據(jù)域名解析服務(wù)器的IP地址， ip地址是一串?dāng)?shù)據(jù)车海，不方便記憶笛园，因此有了域名。

1. 從瀏覽器DNS緩存侍芝，找域名相對應(yīng)的IP
2. 沒有找到研铆，則從系統(tǒng)緩存尋找
3. 沒有找到，從系統(tǒng)的host文件里面找
4. 沒有找到州叠，從路由器上找
5. DNS服務(wù)器找
6. ...
7. 找到域名對應(yīng)的IP地址

3. 瀏覽器發(fā)送HTTP請求

瀏覽器發(fā)出一個(gè) HTTP協(xié)議的請求棵红，組織了一個(gè)請求的數(shù)據(jù)包（走OSI七層模型，從應(yīng)用層 到 最低層的數(shù)據(jù)鏈路層 的數(shù)據(jù)包層層封裝咧栗，然后傳到服務(wù)器在 層層解開）

3.1 請求消息

• 請求行
  • 請求方法【POST/GET/PUT/DELETE】
  • URI
  • 請求協(xié)議【FTP逆甜、HTTP、HTTPS致板、等】/版本
• 請求報(bào)頭
  • 參考最下面文章【待整理交煞，可以先參考最下面的參考文章】
• 請求正文（需要傳到服務(wù)器的數(shù)據(jù)）

image

請求頭 和 請求正文之間有 一個(gè)空行，空行是 HTTP規(guī)定的消息頭和消息體的分界線

3.2 響應(yīng)消息

• 狀態(tài)行

• 響應(yīng)報(bào)頭

  • 【待整理斟或，可以先參考最下面的參考文章】

• 響應(yīng)正文

1xx:信息響應(yīng)類素征，表示接收到請求并且繼續(xù)處理

2xx:處理成功響應(yīng)類，表示動(dòng)作被成功接收、理解和接受

3xx:重定向響應(yīng)類御毅，為了完成指定的動(dòng)作根欧，必須接受進(jìn)一步處理

4xx:客戶端錯(cuò)誤，客戶請求包含語法錯(cuò)誤或者是不能正確執(zhí)行

5xx:服務(wù)端錯(cuò)誤端蛆，服務(wù)器不能正確執(zhí)行一個(gè)正確的請求

3.3 HTTP相關(guān)知識：

1. 三層架構(gòu)（瀏覽器咽块，web服務(wù)器，數(shù)據(jù)庫）欺税，http 是用在 瀏覽器 和 web服務(wù)器之間通訊

2. 兩個(gè)核心（瀏覽器發(fā)出request請求, Web服務(wù)器response返回?cái)?shù)據(jù)（text，xml揭璃，流等））

3. 一個(gè)記住（HTTP是無狀態(tài)的）

無狀態(tài)是指協(xié)議對于事務(wù)處理沒有記憶能力晚凿，服務(wù)器不知道客戶端是什么狀態(tài)。即我們給服務(wù)器發(fā)送 HTTP 請求之后瘦馍，服務(wù)器根據(jù)請求歼秽，會給我們發(fā)送數(shù)據(jù)過來，但是情组，發(fā)送完燥筷，不會記錄任何信息。
keep-alive 也無法改變這個(gè)無狀態(tài)

4. 以百度首頁為例獲取請求頭和響應(yīng)頭內(nèi)容：

1院崇、請求頭：

我們現(xiàn)在通過谷歌瀏覽器來查看一下請求頭：

以打開百度首頁為例肆氓，然后在谷歌瀏覽器中打開“工具-開發(fā)者工具”，切換到network標(biāo)簽底瓣， 然后刷新頁面：

image

上圖中谢揪，打開箭頭處html格式的文件，顯示如下：

image

上圖中的Request Headers就是我們所需要的請求頭捐凭。里面的內(nèi)容全部是鍵值對拨扶。服務(wù)器拿到這些鍵值對后會對其進(jìn)行分析。

我們再來重復(fù)一下常見請求頭鍵值對的含義：

• Host:www.baidu.com 本次請求訪問的主機(jī)地址（虛擬主機(jī)名稱）
• Cache-control:no-cache 設(shè)置網(wǎng)頁緩存的使用方法
• Pragma:no-cache
• Accept:text/html,xxxxxx…..客戶端可以接收的數(shù)據(jù)類型（如果內(nèi)容是：/茁肠，表示接收所有類型）
• User-Agent:Mozilla/5.0xxxxx 主要表示客戶端類型
• Accept-Encoding:gzip,deflate,sdch 瀏覽器能夠接收的數(shù)據(jù)壓縮編碼方式（表示瀏覽器能夠接收什么格式的壓縮的數(shù)據(jù)）
• Accept-Language:zh-CN,zh;q=0.8 瀏覽器期望的接受的語言種類
• Accept-Charset: ISO-8859-1 客戶端所接收的字符集編碼
• If-Modified-Since: Tue, 11 Jul 2000 18:23:51 GMT 和緩存機(jī)制相關(guān)的頭
• Referer: http://www.smyh.me/index.jsp 當(dāng)前頁面來自哪個(gè)頁面（可能是由之前的頁面通過超鏈接點(diǎn)進(jìn)到這個(gè)頁面來）
• Cookie
• Connection: close/Keep-Alive 請求完之后患民，是關(guān)閉此連接，還是繼續(xù)保持連接
• Date: Tue, 11 Jul 2013 18:23:51 GMT 當(dāng)前請求的時(shí)間

注：上面的這些指的是get請求的請求頭垦梆。

2匹颤、響應(yīng)頭：

我們再來看一下響應(yīng)頭的內(nèi)容：

image

常見的響應(yīng)頭鍵值對的含義：

• Location: http://www.smyh.me/index.jsp 重定向（302+Location實(shí)現(xiàn)重定向）
• Server 服務(wù)器類型
• Content-Encoding 服務(wù)器當(dāng)前返回給客戶端的數(shù)據(jù)壓縮格式
• Content-Length 返回給客戶端的數(shù)據(jù)量的大小
• Content-Language: zh-cn 語言種類
• Content-Type: text/html; charset=GB2312 返回的數(shù)據(jù)的類型、字符集編碼方式
• Last-Modified 資源最后一次修改的時(shí)間（配合請求頭中的If-Modified-Since+304/307實(shí)現(xiàn)緩存機(jī)制）
• Refresh: 1;url=http://www.it315.org 　　 隔多少秒以后奶赔，讓當(dāng)前頁面去訪問哪個(gè)地址（例如網(wǎng)頁登陸成功后惋嚎，跳回原來的界面，就是用的這個(gè)頭）
• Content-Disposition: attachment;filename=aaa.zip 和下載相關(guān)站刑，通知瀏覽器以附件的形式下載服務(wù)器發(fā)送過去的數(shù)據(jù)
• Transfer-Encoding: chunked 數(shù)據(jù)傳輸模式
• Set-Cookie:SS=Q0=5Lb_nQ; path=/search 和cookie相關(guān)的頭
• ETag: W/"83794-1208174400000" 和cookie相關(guān)的頭
• Expires: -1 通知瀏覽器是否緩存當(dāng)前資源：如果這個(gè)頭的值是一個(gè)以毫秒為單位值另伍，則通知瀏覽器緩存資源到指定的時(shí)間點(diǎn)；如果值是0或-1，則通知瀏覽器禁止緩存
• Cache-Control: no-cache 通知瀏覽器是否緩存資源
• Pragma: no-cache -- 通知瀏覽器是否緩存資源

注： 之所以三個(gè)頭是一個(gè)功能,是因?yàn)闅v史原因摆尝。不同的瀏覽器對這三個(gè)頭支持的不同,一般來說這三個(gè)頭要同時(shí)使用温艇，以確保不同的瀏覽器都能實(shí)現(xiàn)控制緩存的功能

• Connection: close/Keep-Alive 是否繼續(xù)保持連接
• Date: Tue, 11 Jul 2000 18:23:51 GMT 當(dāng)前響應(yīng)的時(shí)間

參考文章

1. Android系列之網(wǎng)絡(luò)（二）----HTTP請求頭與響應(yīng)頭
2. 如何理解HTTP響應(yīng)的狀態(tài)碼？
3. 【i5ting】精解http