http協(xié)議—常見狀態(tài)碼，請(qǐng)求方法，http頭部，http緩存

• 一、http狀態(tài)碼
• • 1、引例闡述
  • 2、狀態(tài)碼分類
  • 3、常見狀態(tài)碼
  • 4、關(guān)于協(xié)議和規(guī)范
• 二、http 方法
• • 1、傳統(tǒng)的methods
  • 2、現(xiàn)在的methods
  • 3、Restful API
  • • （1）Restful API是什么？
    • （2）如何設(shè)計(jì)成一個(gè)資源？
• 三、http 頭部（http headers）
• • 1、常見的Request headers
  • 2、常見的Response headers
• 四、http 緩存
• • 1、關(guān)于緩存的介紹
  • • （1）什么是緩存
    • （2）為什么需要緩存？
    • （3）哪些資源可以被緩存？——靜態(tài)資源（js、css、img）
  • 2、http 緩存策略（強(qiáng)制緩存 + 協(xié)商緩存）
  • • （1）強(qiáng)制緩存
    • • 1）強(qiáng)制緩存是什么？
      • 2）圖例
      • 3）Cache-Control
      • 4）關(guān)于Expires
    • （2）協(xié)商緩存
  • 3、刷新操作方式，對(duì)緩存的影響
  • • （1）正常操作
    • （2）手動(dòng)刷新
    • （3）強(qiáng)制刷新
• 五、寫在最后

http 對(duì)于一個(gè)前端工程師來(lái)說(shuō)，是非常需要了解的一個(gè)知識(shí)點(diǎn)，貫穿于整個(gè)前端開發(fā)的過(guò)程。如果說(shuō)一個(gè)前端工程師不知道 http ，或者說(shuō)是了解甚少，那他肯定不是一個(gè)合格的工程師。那么，http 對(duì)于去前端來(lái)說(shuō)，有什么用呢？

• 前端工程師在開發(fā)界面時(shí)，需要用到 http 協(xié)議；
• 前端在調(diào)用后端的接口時(shí)，提交(post)或者獲取(get)數(shù)據(jù)時(shí)，需要用到 http 協(xié)議；
• ……

下面將從多個(gè)方面講解 http 協(xié)議。

一、http狀態(tài)碼

1、引例闡述

在講狀態(tài)嗎之前，我們先來(lái)了解什么是狀態(tài)碼。比如百度網(wǎng)站：

大家可以看到，上圖中圈紅圈的部分就是 http 的狀態(tài)碼，常見的狀態(tài)碼有200,400,404等等。接下來(lái)對(duì)狀態(tài)碼的一些基礎(chǔ)知識(shí)進(jìn)行介紹。

2、狀態(tài)碼分類

下表給出狀態(tài)碼分類。

狀態(tài)碼含義解釋說(shuō)明

1xx	服務(wù)器收到請(qǐng)求	收到1xx開頭的請(qǐng)求表示服務(wù)端已經(jīng)收到請(qǐng)求，但是還沒有返回信息給客戶端
2xx	請(qǐng)求成功，如200	表示客戶端已經(jīng)成功請(qǐng)求數(shù)據(jù)
3xx	重定向，如302	客戶端收到3xx開頭的狀態(tài)碼時(shí)，表示此時(shí)服務(wù)端已經(jīng)不再管客戶端所請(qǐng)求地址，讓客戶端去請(qǐng)求另外的地址
4xx	客戶端錯(cuò)誤，404	表示當(dāng)客戶端請(qǐng)求了一個(gè)服務(wù)端完全不認(rèn)識(shí)的地址時(shí)，就會(huì)報(bào)出4xx的錯(cuò)誤
5xx	服務(wù)端錯(cuò)誤，如500	表示此錯(cuò)誤來(lái)源于服務(wù)端，比如服務(wù)端寫的接口出現(xiàn)了bug等問題

3、常見狀態(tài)碼

常見的有200（正常） 、404（無(wú)法找到該網(wǎng)頁(yè)資源） 、304（跳轉(zhuǎn)頁(yè)面） 、500（服務(wù)器錯(cuò)誤）等，具體如下：

狀態(tài)碼含義用途

