__http原理__HTTP 協議簡介

 

HTTP 協議通訊流程

超文本

除了文本之外，還有其餘數據類型的內容

HTTP 協議

指計算機網絡通訊中 兩臺計算機之間所必須遵照的規定或規則

• Hypertext Transport Protocol 超文本傳輸協議

是一種基於 TCP/IP 的應用層通訊協議，

這個協議詳細規定了 瀏覽器 與 萬維網服務器 之間的通訊規則

瀏覽器 發送請求 給服務器    ——request

服務器 返回響應 給瀏覽器    ——response

• 通訊時傳輸的內容，咱們稱之爲 "報文"

HTTP 規定了報文格式（使用 Fiddler 抓包工具分析，網絡通訊包）

請求行（request line）、請求頭部（header）、空行和請求數據四個部分組成

• 請求報文 Request Header
• 
  
• 響應報文 Response Header
• 
  

• FIddler

All Process__切換成 WebBrowsers

Capturing__指定抓包

• Inspector---->Raw    請求報文----響應報文
• 請求報文 Request Header
• 常見的 get 請求的方式

瀏覽器 地址欄 輸入url 地址訪問

全部的標籤 默認發送的都是 get 請求

form 表單 默認也是 get 請求，能夠經過設置 method="post" 請求

• 請求首行（request line）

GET http://localhost:3000/?username=Ryen&password=123456 HTTP/1.1

請求方式    請求完整地址（查詢字符串）    協議名/版本號

HTTP 協議版本----1.0 過去----1.1 如今經常使用的----2.0 最新的，兼容性很差

域名地址 / IP 地址____IP 地址很差記，因此纔有了域名地址，簡化記憶

因此若是輸入的是 域名地址，瀏覽器會進行 DNS 解析，最終解析成 IP 地址去訪問 

http://localhost:3000 本地計算機的 IP 地址 

http://127.0.0.1:3000 本地計算機的 IP 地址 

• 請求頭（request header）

Connection: Keep-Alive 

保持一個長久鏈接，而不用重複進行 TCP 鏈接（三次握手） 

Pragma: no-cache        1.1 

Cache-Control: no-cache        2.0 

不走強緩存，而走協商緩存 

Upgrade-Inscure-Requests: 1 

容許使用 https 協議 

User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebkit/537.36 (KHTML, like Gecko) Chremo/70.0.3538.110 Safari/537.36 

用戶代理，瀏覽器內核版本 

在過去，使用這個字段來區別瀏覽器，區別處理 

在如今，主要是爲了兼容老的服務器 

Accept: text/html, application/xhtml+xml, application/xml; q=0.9, image/webp, image/apng/ */*; q=0.8 

瀏覽器容許接收的數據類型 

text/html,        html 文件 

application/xhtml+xml,       xhtml 文件   

application/xml; q=0.9,        xml 數據 優先級低 

image/webp,image/apng/        新的圖片格式，在同清晰度狀況下，體積更小 

*/*; q=0.8        其餘文件默認使用，優先級低 

Accept-Encoding: gzip, deflate, br 

瀏覽器運行接收的文件壓縮格式 

Accept-Language: zh-CN, cn;q=9.0 

瀏覽器容許接受的語言 

• 空行           空格 
• 報文體        get 請求 沒有報文體
• 常見的發送 post 請求的方式

目前只有 form 設置 method="post"

之後會使用 ajax

• 請求首行（request line）

POST http://localhost:3000/ HTTP/1.1

• 請求頭（request header）

Content-Length: 29

請求體內容長度

Cache-Control: max-age=0

有限期爲 0

Origin: http://localhost:63342

請求來源的地址

Content-type: application/x-www-form-urlencodded

請求體內容格式：from 提交的內容（key=value&key=value），採用的 urlencoded 編碼

Referer: http://localhost:63342/class0920/?_ijt=dasffnjd4nfjnf4jfn4jf4f4n

請求來源的完成地址： 防盜鏈，減小服務器壓力；防止別人盜取連接對應的資源；廣告計費等等

Cookie: Webstorm-asdasdaf30=fefffdcsc-sdcs-dcs-dcs-dc-sdc

會話控制，瀏覽器存儲技術的一種

• 空行
• 請求體        username=Ryen&pwd=123564

post 請求每每有請求體，包含請求參數（請求體參數）

• 響應請求 Response Header

• 響應首行（response line）       HTTP/1.1 200 OK

協議名/協議版本    響應狀態碼

常見的響應狀態碼____告訴接收響應的瀏覽器，根據響應內容的狀態作出處理

1xx :  基本不用

2xx :  表明響應成功的狀態

200        

3xx :  請求資源重定向    

302        請求的資源/網址，從新定向到 新網址

304        請求的資源/網址，從新定向到 緩存中

4xx :  請求資源未找到

404        服務器沒問題，資源在服務器中找不到

5xx :  服務器內部錯誤

500        服務器出錯了

• 響應頭（response header）
• X-Powered-By: Express

通常來說，X 開頭的字段，表明是自定義的字段（不是 http 協議規定的內容）

Content-Type: text/html; charset=utf-8  

響應體內容的類型

Content-length: 49

響應體長度

ETag: W/"31-TNprVsD5wSGk8shE21bcRfKPzNg"

協商緩存

Date: Fri, 21 Dec 2018 02:41:40 GMT

響應時間戳

Connection: Keep-Alive

長鏈接

• 空行
• 響應體    <h2>Hello Node Express</h2>

response 響應體 表明瀏覽器要顯示的內容

 

 面試題： 從瀏覽器輸入 url 地址，到最終頁面渲染完成，中間發生了什麼

1. DNS 解析____將 域名地址 解析成 IP 地址

2. TCP 鏈接（TCP 三次握手）

第一次握手： 瀏覽器 發送給 服務器

告訴服務器，將要發送請求

第二次握手： 服務器 發送給 瀏覽器，肯定能夠接受數據

告訴瀏覽器，能夠發送請求

第三次握手： 肯定發送仍是不發送

告訴服務器，將要發送數據

3. 瀏覽器發送請求報文

4. 瀏覽器接受響應報文

5. 瀏覽器解析響應報文，渲染頁面

html____調用 html 解析器，將 html 的 DOM 結構 解析爲 DOM 樹

css____調用 css 解析器，將 css 樣式 解析爲 CSSOM 樹

將 DOM 樹 和 CSSOM 樹 組合到一塊兒，造成 render 樹

先佈局 layout ，在渲染 render

js____調用 js 引擎，解析 js 代碼

若是 js 有操做 DOM，則修改 DOM 樹

若是 js 有操做 CSS，則修改 CSSOM 樹

再組合 DOM 樹 和 CSSOM 樹

最後佈局 layout，渲染 render____重排 和 重繪

6. 斷開鏈接：TCP 四次揮手（斷開瀏覽器發送請求的鏈接；斷開瀏覽器接受響應的鏈接）        （由於長鏈接的存在）

第一次揮手： 瀏覽器 發送給 服務器，告訴服務器，請求報文發完了，準備關閉鏈接

第二次揮手： 服務器 發送給 瀏覽器，告訴瀏覽器，請求報文接收完了，能夠關閉鏈接了

第三次揮手： 服務器 發送給 瀏覽器，告訴瀏覽器，響應報文發送完了，準備關閉鏈接

第四次揮手： 瀏覽器 發送給 服務器，告訴服務器，響應報文接收完了，能夠關閉鏈接了

數據結構： 二叉樹，紅黑樹

算法： 二叉查找法，快速排序，希爾排序。