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