200	OK 成功	一般用于 GET 和 POST 請(qǐng)求
301	Redirect Permanently 永久重定向	配合location，瀏覽器自動(dòng)處理
302	Found 臨時(shí)重定向	配合location，瀏覽器自動(dòng)處理
304	Not Modified 資源未被修改	所請(qǐng)求的資源未修改，服務(wù)器返回此狀態(tài)碼時(shí)，不會(huì)返回任何資源。客戶端通常會(huì)緩存訪問過(guò)的資源，通過(guò)提供一個(gè)頭信息指出客戶端希望只返回在指定日期之后修改的資源
404	Not Found 資源未找到	服務(wù)器無(wú)法根據(jù)客戶端的請(qǐng)求找到資源（網(wǎng)頁(yè)）。通過(guò)此代碼，網(wǎng)站 設(shè)計(jì)人員可設(shè)置"您所請(qǐng)求的資源無(wú)法找到"的個(gè)性頁(yè)面
403	Forbidden 沒有權(quán)限	服務(wù)器理解請(qǐng)求客戶端的請(qǐng)求，但是拒絕執(zhí)行此請(qǐng)求
500	Internal server Error 服務(wù)器錯(cuò)誤	服務(wù)器內(nèi)部錯(cuò)誤
504	Gateway Time-out網(wǎng)關(guān)超時(shí)	充當(dāng)網(wǎng)關(guān)或代理的服務(wù)器，未及時(shí)從遠(yuǎn)端服務(wù)器獲取請(qǐng)求

下面詳細(xì)闡述 301 和 302 。

301 永久重定向：

常見場(chǎng)景有，比如說(shuō)你的一個(gè)網(wǎng)站，域名到期了，或者域名你不想用了，那么老的域名就可以返回一個(gè)301狀態(tài)碼并配合location讓location的值等于新的域名，最終進(jìn)行跳轉(zhuǎn)，之后瀏覽器會(huì)記住新的域名，不會(huì)再訪問老的域名。

302 臨時(shí)重定向：

常見場(chǎng)景有百度，知乎、簡(jiǎn)書等等。比如說(shuō)我們要在百度進(jìn)入菜鳥教程，搜索出來(lái)后有一系列的列表，我們可以選擇一個(gè)去進(jìn)行一個(gè)點(diǎn)擊。點(diǎn)擊的那個(gè)不會(huì)直接進(jìn)入菜鳥教程，而是先跳轉(zhuǎn)到百度設(shè)置的一個(gè)臨時(shí)地址，之后再跳轉(zhuǎn)到菜鳥教程真實(shí)的地址。

4、關(guān)于協(xié)議和規(guī)范

• http協(xié)議就是一個(gè)約定，一個(gè)規(guī)范，要求大家都跟著執(zhí)行；
• 因此不要做違規(guī)范的事情，例如 IE 瀏覽器，違反規(guī)范終將會(huì)落下被歷史淘汰的局面。

二、http 方法

1、傳統(tǒng)的methods

• get 獲取服務(wù)器的數(shù)據(jù)；
• post 向服務(wù)器提交數(shù)據(jù)；
• head 用戶獲取報(bào)頭。

2、現(xiàn)在的methods

• get 獲取數(shù)據(jù)；
• post 新建數(shù)據(jù)；
• patch/put 更新數(shù)據(jù)；
• delete 刪除數(shù)據(jù)；
• head，類似于get請(qǐng)求，只不過(guò)返回的響應(yīng)中沒有具體的內(nèi)容，用戶獲取報(bào)頭；
• options，允許客戶端查看服務(wù)器的性能，比如說(shuō)服務(wù)器支持的請(qǐng)求方式等等；
• trace，追蹤路徑；
• connect，要求用隧道協(xié)議連接代理。

3、Restful API

（1）Restful API是什么？

• Restful API 是一種新的 API 設(shè)計(jì)方法（早已推廣使用）。

• 傳統(tǒng) API 設(shè)計(jì)：把每個(gè) url 當(dāng)做一個(gè)功能。

• Restful API 設(shè)計(jì)：把每個(gè) url 當(dāng)做一個(gè)唯一的資源。

（2）如何設(shè)計(jì)成一個(gè)資源？

1）盡量不用url參數(shù)

• 傳統(tǒng) API 設(shè)計(jì)：/api/list?pageIndex=2
• Restful API 設(shè)計(jì)：/api/list/2

2）用method表示操作類型

傳統(tǒng) API 設(shè)計(jì)：

• post請(qǐng)求：/api/create-article

