HTTP協定詳解
1、什麼是HTTP協定
協定是指計算機通信網絡中兩台計算機之間進行通信所必須共同遵守的規定或規則，超文本傳輸協定(HTTP)是一種通信協定，它允許将超文本标記語言(HTML)文檔從Web伺服器傳送到用戶端的浏覽器
目前我們使用的是HTTP/1.1 版本
當我們打開浏覽器，在位址欄中輸入URL，然後我們就看到了網頁。 原理是怎樣的呢？
實際上我們輸入URL後，我們的浏覽器給Web伺服器發送了一個Request, Web伺服器接到Request後進行處理，生成相應的Response，然後發送給浏覽器， 浏覽器解析Response中的HTML,這樣我們就看到了網頁，過程如下圖所示
<a href="https://s3.51cto.com/oss/201710/25/72adef6481ca80e1c5f6b934bdd613b7.png-wh_500x0-wm_3-wmp_4-s_3529621967.png" target="_blank"></a>
我們的Request 有可能是經過了代理伺服器，最後才到達Web伺服器的。
過程如下圖所示
<a href="https://s5.51cto.com/oss/201710/25/59983dbe47b8fcefd357faa1c3f12479.png-wh_500x0-wm_3-wmp_4-s_3567083435.png" target="_blank"></a>
代理伺服器就是網絡資訊的中轉站，有什麼功能呢？
1. 提高通路速度， 大多數的代理伺服器都有緩存功能。
2. 突破限制， 也就是FQ了
3. 隐藏身份
URL(Uniform Resource Locator) 位址用于描述一個網絡上的資源, 基本格式如下
scheme 指定低層使用的協定(例如：http, https, ftp)
host HTTP伺服器的IP位址或者域名
port# HTTP伺服器的預設端口是80，這種情況下端口号可以省略。如果使用了别的端口，必須指明，例如 http://www.cnblogs.com:8080/
path 通路資源的路徑
query-string 發送給http伺服器的資料
anchor- 錨
URL 的一個例子
http協定是無狀态的，同一個用戶端的這次請求和上次請求是沒有對應關系，對http伺服器來說，它并不知道這兩個請求來自同一個用戶端。 為了解決這個問題， Web程式引入了Cookie機制來維護狀态.
1. 當你在浏覽器輸入URL http://www.cnblogs.com 的時候，浏覽器發送一個Request去擷取 http://www.cnblogs.com 的html. 伺服器把Response發送回給浏覽器.
2. 浏覽器分析Response中的 HTML，發現其中引用了很多其他檔案，比如圖檔，CSS檔案，JS檔案。
3. 浏覽器會自動再次發送Request去擷取圖檔，CSS檔案，或者JS檔案。
4. 等所有的檔案都下載下傳成功後。 網頁就被顯示出來了
先看Request 消息的結構, Request 消息分為3部分，第一部分叫Request line, 第二部分叫Request header, 第三部分是body. header和body之間有個空行， 結構如下圖
<a href="https://s2.51cto.com/oss/201710/25/01993fcb23bea9653c179221e43aa4f7.png-wh_500x0-wm_3-wmp_4-s_3455476307.png" target="_blank"></a>
第一行中的Method表示請求方法,比如"POST","GET", Path-to-resoure表示請求的資源， Http/version-number 表示HTTP協定的版本号
當使用的是"GET" 方法的時候， body是為空的
比如我們打開部落格園首頁的request 如下
抽象的東西，難以了解，老感覺是虛的， 所謂眼見為實, 實際見到的東西，我們才能了解和記憶。 我們今天用Fiddler，實際的看看Request和Response.
下面我們打開Fiddler 捕捉一個部落格園登入的Request 然後分析下它的結構, 在Inspectors tab下以Raw的方式可以看到完整的Request的消息， 如下圖
<a href="https://s2.51cto.com/oss/201710/25/9c820840af5036a72f6625e5d0715295.png-wh_500x0-wm_3-wmp_4-s_2521437891.png" target="_blank"></a>
我們再看Response消息的結構, 和Request消息的結構基本一樣。 同樣也分為三部分,第一部分叫Response line, 第二部分叫Response header，第三部分是body. header和body之間也有個空行, 結構如下圖
<a href="https://s4.51cto.com/oss/201710/25/68f5eddf3869c8e4ea16d10a0d5fe512.png-wh_500x0-wm_3-wmp_4-s_3162574916.png" target="_blank"></a>
我們用Fiddler 捕捉一個部落格園首頁的Response然後分析下它的結構, 在Inspectors tab下以Raw的方式可以看到完整的Response的消息， 如下圖
<a href="https://s5.51cto.com/oss/201710/25/514e97bb9e7df4553c28611ac306822d.png-wh_500x0-wm_3-wmp_4-s_2744715102.png" target="_blank"></a>
Http協定定義了很多與伺服器互動的方法，最基本的有4種，分别是GET,POST,PUT,DELETE. 一個URL位址用于描述一個網絡上的資源，而HTTP中的GET, POST, PUT, DELETE就對應着對這個資源的查，改，增，删4個操作。 我們最常見的就是GET和POST了。GET一般用于擷取/查詢資源資訊，而POST一般用于更新資源資訊.
我們看看GET和POST的差別
1. GET送出的資料會放在URL之後，以?分割URL和傳輸資料，參數之間以&相連，如EditPosts.aspx?name=test1&id=123456. POST方法是把送出的資料放在HTTP包的Body中.
2. GET送出的資料大小有限制（因為浏覽器對URL的長度有限制），而POST方法送出的資料沒有限制.
3. GET方式需要使用Request.QueryString來取得變量的值，而POST方式通過Request.Form來擷取變量的值。
4. GET方式送出資料，會帶來安全問題，比如一個登入頁面，通過GET方式送出資料時，使用者名和密碼将出現在URL上，如果頁面可以被緩存或者其他人可以通路這台機器，就可以從曆史記錄獲得該使用者的賬号和密碼
Response 消息中的第一行叫做狀态行，由HTTP協定版本号， 狀态碼， 狀态消息 三部分組成。
狀态碼用來告訴HTTP用戶端,HTTP伺服器是否産生了預期的Response.
HTTP/1.1中定義了5類狀态碼， 狀态碼由三位數字組成，第一個數字定義了響應的類别
1XX 提示資訊 - 表示請求已被成功接收，繼續處理
2XX 成功 - 表示請求已被成功接收，了解，接受
3XX 重定向 - 要完成請求必須進行更進一步的處理
4XX 用戶端錯誤 - 請求有文法錯誤或請求無法實作
5XX 伺服器端錯誤 - 伺服器未能實作合法的請求
看看一些常見的狀态碼
最常見的就是成功響應狀态碼200了， 這表明該請求被成功地完成，所請求的資源發送回用戶端
如下圖， 打開部落格園首頁
<a href="https://s4.51cto.com/oss/201710/25/038ea0e89b75ea9fd1e05b26a93c09c3.png-wh_500x0-wm_3-wmp_4-s_2755204821.png" target="_blank"></a>
302 Found
重定向，新的URL會在response 中的Location中傳回，浏覽器将會自動使用新的URL發出新的Request
例如在IE中輸入， http://www.google.com. HTTP伺服器會傳回302， IE取到Response中Location header的新URL, 又重新發送了一個Request.
<a href="https://s5.51cto.com/oss/201710/25/054d220df836780dc1c736f14b17de1d.png-wh_500x0-wm_3-wmp_4-s_3178168588.png" target="_blank"></a>
304 Not Modified
代表上次的文檔已經被緩存了， 還可以繼續使用，
例如打開部落格園首頁, 發現很多Response 的status code 都是304
<a href="https://s1.51cto.com/oss/201710/25/d621cd5d6dbe65bbc7bef06750744c13.png-wh_500x0-wm_3-wmp_4-s_3028412707.png" target="_blank"></a>
提示： 如果你不想使用本地緩存可以用Ctrl+F5 強制重新整理頁面
400 Bad Request 用戶端請求與文法錯誤，不能被伺服器所了解
403 Forbidden 伺服器收到請求，但是拒絕提供服務
請求資源不存在（輸錯了URL）
比如在IE中輸入一個錯誤的URL， http://www.cnblogs.com/tesdf.aspx
<a href="https://s3.51cto.com/oss/201710/25/637e8050e535848b9091fabbb2d35991.png-wh_500x0-wm_3-wmp_4-s_2361502124.png" target="_blank"></a>
500 Internal Server Error 伺服器發生了不可預期的錯誤
503 Server Unavailable 伺服器目前不能處理用戶端的請求，一段時間後可能恢複正常
使用Fiddler 能很友善的檢視Reques header, 點選Inspectors tab ->Request tab-> headers 如下圖所示.
<a href="https://s3.51cto.com/oss/201710/25/1aac06906c7b949bf78d2a1bf61d2738.png-wh_500x0-wm_3-wmp_4-s_3915388237.png" target="_blank"></a>
header 有很多，比較難以記憶，我們也按照Fiddler那樣把header 進行分類，這樣比較清晰也容易記憶
If-Modified-Since
作用： 把浏覽器端緩存頁面的最後修改時間發送到伺服器去，伺服器會把這個時間與伺服器上實際檔案的最後修改時間進行對比。如果時間一緻，那麼傳回304，用戶端就直接使用本地緩存檔案。如果時間不一緻，就會傳回200和新的檔案内容。用戶端接到之後，會丢棄舊檔案，把新檔案緩存起來，并顯示在浏覽器中.
例如：If-Modified-Since: Thu, 09 Feb 2012 09:07:57 GMT
執行個體如下圖
<a href="https://s5.51cto.com/oss/201710/25/d5988d028e0490561979d91992cf3db4.png-wh_500x0-wm_3-wmp_4-s_3809505298.png" target="_blank"></a>
If-None-Match
作用: If-None-Match和ETag一起工作，工作原理是在HTTP Response中添加ETag資訊。 當使用者再次請求該資源時，将在HTTP Request 中加入If-None-Match資訊(ETag的值)。如果伺服器驗證資源的ETag沒有改變（該資源沒有更新），将傳回一個304狀态告訴用戶端使用本地緩存檔案。否則将傳回200狀态和新的資源和Etag. 使用這樣的機制将提高網站的性能
例如: If-None-Match: "03f2b33c0bfcc1:0"
<a href="https://s1.51cto.com/oss/201710/25/35ed724dd54d62fd53cd48cb5d513f60.png-wh_500x0-wm_3-wmp_4-s_2568876308.png" target="_blank"></a>
Pragma
作用： 防止頁面被緩存， 在HTTP/1.1版本中，它和Cache-Control:no-cache作用一模一樣
Pargma隻有一個用法， 例如： Pragma: no-cache
注意: 在HTTP/1.0版本中，隻實作了Pragema:no-cache, 沒有實作Cache-Control
Cache-Control
作用: 這個是非常重要的規則。 這個用來指定Response-Request遵循的緩存機制。各個指令含義如下
Cache-Control:Public 可以被任何緩存所緩存（）
Cache-Control:Private 内容隻緩存到私有緩存中
Cache-Control:no-cache 所有内容都不會被緩存
還有其他的一些用法， 我沒搞懂其中的意思， 請大家參考其他的資料
Accept
作用： 浏覽器端可以接受的媒體類型,
例如： Accept: text/html 代表浏覽器可以接受伺服器回發的類型為 text/html 也就是我們常說的html文檔,
如果伺服器無法傳回text/html類型的資料,伺服器應該傳回一個406錯誤(non acceptable)
通配符 * 代表任意類型
例如 Accept: */* 代表浏覽器可以處理所有類型,(一般浏覽器發給伺服器都是發這個)
Accept-Encoding：
作用： 浏覽器申明自己接收的編碼方法，通常指定壓縮方法，是否支援壓縮，支援什麼壓縮方法（gzip，deflate），（注意：這不是隻字元編碼）;
例如： Accept-Encoding: gzip, deflate
Accept-Language
作用： 浏覽器申明自己接收的語言。
語言跟字元集的差別：中文是語言，中文有多種字元集，比如big5，gb2312，gbk等等；
例如： Accept-Language: en-us
User-Agent
作用：告訴HTTP伺服器， 用戶端使用的作業系統和浏覽器的名稱和版本.
我們上網登陸論壇的時候，往往會看到一些歡迎資訊，其中列出了你的作業系統的名稱和版本，你所使用的浏覽器的名稱和版本，這往往讓很多人感到很神奇，實際上，伺服器應用程式就是從User-Agent這個請求報頭域中擷取到這些資訊User-Agent請求報頭域允許用戶端将它的作業系統、浏覽器和其它屬性告訴伺服器。
例如： User-Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; CIBA; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; .NET4.0C; InfoPath.2; .NET4.0E)
Accept-Charset
作用：浏覽器申明自己接收的字元集，這就是本文前面介紹的各種字元集和字元編碼，如gb2312，utf-8（通常我們說Charset包括了相應的字元編碼方案）；
Cookie:
作用： 最重要的header, 将cookie的值發送給HTTP 伺服器
Content-Length
作用：發送給HTTP伺服器資料的長度。
例如： Content-Length: 38
Content-Type
作用：
例如：Content-Type: application/x-www-form-urlencoded
Referer:
作用： 提供了Request的上下文資訊的伺服器，告訴伺服器我是從哪個連結過來的，比如從我首頁上連結到一個朋友那裡，他的伺服器就能夠從HTTP Referer中統計出每天有多少使用者點選我首頁上的連結通路他的網站。
例如: Referer:
<a href="http://translate.google.cn/?hl=zh-cn&tab=wT" target="_blank">http://translate.google.cn/?hl=zh-cn&tab=wT</a>
Connection
例如： Connection: keep-alive 當一個網頁打開完成後，用戶端和伺服器之間用于傳輸HTTP資料的TCP連接配接不會關閉，如果用戶端再次通路這個伺服器上的網頁，會繼續使用這一條已經建立的連接配接
例如： Connection: close 代表一個Request完成後，用戶端和伺服器之間用于傳輸HTTP資料的TCP連接配接會關閉， 當用戶端再次發送Request，需要重建立立TCP連接配接。
Host（發送請求時，該報頭域是必需的）
作用: 請求報頭域主要用于指定被請求資源的Internet主機和端口号，它通常從HTTP URL中提取出來的
例如: 我們在浏覽器中輸入：http://www.guet.edu.cn/index.html
浏覽器發送的請求消息中，就會包含Host請求報頭域，如下：
Host：http://www.guet.edu.cn
此處使用預設端口号80，若指定了端口号，則變成：Host：指定端口号
同樣使用Fiddler 檢視Response header, 點選Inspectors tab ->Response tab-> headers 如下圖所示
<a href="https://s4.51cto.com/oss/201710/25/515fd0403ef811d60bfb2e77048750f4.png-wh_500x0-wm_3-wmp_4-s_3462070983.png" target="_blank"></a>
我們也按照Fiddler那樣把header 進行分類，這樣比較清晰也容易記憶
Date
作用: 生成消息的具體時間和日期
例如： Date: Sat, 11 Feb 2012 11:35:14 GMT
Expires
作用: 浏覽器會在指定過期時間内使用本地緩存
例如: Expires: Tue, 08 Feb 2022 11:35:14 GMT
Vary
例如: Vary: Accept-Encoding
P3P
作用: 用于跨域設定Cookie, 這樣可以解決iframe跨域通路cookie的問題
例如: P3P: CP=CURa ADMa DEVa PSAo PSDo OUR BUS UNI PUR INT DEM STA PRE COM NAV OTC NOI DSP COR
Set-Cookie
作用： 非常重要的header, 用于把cookie 發送到用戶端浏覽器， 每一個寫入cookie都會生成一個Set-Cookie.
例如: Set-Cookie: sc=4c31523a; path=/; domain=.acookie.taobao.com
<a href="https://s4.51cto.com/oss/201710/25/cad7311006ba55abc823657098546705.png-wh_500x0-wm_3-wmp_4-s_3179428090.png" target="_blank"></a>
ETag
作用: 和If-None-Match 配合使用。 （執行個體請看上節中If-None-Match的執行個體）
例如: ETag: "03f2b33c0bfcc1:0"
Last-Modified:
作用： 用于訓示資源的最後修改日期和時間。（執行個體請看上節的If-Modified-Since的執行個體）
例如: Last-Modified: Wed, 21 Dec 2011 09:09:10 GMT
作用：WEB伺服器告訴浏覽器自己響應的對象的類型和字元集,
例如:
Content-Type: text/html; charset=utf-8
Content-Type:text/html;charset=GB2312
Content-Type: image/jpeg
指明實體正文的長度，以位元組方式存儲的十進制數字來表示。在資料下行的過程中，Content-Length的方式要預先在伺服器中緩存所有資料，然後所有資料再一股腦兒地發給用戶端。
例如: Content-Length: 19847
Content-Encoding
WEB伺服器表明自己使用了什麼壓縮方法（gzip，deflate）壓縮響應中的對象。
例如：Content-Encoding：gzip
Content-Language
作用： WEB伺服器告訴浏覽器自己響應的對象的語言者
例如： Content-Language:da
Server:
作用：指明HTTP伺服器的軟體資訊
例如:Server: Microsoft-IIS/7.5
X-AspNet-Version:
作用：如果網站是用ASP.NET開發的，這個header用來表示ASP.NET的版本
例如: X-AspNet-Version: 4.0.30319
X-Powered-By:
作用：表示網站是用什麼技術開發的
例如： X-Powered-By: ASP.NET
例如： Connection: close 代表一個Request完成後，用戶端和伺服器之間用于傳輸HTTP資料的TCP連接配接會關閉， 當用戶端再次發送Request，需要重建立立TCP連接配接
Location
作用： 用于重定向一個新的位置, 包含新的URL位址
執行個體請看304狀态執行個體
無狀态是指協定對于事務處理沒有記憶能力，伺服器不知道用戶端是什麼狀态。從另一方面講，打開一個伺服器上的網頁和你之前打開這個伺服器上的網頁之間沒有任何聯系
HTTP是一個無狀态的面向連接配接的協定，無狀态不代表HTTP不能保持TCP連接配接，更不能代表HTTP使用的是UDP協定（無連接配接）
從HTTP/1.1起，預設都開啟了Keep-Alive，保持連接配接特性，簡單地說，當一個網頁打開完成後，用戶端和伺服器之間用于傳輸HTTP資料的TCP連接配接不會關閉，如果用戶端再次通路這個伺服器上的網頁，會繼續使用這一條已經建立的連接配接
Keep-Alive不會永久保持連接配接，它有一個保持時間，可以在不同的伺服器軟體（如Apache）中設定這個時間
本文轉自liujing0751CTO部落格，原文連結： http://blog.51cto.com/13281352/1975926，如需轉載請自行聯系原作者
![2018年不想被web前端開發淘汰，你需要掌握哪些技術？[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)