前端基礎之HTTP協議介紹

Xiao0101發表於2024-03-18

HTTP 協議介紹

HTTP協議(HyperText Transfer Protocol,超文字傳輸協議),用來規定服務端和瀏覽器之間的資料互動的格式,也是用於從全球資訊網(WWW:World Wide Web)伺服器傳輸超文字到本地瀏覽器的傳送協議。

該協議構建於TCP/IP 協議族之上,屬於應用層協議。主要用於傳輸與超文字相關的資原始檔,如HTML網頁,css,js,圖片,影片,音訊等。其中 HTTP1.0、HTTP1.1、HTTP2.0 均為 TCP 實現,HTTP3.0 基於 UDP 實現。現主流使用 HTTP1.0 和 HTTP3.0。

協議: 為了使資料在網路上從源頭到達目的,網路通訊的參與方必須遵循相同的規則,這套規則稱為協議,它最終體現為在網路上傳輸的資料包的格式。

通俗點講,協議就是要保證網路通訊的雙方,能夠互相對接上號。就像是兩個人傳遞紙條透過互相指定的暗號,如果傳送天亮了,表示可以打遊戲了等等。

注意: 當我們訪問一些網頁時,是顯示透過 HTTPS 來進行通訊的,並且當下大多數的網頁都是透過 HTTPS 來進行通訊的,因為 HTTPS 在 HTTP 的基礎上做了一個加密的工作。

HTTP和HTTPS的區別

  • 直接構建於TCP協議之上
    • 沒有進行加密傳輸資料的是HTTP協議
    • 預設通訊埠是80埠
    • 常用埠有:3000,5000,8000,8080等。
  • 構建於TLS或SSL協議之上
    • 對資料使用SSL加殼加密傳輸資料的是HTTPS協議
    • 預設通訊埠是443埠
    • 常用埠8443。

HTTP協議的四大特性

http協議具有無狀態、無事務、所有請求必有所回應的特點。

(1)基於請求、響應

當我們在瀏覽器輸入一個網址,此時瀏覽器就會給對應的伺服器傳送一個 HTTP 請求,對應的伺服器收到這個請求之後,經過計算處理,就會返回一個 HTTP 響應。並且當我們訪問一個網站時,可能涉及不止一次的 HTTP 請求和響應的互動過程。

基礎術語:

客戶端: 主動發起網路請求的一端
伺服器: 被動接收網路請求的一端
請求: 客戶端給伺服器傳送的資料
響應: 伺服器給客戶端返回的資料

HTTP 協議的重要特點: 一發一收,一問一答

image

注意: 網路程式設計中,除了一發一收之外,還有其它的模式

  • 多發一收:例如上傳大檔案
  • 一發多收:例如看直播時,搜尋一個詞條可以得到多個影片源
  • 多發多收:例如串流(steam link、moonlight 等等)

(2)基於TCP/IP作用於應用層之上的協議

  • 應用層協議:HTTP HTTPS FTP ...

(3)無狀態

HTTP是一種不儲存狀態,即無狀態(stateless)協議。HTTP協議自身不對請求和響應之間的通訊狀態進行儲存。也就是說在HTTP這個級別,協議對於傳送過的請求或響應都不做持久化處理

總結:見你千百遍,我始終待你如初戀。

  • 所謂的無狀態是指http協議預設情況下,服務端不識別客戶端的。

  • 在客戶端多次發起請求到同一個伺服器,服務端接收到客戶端的請求在處理完成以後就會主動斷開。

  • 所以對於客戶端的每一次請求,對於服務端來說,都是一次新的客戶端請求。

  • 也就是說,服務端無法區分多次請求的客戶端是否同一個客戶端

問題:比如,使用者登入到一家購物網站,即使他跳轉到該站的 其他頁面後,也需要能繼續保持登入狀態。針對這個例項,網站為了能 夠掌握是誰送出的請求,需要儲存使用者的狀態。那怎樣實現?

​ 使用一些專門記錄使用者狀態的技術:cookie、session、token....