• post請(qǐng)求：/api/update-article?id=100

• get請(qǐng)求：/api/get-article?id=100

Restful API 設(shè)計(jì)：

• post請(qǐng)求：/api/article

• post請(qǐng)求：/api/article/100

• get請(qǐng)求：/api/article/100

三、http 頭部（http headers）

1、常見的Request headers

請(qǐng)求頭含義

Accept	瀏覽器可接收的數(shù)據(jù)格式
Accept-Encoding	瀏覽器可以接收的算法，如gzip
Accept-Language	瀏覽器可接收的語(yǔ)言，如zh-CN
Connection	keep-alive 一次TCP連接重復(fù)使用
cookie	客戶端接收到的Cookie信息
Host	指定原始的 URL 中的主機(jī)和端口
User-Agent（簡(jiǎn)稱UA）	瀏覽器內(nèi)核信息
Content-type	發(fā)送數(shù)據(jù)的格式，如application/json

2、常見的Response headers

響應(yīng)頭含義

Content-type	返回?cái)?shù)據(jù)的格式，如application/json
Content-length	返回?cái)?shù)據(jù)的大小，多少字節(jié)
Content-Encoding	返回?cái)?shù)據(jù)的壓縮算法，如gzip
Set-Cookie	服務(wù)端向客戶端設(shè)置cookie

四、http 緩存

1、關(guān)于緩存的介紹

（1）什么是緩存

緩存是一種保存資源副本并在下次請(qǐng)求時(shí)直接使用該副本的技術(shù)。

（2）為什么需要緩存？

如果沒有緩存的話，每一次網(wǎng)絡(luò)請(qǐng)求都要加載大量的圖片和資源，這會(huì)使頁(yè)面的加載變慢許多。那緩存的目的其實(shí)就是為了盡量減少網(wǎng)絡(luò)請(qǐng)求的體積和數(shù)量，讓頁(yè)面加載的更快。

（3）哪些資源可以被緩存？——靜態(tài)資源（js、css、img）

• 網(wǎng)站的 html 是不能被緩存的。因?yàn)榫W(wǎng)站在使用過(guò)程中 html 隨時(shí)有可能被更新，隨時(shí)有可能被替換模板。
• 網(wǎng)頁(yè)的業(yè)務(wù)數(shù)據(jù)也是不能被緩存的。比如留言板和評(píng)論區(qū)，用戶隨時(shí)都可以在底下評(píng)論，那數(shù)據(jù)庫(kù)的內(nèi)容就會(huì)被頻繁被更新。

2、http 緩存策略（強(qiáng)制緩存 + 協(xié)商緩存）

（1）強(qiáng)制緩存

1）強(qiáng)制緩存是什么？

強(qiáng)制緩存就是文件直接從本地緩存中獲取，不需要發(fā)送請(qǐng)求。

2）圖例

先看第一個(gè)圖。

從上圖可以看到，當(dāng)初次請(qǐng)求時(shí)，瀏覽器會(huì)向服務(wù)器發(fā)起請(qǐng)求，服務(wù)器接收到瀏覽器的請(qǐng)求后，返回資源并返回一個(gè) Cache-Control 給客戶端，該 Cache-Control 一般設(shè)置緩存的最大過(guò)期時(shí)間。

---

接下來(lái)看第二個(gè)圖。

從上圖中可以看到，此時(shí)瀏覽器已經(jīng)接收到cache-control的值，那么這個(gè)時(shí)候?yàn)g覽器再次發(fā)送請(qǐng)求時(shí)，它會(huì)先檢查它的cache-control是否過(guò)期，如果沒有過(guò)期則直接從本地緩存中拉取資源，返回到客戶端，而無(wú)需再經(jīng)過(guò)服務(wù)器。

---

接下來(lái)看第三個(gè)圖。

強(qiáng)制緩存有過(guò)期時(shí)間，那么就意味著總有一天緩存會(huì)失效。那么假設(shè)某一天，客戶端的 cache-control 失效了，那么它就沒辦法從本地緩存中拉取資源。于是它會(huì)像第一張圖一樣，重新向服務(wù)器發(fā)起請(qǐng)求，之后服務(wù)器會(huì)再次返回資源和 cache-control 的值。

以上就是強(qiáng)制緩存的全過(guò)程。

3）Cache-Control

Cache-Control是什么？

