前后端數據交互(一)——網絡請求詳解

前后端分離之后，網絡請求是前端的必備技能。網絡請求中瀏覽器工作流程，你了解多少？

一、什么是HTTP協議？

HTTP協議是Hyper Text Transfer Protocol（超文本傳輸協議）的縮寫，是一種通信協議，主要用於從服務器傳輸超文本到客戶端的傳送協議。

我們在瀏覽器中輸入網址（URL），然后瀏覽器給服務器發送一個請求，服務器收到我們的請求之后進行處理后，生成響應，攜帶瀏覽器需要的html、css、js等超文本信息，通過HTTP協議返回給瀏覽器，瀏覽器再通過解析返回的html、css、js等文件，這樣我們就可以看的一個完美的網頁了。請求過程如圖所示：

 

二、URL介紹

URL是Uniform Resource Locator的縮寫，URL地址是統一資源定位符，是互聯網上用來標識某一處資源的地址。

基本格式如下：

schema://host[:port#]/path/.../[;url-params][?query-string][#anchor]

一個完整的URL包括以下幾部分：

1. 協議部分(schema)：指定底層使用的協議，在Internet中可使用多種協議，如FTP、HTTP、HTTPS。
2. 域名部分(host)：服務器的域名或者IP地址
3. 端口號(port)：跟在域名后的端口，域名和端口之間使用 冒號 作為分隔符，一般端口號默認是80，使用默認端口號時可以省略不寫。
4. 虛擬目錄部分(path)：從域名第一個"/"開始到最后一個"/"為止，指訪問資源的路徑
5. 文件名部分(url-params)：指具體訪問的是哪個文件資源，如果沒有，則使用默認文件名，如 index.vue、index.html、index.asp。
6. 參數部分(query-string)：發送給http服務器的數據，允許有多個參數，使用&鏈接多個參數。
7. 錨部分(anchor)：錨用來定位頁面展示的開始位置，是非必須的。

三、HTTP三次握手和四次分手

瀏覽器在給服務器傳輸數據之前有三次握手，握手成功之后，才可以傳輸數據。

三次握手：連接請求，接受請求，發送請求

四次分手：連接請求，接受請求，發送請求，返回數據

 

四、HTTP請求--Request

客戶端包括瀏覽器給服務器發送請求時，包含四部分：

1. 請求行：設置請求類型，要訪問的資源以及使用的http版本
2. 請求頭：用來說明服務器要使用的附加信息，比如token經常放請求頭中。傳輸內容大小有限制，必須小於等於32k。
3. 空行：請求頭后面所必須的。
4. 請求體：請求數據也叫請求體，可以添加任意其他數據。傳輸內容較多，可小於等於1G。

五、HTTP響應--Response

一般情況下，服務器接收並處理客戶端發過來的請求會返回一個HTTP響應消息。包含四部分：

1. 狀態行：有 http協議版本號、狀態碼、狀態消息三部分組成。
2. 消息報頭：說明客戶端要使用的附加信息。
3. 空行：消息報頭后面的空行，是必須存在的。
4. 響應數據：服務器返回給客戶端的文本信息。

六、HTTP狀態碼

HTTP有請求時，服務器返回的響應Response中狀態行內就包含了狀態碼，狀態碼主要用來告訴瀏覽器響應結果。

狀態碼有三位，主要分為六類：

• 1** ：1開頭的狀態碼主要表示信息類提示，請求已接收，繼續處理。
• 2** ：2開頭的表示請求成功，200就是最常見的。
• 3** ：3開頭的表示重定向，要完成請求必須進行更進一步操作，304最常見
• 4** ：4開頭的表示客戶端錯誤，請求語法錯誤或請求無法實現，404請求資源不存在。
• 5** ：5開頭表示服務器錯誤。500服務器發生不可預期的錯誤
• 6** ：6開頭的擴展類。

七、HTTP請求方法

根據HTTP標准，HTTP請求可以使用多種請求方法。

HTTP1.0定義了三種請求方法：GET、POST、HEAD方法。

HTTP1.1新增了五種請求方法：OPTIONS、PUT、DELETE、TRACE和CONNECT方法。

序號	方法	描述
1	GET	請求指定的頁面信息，並返回實體主體。
2	HEAD	類似於 GET 請求，只不過返回的響應中沒有具體的內容，用於獲取報頭
3	POST	向指定資源提交數據進行處理請求（例如提交表單或者上傳文件）。數據被包含在請求體中。POST 請求可能會導致新的資源的建立和/或已有資源的修改。
4	PUT	從客戶端向服務器傳送的數據取代指定的文檔的內容。
5	DELETE	請求服務器刪除指定的頁面。
6	CONNECT	HTTP/1.1 協議中預留給能夠將連接改為管道方式的代理服務器。
7	OPTIONS	允許客戶端查看服務器的性能。
8	TRACE	回顯服務器收到的請求，主要用於測試或診斷。
9	PATCH	是對 PUT 方法的補充，用來對已知資源進行局部更新 。