(4)短連線

  • 請求來一次我響應一次,之後我們兩個就沒有任何連結和關係了

補充:雙方建立連線之後預設不斷開,例:websocket(群聊功能,服務端主動給客戶端發訊息)

請求協議 和 HTTP響應協議

1、請求協議

(1) 請求資料格式

image

HTTP GET方法的請求格式

客戶端給服務端傳送訊息應該遵循的資料格式

  • 請求首行(標識HTTP協議版本,當前請求方法)
  • 請求頭(一大堆k:v鍵值對)
  • 換行不可省略(\r\n)
  • 請求體(並不是所有的請求方式都有,get沒有post有,存放的是post請求提交的敏感資料)

image

(2)請求行

請求行由三部分組成:請求方法 、請求路徑 、HTTP協議版本。

  • HTTP請求方法(HTTP Request Method):表示客戶端希望對伺服器指定資源進行哪一種型別的操作;
  • 請求路徑:表示遠端web伺服器的一個可訪問資源;
  • HTTP協議版本:表示客戶端目前使用的HTTP協議版本,並期望服務端也採用同樣版本的協議與客戶端進行通訊。

請求方法

  • “get” 請求 : 朝服務端索要資料

    • url?username=xiao&password=123

    • eg:輸入網址獲取對應的內容

  • “post” 請求 : 朝服務端提交資料

    • eg:使用者登入,輸入使用者名稱和密碼之後,提交到服務端後端做身份校驗

常見請求方法如下:

請求方法 描述 報文中是否包含請求體
GET 表示客戶端希望從伺服器中獲取下載資源資訊 Flase
POST 表示客戶端希望上傳檔案或透過請求在伺服器建立資源資訊。 True
PUT 表示客戶端希望修改或更新伺服器資源(表示修改全部資源資訊,例如資料表的一整個記錄) True
PATCH 表示客戶端希望修改或更新伺服器資源(表示修改部分資源資訊,例如資料表的一個記錄裡面某個屬性值) True
DELETE 表示客戶端希望刪除或廢棄伺服器資源 Flase
OPTION 表示客戶端希望獲取伺服器所支援的請求方法列表 Flase
HEAD 表示客戶端希望獲取伺服器支援的跨域地址列表 Flase

請求路徑

  • 表示遠端web伺服器的一個可訪問資源。
  • 一般就是代表的就是一個伺服器的具體檔案或資料表中的記錄資訊,或一個服務端裡面的函式或方法。
/     表示根路徑
/1.html   表示web伺服器中web根目錄下的1.html檔案
/login    表示web伺服器中的一個login方法或者login函式

http協議版本

  • 表示客戶端目前使用的HTTP協議版本,並期望服務端也採用同樣版本的協議與客戶端進行通訊。

  • http協議發展至今已經到了HTTP/3.0版本,目前主流的使用版本有:HTTP/1.0 、HTTP/1.1、 HTTP/3.0。

(3)請求頭

  • HTTP請求頭(Request Head)
    • 主要對客戶端請求操作進行限制條件與補充說明。
  • 常見的標準HTTP請求頭如下:
選項 描述
Host 指定客戶端請求的伺服器的域名和埠號。 www.baidu.com
Content-Type 告訴伺服器,客戶端請求攜帶的請求體資料的媒體型別資訊(MIME型別)
User-Agent 告知伺服器HTTP 客戶端網路代理程式的版本資訊,一般就是瀏覽器的版本資訊。
Authorization 告知伺服器客戶端的Web認證資訊。
Content-Length HTTP報文中請求體的大小,以位元組為單位。
Referer 告訴伺服器該網頁是從哪個頁面連結過來。也就是上一頁頁面的地址。
Accept 指定客戶端能夠接收並理解的媒體型別型別(MIME型別),用於表達希望服務端的返回資源格式。
Accept-Encoding 指定瀏覽器可以支援的web伺服器返回內容壓縮編碼型別。 gzip, deflate, br
Pragma 指定服務端控制快取行為。http/1.0以前的欄位。 Pragme: no-cache
Cache-Control 指定服務端控制快取行為。http/1.1以後的欄位。 Cache-Control: no-cache
Upgrade 向伺服器請求在當前http協議的基礎上升級採用新的某種傳輸協議以便伺服器進行轉換 常用於http協議升級到ws協議。
Connection 指定本次http通訊結束以後,是否關閉TCP網路連線。如果設定持久連線,則可以在一次會話中,可以使用同一個TCP連線,進行多次的HTTP通訊,提高效率。 持久連線,Connection: keep-alive
非持久連線,Connection: close