• 存在于響應(yīng)頭Response Headers中；
• 控制強(qiáng)制緩存的邏輯；
• 例如：Cache-Control: max-age = 31536000（單位是秒）。

Cache-Control的值

Cache-Control值含義

max-age	設(shè)置緩存的最大過(guò)期時(shí)間
no-cache	不用本地緩存，正常的向服務(wù)端請(qǐng)求，服務(wù)端怎么處理我們不用管
no-store	簡(jiǎn)單粗暴，直接從服務(wù)端拉取緩存
private	只能允許最終用戶做緩存，最終用戶即電腦、手機(jī)等等
public	允許中間路由或中間代理做緩存

4）關(guān)于Expires

• 同在 Response Headers 中
• 同為控制緩存的過(guò)期時(shí)間（早期使用）
• 如果 cache-control 與 expires 同時(shí)存在的話， cache-control 的優(yōu)先級(jí)高于 expires

（2）協(xié)商緩存

1）協(xié)商緩存是什么？

• 協(xié)商緩存，也叫對(duì)比緩存。
• 它是一種服務(wù)端的緩存策略，即通過(guò)服務(wù)端來(lái)判斷某件事情是不是可以被緩存。
• 服務(wù)端判斷客戶端的資源，是否和服務(wù)端資源一樣，如果一致則返回 304 ，反之返回 200 和最新的資源。

2）圖例

同樣地，用幾張圖來(lái)演示協(xié)商緩存。

先來(lái)看第一張圖。

在上圖中，表明了協(xié)商緩存的全過(guò)程。首先，如果客戶端是第一次向服務(wù)器發(fā)出請(qǐng)求，則服務(wù)器返回資源和相對(duì)應(yīng)的資源標(biāo)識(shí)給瀏覽器。該資源標(biāo)識(shí)就是對(duì)當(dāng)前所返回資源的一種唯一標(biāo)識(shí)，可以是Etag或者是Last-Modified，這兩個(gè)字段將在圖例結(jié)束后展開講解。

之后如果瀏覽器再次發(fā)送請(qǐng)求時(shí)，瀏覽器就會(huì)帶上這個(gè)資源標(biāo)識(shí)。此時(shí)，服務(wù)端就會(huì)通過(guò)這個(gè)資源標(biāo)識(shí)，可以判斷出瀏覽器的資源跟服務(wù)端此時(shí)的資源是否一致，如果一致，則返回304，即表示Not Found 資源未修改。如果判斷結(jié)果為不一致，則返回200，并返回資源以及新的資源標(biāo)識(shí)。至此就結(jié)束了協(xié)商緩存的過(guò)程。

---

接下來(lái)看第二張圖。

假設(shè)此時(shí)我們的協(xié)商緩存用 Last-Modified 來(lái)判斷。當(dāng)瀏覽器第一次發(fā)送請(qǐng)求時(shí)，服務(wù)器返回資源并返回一個(gè) Last-Modified 的值給瀏覽器。這個(gè) Last-Modified 的值給到瀏覽器之后，瀏覽器會(huì)通過(guò) If-Modified-Since 的字段來(lái)保存 Last-Modified 的值，且 If-Modified-Since 保存在請(qǐng)求頭當(dāng)中。

之后當(dāng)瀏覽器再次發(fā)送請(qǐng)求時(shí)，請(qǐng)求頭會(huì)帶著 If-Modified-Since 的值去找服務(wù)器，服務(wù)器此刻就會(huì)匹配瀏覽器發(fā)過(guò)來(lái)的 If-Modified-Since 是否和自己最后一次修改的 Last-Modified 的值相等。如果相等，則返回 304 ，表示資源未被修改；如果不相等，則返回200，并返回資源和新的 Last-Modified 的值。

---

接下來(lái)看第三張圖。

假設(shè)此時(shí)我們的協(xié)商緩存用 Etag 來(lái)判斷。當(dāng)瀏覽器第一次發(fā)送請(qǐng)求時(shí)，服務(wù)器返回資源并返回一個(gè) Etag 的值給瀏覽器。這個(gè) Etag 的值給到瀏覽器之后，瀏覽器會(huì)通過(guò) If-None-Match 的字段來(lái)保存 Etag 的值，且 If-None-Match 保存在請(qǐng)求頭當(dāng)中。

