9. http協議_響應狀態碼_頁面渲染流程_路由_中間件

1. http協議

超文本傳輸協議

協議詳細規定了 瀏覽器 和 萬維網服務器 之間互相通訊的規則

客戶端與服務端通訊時傳輸的內容咱們稱之爲報文（請求報文、響應報文）

• 常見的發送 get 請求方式

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

全部的標籤默認發送的是 get 請求：如 script link img a...

form 表單默認也是 get 請求 

• 常見的發送 post 請求方式

只能經過 form 表單，設置 method="post" 發送

• ajax 能夠發送任意請求

2. 響應狀態碼

告訴瀏覽器（接受響應），響應內容是怎麼樣的狀態

• 1xx: 基本不用
• 2xx: 響應成功的狀態

200

• 3xx: 請求資源重定向

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

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

• 4xx: 請求資源未找到

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

• 5xx: 服務器內部錯誤 

500 服務器出錯了

3. 從瀏覽器輸入一個url地址（www.baidu.com），到最終頁面渲染完成，中間發生了什麼？

① DNS解析

將域名地址解析爲 ip 地址

② TCP鏈接：TCP三次握手

第一次握手： 瀏覽器發送給服務器，告訴服務器，我將要發送請求了，你準備接受一下

第二次握手： 服務器發送給瀏覽器，告訴瀏覽器，我準備好了，你放馬過來

第三次握手： 瀏覽器發送給服務器，告訴服務器，我真的要發了，你準備好

③ 發送請求報文

請求報文

④ 接受響應

響應報文

⑤ 渲染頁面

遇到 html，調用 html 解析器，將 html 的 dom 結構解析爲 dom 樹

遇到 css，調用 css 解析器，將 css 樣式解析 cssom 樹

將 dom 樹和 cssom 樹組合在一塊兒，造成 render 樹

先佈局 layout，再渲染 render

 

遇到 js，調用 js 引擎，解析 js 代碼，若是 js 中有操做 dom，它會修改 dom 樹，若是有修改樣式，它會修改 cssom 樹

將 dom 樹和 cssom 樹組合在一塊兒，造成 render 樹

先佈局 layout，再渲染 render （頁面重排和重繪）

 

⑥  TCP四次揮手 斷開鏈接 ---- 斷開瀏覽器發送的請求的連接，斷開瀏覽器接受響應的連接

第一次揮手： 瀏覽器發送給服務器，告訴服務器，我東西（請求報文）發完了，你準備關閉吧

第二次揮手： 服務器發送給瀏覽器，告訴瀏覽器，我接受完了，我準備關閉，你也準備關閉吧

第三次揮手： 服務器發送給瀏覽器，告訴瀏覽器，我東西（響應報文）發完了，你準備關閉吧

第四次揮手： 瀏覽器發送給服務器，告訴服務器，我接受完了，我準備關閉，你也準備關閉吧

4. 路由

組成：

請求方式        get（查） /  post（增） /  put（改） /  delete (刪)  ....

路由路徑        必須'/'開頭        /shop/:id  ：id部分有params參數

回調函數（句柄函數）

• req 請求信息

req.query 獲取查詢字符串參數  GET 請求

req.params 獲取params參數

req.headers 獲取請求頭的全部信息

req.body 獲取請求體參數 POST請求 （默認 express 框架是解析不了請求體數據的，要想解析須要引入中間件實現）

• res 響應信息

注意：返回響應的方法有且只能設置一個，一旦有多個就會報錯

res.download(文件相對路徑)     返回響應，讓瀏覽器自動下載指定文件

res.sendFile(文件絕對路徑)      返回響應，讓瀏覽器自動打開指定文件

res.end()      返回響應, 返回一個快速響應

res.json()     返回響應, 將傳入的數據轉化爲json字符串返回

res.send()     返回響應, 根據傳入的數據的類型，來自動判斷添加相應的響應頭來處理

res.redirect()     返回響應，請求資源重定向新的地址，默認響應狀態碼爲302

res.get()     獲取響應頭的內容

res.set()     設置響應頭的內容

res.status()     設置響應狀態碼

做用：  接受請求、返回響應         定義請求地址

使用： app.請求方式(路由路徑, (request, response) => {});

request.query 參數（查詢字符串參數）： ?username=111&pwd=222

request.params 參數 ： http://localhost:3000/hotel/123456 --> 123456就是params參數

5. 中間件

本質是一個函數 (req, res, next) => {}

做用：作一些重複作的事情。（當有多個路由重複作同一件事，這時就會交給中間件完成）

經過app.use(中間件函數)

解析原理：

全部路由和中間件都在一個數組中，會按照 js 引擎解析代碼的前後順序添加路由和中間件

當請求發送到服務器的時候，服務器獲取到當前的請求信息（請求方式、請求路由路徑），

遍歷數組，找到第一個匹配（請求路由路徑和請求方式必須徹底一致）到的路由或者中間件（默認接受處理全部請求），執行其回調函數

若是處理的是中間件，中間件內部若是調用了next()方法，還會接下來匹配下一個路由或者中間件

沒找到，返回一個狀態碼爲404的響應， Cannot GET /xxx    Cannot POST /xxx