注意:在http通訊過程中,請求頭也是可以自定義的,但是不能出現多位元組編碼字元,例如中文等。

(4)常見的MIME格式

型別 描述 別名
text/html HTML網頁
application/json json文字 text/json
text/plain 純文字,普通文字
text/xml xml文件
application/javascript js指令碼 text/javascript
text/css css樣式
image/png png格式圖片
image/jpeg jpg格式圖片
image/gif gif格式圖片
application/x-gzip gzip格式壓縮包
application/msword doc文件
application/vnd.openxmlformats-officedocument.wordprocessingml.document docx文件
application/vnd.ms-excel xls文件
application/vnd.openxmlformats-officedocument.spreadsheetml.sheet xlsx文件
application/pdf pdf文件
audio/mpeg mp3音訊
video/mp4 mp4影片

(5)URL

  • 統一資源定位符(網址)

2、HTTP響應

伺服器收到了客戶端發來的HTTP請求後,根據HTTP請求中的動作要求,服務端做出具體的動作,將結果回應給客戶端,稱為HTTP響應。

(1)響應資料格式

image

服務端給客戶端傳送訊息應該遵循的資料格式

  • 響應首行(標識HTTP協議版本,響應狀態碼)
  • 響應頭(一大堆k:v鍵值對)
  • 換行不可省略(\r\n)
  • 響應體(返回給瀏覽器展示給使用者看的資料)

image

(2)響應行

HTTP響應行(HTTP Request Line),是HTTP響應報文的首行。由三部分組成:狀態行、響應頭、響應正文;

  • 狀態行:包括協議版本Version、狀態碼Status Code、回應短語;
  • 響應頭(server header):包括搭建伺服器的軟體,傳送響應的時間,回應資料的格式等資訊,包含HTTP狀態碼 (HTTP Status Code) ;
  • 響應正文:就是響應的具體資料。

HTTP協議版本

  • 響應報文的HTTP協議版本,與客戶端的協議版本保持一致。
  • 例如:HTTP/1.0,HTTP/1.1。

響應狀態碼

  • 狀態碼(Status Code)
    • 用一串簡單的數字來表示一些複雜的狀態或者描述性資訊
狀態碼型別 描述
1xx 服務端已經成功接受到了你的資料正在處理,你可以繼續提交額外的資料。
2xx 服務端成功響應了你想要的資料。
3xx 重定向(當你在訪問一個需要登入之後才能看的頁面,你回發現自動跳轉到登入頁面,例如:學校校園網登入認證)
4xx 告訴客戶端,本次請求有誤,伺服器無法處理。
5xx 告訴客戶端,本次請求服務端在處理過程中服務端出錯了。

ps:上述的狀態碼是HTTP協議規定的,其實到了公司之後每個公司還會自定定製自己狀態碼及提示資訊

常見的HTTP狀態碼