之后當(dāng)瀏覽器再次發(fā)送請(qǐng)求時(shí)，請(qǐng)求頭會(huì)帶著 If-Modified-Since 的值去找服務(wù)器，服務(wù)器此刻就會(huì)匹配瀏覽器發(fā)過(guò)來(lái)的 If-None-Match 是否和自己最后一次修改的 Etag 的值相等。如果相等，則返回 304 ，表示資源未被修改；如果不相等，則返回 200 ，并返回資源和新的 Etag 的值。

通過(guò)圖例，相信大家對(duì)協(xié)商緩存有了一個(gè)新的認(rèn)識(shí)。接下來(lái)講解剛剛圖例中所包含的一些字段。

3）資源標(biāo)識(shí)

在響應(yīng)頭部 Response Headers 中，有兩種資源標(biāo)識(shí)：

• Last-Modified 資源的最后修改時(shí)間，對(duì)應(yīng)請(qǐng)求頭為 If-Modified-Since ；
• Etag 資源的唯一標(biāo)識(shí)，所謂唯一，可以想象成時(shí)人類的指紋，具有唯一性；但 Etag 的本質(zhì)是一個(gè)字符串；對(duì)應(yīng)請(qǐng)求頭為 If-None-Match 。

4）Last-Modified 和 Etag

• 當(dāng)響應(yīng)頭部 Response Headers 同時(shí)存在 Last-Modified 和 Etag 的值時(shí)，會(huì)優(yōu)先使用 Etag ；
• Last-Modified 只能精確到秒級(jí)；
• 如果資源被重復(fù)生成，而內(nèi)容不變，則 Etag 更精確。

5)Headers 示例

由上圖可以看到，響應(yīng)頭中的 Last-Modified 對(duì)應(yīng)請(qǐng)求頭中的 If-Modified-Since ， Etag 對(duì)應(yīng)請(qǐng)求頭中的 If-None-Match 。

6）流程圖

說(shuō)到這里，協(xié)商緩存的內(nèi)容也快結(jié)束啦！最后的最后，我們用一張流程圖來(lái)展示協(xié)商緩存的全過(guò)程。

3、刷新操作方式，對(duì)緩存的影響

講完緩存，我們?cè)賮?lái)講個(gè)有點(diǎn)重要但是有點(diǎn)題外話的內(nèi)容：刷新操作。我們平常在上網(wǎng)時(shí)，總有某個(gè)時(shí)刻突然網(wǎng)卡了，這個(gè)時(shí)候人的本性總是非常不耐煩的，毫不猶豫的就來(lái)個(gè)刷新。但殊不知，刷新對(duì)緩存也存在一定的影響。下面我們一起來(lái)看下各種刷新姿勢(shì)以及其對(duì)緩存的影響。

（1）正常操作

定義： 地址欄輸入 url ，跳轉(zhuǎn)鏈接，前進(jìn)后退等。

對(duì)緩存的影響： 強(qiáng)制緩存有效，協(xié)商緩存有效。

（2）手動(dòng)刷新

定義： F5 ，點(diǎn)擊刷新按鈕，右擊菜單刷新。

對(duì)緩存的影響： 強(qiáng)制緩存失效，協(xié)商緩存有效。

（3）強(qiáng)制刷新

定義： ctrl + F5 。

對(duì)緩存的影響： 強(qiáng)制緩存失效，協(xié)商緩存失效。

這一塊內(nèi)容僅當(dāng)娛樂補(bǔ)充，大家可以根據(jù)自身需求學(xué)習(xí)~

五、寫在最后

http協(xié)議對(duì)于開發(fā)來(lái)說(shuō)時(shí)很重要很重要的一塊內(nèi)容，不管時(shí)前端還是后端，對(duì)于常見的狀態(tài)碼，請(qǐng)求方法請(qǐng)求頭和響應(yīng)頭，還有強(qiáng)緩存和協(xié)商緩存都是必須要了解的知識(shí)點(diǎn)。

關(guān)于http協(xié)議的知識(shí)就講到這里啦！如有疑問或文章有講的不好的地方歡迎評(píng)論區(qū)評(píng)論或私信我交流~

• 關(guān)注公眾號(hào) 星期一研究室 ，不定期分享學(xué)習(xí)干貨

• 如果這篇文章對(duì)你有用，記得點(diǎn)個(gè)贊加個(gè)關(guān)注再走哦~

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來(lái)咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的你知道304吗？图解强缓存和协商缓存的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。