狀態碼 響應資訊 描述
101 Switching Protocols 伺服器已經理解了客戶端的請求,並將透過Upgrade訊息頭通知客戶端採用升級協議來完成請求。
200 OK 請求已成功,請求所希望的響應頭或資料體將隨此響應返回。出現此狀態碼是表示正常狀態。常用於GET,PUT或PATCH
201 Created 請求已成功,請求的資源已經建立成功或更新完成,常用於POST,PUT或PATCH
204 No Content 請求已成功,但是沒有任何內容返回。常用於DEELTE
301 Moved Permanently 永久重定向,表示當前客戶端請求的資源地址已經永久發生改變。
302 Move Temporarily 臨時重定向,表示當前客戶端請求的資源地址還存在,但是訪問客戶端達不到訪問資源的條件,所以暫時無法訪問。
304 Not Modified 表示本次客戶端請求的資源,並非來自服務端,而是本地快取。如果web專案有做了客戶端快取,一般靜態檔案都會出現304
305 Use Proxy 被請求的資源必須透過指定的代理才能被訪問。
307 Temporary Redirect 請求的資源臨時從不同的URI 響應請求。
400 Bad Request 本次請求,報文語義有誤或請求引數有誤,當前請求無法被伺服器理解。
401 Unauthorized 本次請求,需要需要使用者驗證,但使用者並沒有提供認證。
403 Forbidden 伺服器已經理解請求,但是拒絕執行它。一般是因為沒有許可權導致的。
404 Not Found 請求失敗,請求所希望得到的資源未被在伺服器上發現,請求路徑不存在。
405 Method Not Allowed 請求行中指定的請求方法不能被用於請求相應的資源。使用了錯誤的請求方法。
500 Internal Server Error 伺服器遇到了一個未曾預料的狀況,導致了它無法完成對請求的處理。就是服務端的程式碼報錯了。
502 Bad Gateway 閘道器當機,作為閘道器或者代理工作的伺服器嘗試執行請求時,從上游伺服器接收到無效的響應。一般就是大量訪問請求導致伺服器癱瘓或當機了。
503 Service Unavailable 閘道器過載,由於臨時的伺服器維護或者過載,伺服器當前無法處理請求。
504 Gateway Timeout 閘道器超時,作為閘道器或者代理工作的伺服器嘗試執行請求時,未能及時從上游伺服器或者輔助伺服器(例如DNS)收到響應。
507 Insufficient Storage 伺服器無法儲存完成請求所必須的內容。

(3)響應頭

  • HTTP響應頭(Response Head),主要是伺服器返回的內容進行補充說明,並提供下一次請求的一些輔助資訊。
選項 描述
Content-Type 告知客戶端,響應資料的MIME型別
Content-Length 告知客戶端,響應資料的位元組大小
Content-Encoding 告知客戶端,響應資料採用的壓縮格式
Server 告知客戶端,響應伺服器的名字或型別
Date 告知客戶端,響應請求的時間
Location 告知客戶端,實際要請求的資源地址(用於301或302進行頁面跳轉)
Cache-Control 告知客戶端,響應資料的快取機制
Refresh 告知客戶端,要定時重新整理的時間間隔
Connection 告知客戶端,本次HTTP通訊完成以後是否要保持TCP連線。
Transfer-Encoding 告知客戶端,資料是以分塊方式響應回來的。
Content-Disposition 告知客戶端,以下載方式打資料的,格式:Content-Disposition: attachment;filename=檔名
Expires 告知客戶端,響應資料的過期事件,-1表示馬上過期,客戶端不要快取當前響應資料。
Retry-After 告知客戶端,應該在多久之後再次傳送請求。常見於服務端限流,或503中。
Access-Control-Allow-Origin 指定客戶端透過哪些域名下的指令碼可以訪問伺服器資源。
Access-Control-Allow-Methods 指定客戶端透過哪些HTTP請求方法訪問服務端資源。
Access-Control-Allow-Headers 指定客戶端請求伺服器的報文中,允許包含哪些請求頭。

3、get 與 post 的區別

  1. 都可以攜帶額外的引數 :
    GET 提交的資料會放在URL之後,以"?"分割URL和傳輸資料,引數之間以"&"相連
    POST方法是把提交的資料放在HTTP包的請求體(Body)中.
  2. 提交的資料大小限制 :
    瀏覽器對URL長度有限制, 所以GET提交的資料大小有限制
    POST方法沒有資料大小限制
  3. 資料的安全性 :
    GET方式提交資料, 會帶來安全問題, 比如一個登入頁面, 透過GET方式提交資料時, 使用者名稱和密碼將出現在URL上
    如果頁面可以被快取或者其他人可以訪問這臺機器, 就可以從歷史記錄獲得該使用者的賬號和密碼

相關文章