目錄
- HTTP簡(jiǎn)述
- URL
- HTTP 請(qǐng)求
- 格式
- GET 請(qǐng)求
- POST 請(qǐng)求
- GET 和 POST 的區(qū)別
- 用 Chrome 發(fā)請(qǐng)求
- HTTP 響應(yīng)
- 格式
- 用 Chrome 查看響應(yīng)
- URI 和 URL 的區(qū)別
- 總結(jié)
HTTP 簡(jiǎn)述
HTTP 協(xié)議铛铁，即超文本傳輸協(xié)議（HyperText Transfer Protocol），是一種用于分布式、協(xié)作式和超媒體信息系統(tǒng)的應(yīng)用層協(xié)議苹粟。HTTP是萬維網(wǎng)的數(shù)據(jù)通信的基礎(chǔ)荒勇。
HTTP 本身是Tim Berners-Lee發(fā)明的萬維網(wǎng)中重要三個(gè)概念之一墨技，即URL警没，HTTP刑然，HTML。
其中愉粤，
- URL砾医，俗稱網(wǎng)址
- HTTP，兩個(gè)電腦之間傳輸內(nèi)容的協(xié)議
- HTML衣厘，超級(jí)文本如蚜，主要用來做頁面跳轉(zhuǎn)
通俗地講，URL 的作用是能讓你訪問一個(gè)頁面影暴，HTTP 的作用是讓你能下載這個(gè)頁面错邦，HTML 的作用是讓你能看懂這個(gè)頁面。
通常坤检，由HTTP客戶端發(fā)起一個(gè)請(qǐng)求兴猩，創(chuàng)建一個(gè)到服務(wù)器指定端口（默認(rèn)是80端口）的TCP連接。HTTP服務(wù)器則在那個(gè)端口監(jiān)聽客戶端的請(qǐng)求早歇。一旦收到請(qǐng)求倾芝，服務(wù)器會(huì)向客戶端返回一個(gè)狀態(tài)，比如"HTTP/1.1 200 OK"箭跳，以及返回的內(nèi)容晨另，如請(qǐng)求的文件、錯(cuò)誤消息谱姓、或者其它信息借尿。
URL
了解HTTP之前，需要了解下 URL屉来。
url是統(tǒng)一資源定位符路翻，是對(duì)可以從互聯(lián)網(wǎng)上得到的資源的位置和訪問方法的一種簡(jiǎn)潔的表示，是互聯(lián)網(wǎng)上標(biāo)準(zhǔn)資源的地址茄靠。
這里主要了解它的結(jié)構(gòu)茂契。比如：
https://www.baidu.com/s?wd=Jay#6
-
https://： 超文本傳輸安全協(xié)議 -
www.baidu.com： 域名 -
/s： 路徑 -
?wd=Jay： 查詢參數(shù) -
#6： 錨點(diǎn)
HTTP 請(qǐng)求
HTTP/1.1 協(xié)議中定義了多種請(qǐng)求方法，包括 GET慨绳，POST掉冶，GET，PUT脐雪，PATCH厌小， DELETE，HEAD战秋，OPTIONS 等璧亚，這里只介紹最常見的 GET 和 POST 請(qǐng)求。
格式
請(qǐng)求方法 路徑 協(xié)議/版本
Key1: value1
Key2: value2
Key3: value3
Content-Length: n
Content-Type: application/x-www-form-urlencoded
Host: www.example.com
User-Agent: curl/7.56.0要上傳的數(shù)據(jù)
- 第一行是第一部分：請(qǐng)求行
請(qǐng)求方法就是前面提到的那幾種脂信，常用GET涨岁，POST（思考它們的區(qū)別）拐袜。這里的路徑包括「查詢參數(shù)」吉嚣，但不包括「錨點(diǎn)」梢薪。如果你沒有寫路徑，那么路徑默認(rèn)為 / 尝哆。 - 第二行直到回車是第二部分：請(qǐng)求報(bào)頭
請(qǐng)求報(bào)頭包含客戶端向服務(wù)器傳遞請(qǐng)求的附加信息和客戶端自身的信息秉撇，由關(guān)鍵字/值對(duì)組成，每行一對(duì)秋泄，關(guān)鍵字和值用英文冒號(hào):分隔琐馆。
常見的請(qǐng)求報(bào)頭有: Accept, Accept-Charset, Accept-Encoding, Accept-Language, Content-Type, Authorization, Cookie, User-Agent 等。 - 第三部分永遠(yuǎn)都是一個(gè)回車（\n）
- 回車后的內(nèi)容是第四部分：請(qǐng)求正文
當(dāng)使用 POST恒序、PUT 等方法時(shí)瘦麸，通常需要客戶端向服務(wù)器傳遞數(shù)據(jù)。這些數(shù)據(jù)就儲(chǔ)存在請(qǐng)求正文中歧胁。請(qǐng)求正文可以承載多個(gè)請(qǐng)求參數(shù)的數(shù)據(jù)滋饲，包含回車符、換行符和請(qǐng)求數(shù)據(jù)喊巍，并不是所有請(qǐng)求都具有請(qǐng)求數(shù)據(jù)（也就是說第四部分可以為空）屠缭。
在請(qǐng)求包頭中有一些與請(qǐng)求正文相關(guān)的信息，例如：現(xiàn)在的 Web 應(yīng)用通常采用 Rest 架構(gòu)崭参，請(qǐng)求的數(shù)據(jù)格式一般為 json呵曹。這時(shí)就需要設(shè)置Content-Type: application/json。
GET 請(qǐng)求
這里先介紹一個(gè)工具 curl何暮。
curl命令
curl是一個(gè)利用URL規(guī)則在命令行下工作的文件傳輸工具奄喂，可以說是一款很強(qiáng)大的http命令行工具。它支持文件的上傳和下載海洼，是綜合傳輸工具跨新，但按傳統(tǒng)，習(xí)慣稱url為下載工具贰军。
它可以很直觀地將你要訪問的網(wǎng)站的請(qǐng)求和響應(yīng)表示出來玻蝌，這里我們以訪問國(guó)內(nèi)最大同性交友網(wǎng)站 bilibili 為例。
curl -s -v -H "key: value" -- "https://www.bilibili.com"
如上词疼，
-
-s：不要顯示進(jìn)度 -
-v：顯示一次的http請(qǐng)求的通信過程俯树，去掉的話只返回HTML文檔，沒有請(qǐng)求和響應(yīng) -
-H：添加后面的內(nèi)容到請(qǐng)求頭贰盗，來自定義Header许饿，里面的內(nèi)容任意，比如："Referer: www.example.com" - 這是一個(gè) GET 請(qǐng)求
我們將會(huì)得到如下結(jié)果舵盈。先是顯示內(nèi)容的頭部陋率，HTML文件太大沒截全圖：
顯示內(nèi)容的尾部：
POST請(qǐng)求
當(dāng)需要發(fā)送表單數(shù)據(jù)到服務(wù)器時(shí)球化，可以用POST請(qǐng)求。
curl -X POST -d "title=xxx&text=yyy" www.example.com/add
-
-X：指定發(fā)送數(shù)據(jù)的方式瓦糟，這里是POST - curl 默認(rèn)以
application/x-www-form-urlencoded作為 Content-Type 來發(fā)送數(shù)據(jù)
那么會(huì)相應(yīng)地返回結(jié)果如下：
POST / HTTP/1.1
Host: www.examle.com/add
User-Agent: curl/7.56.0
Accept: */*
Content-Length: 18
Content-Type: application/x-www-form-urlencoded
title=xxx&text=yyy
GET 和 POST 的區(qū)別
get 和 post 雖然本質(zhì)都是 tcp/ip筒愚，但兩者除了在 http 層面外，在 tcp/ip 層面也有區(qū)別菩浙。
get 會(huì)產(chǎn)生一個(gè) tcp 數(shù)據(jù)包巢掺，post 兩個(gè)。具體就是：
- get 請(qǐng)求時(shí)劲蜻，瀏覽器會(huì)把 headers 和 data 一起發(fā)送出去陆淀，服務(wù)器響應(yīng) 200（返回?cái)?shù)據(jù)）
- post 請(qǐng)求時(shí)，瀏覽器先發(fā)送 headers先嬉，服務(wù)器響應(yīng) 100 continue轧苫， 瀏覽器再發(fā)送 data，服務(wù)器響應(yīng)200（返回?cái)?shù)據(jù)）
用 Chrome 發(fā)請(qǐng)求
- 按 F12 進(jìn)入開發(fā)者模式
- 打開 Network
- 地址欄輸入網(wǎng)址
- 在 Network 點(diǎn)擊疫蔓，查看 request含懊，點(diǎn)擊「view source」
- 如果有請(qǐng)求的第四部分，那么在 FormData 或 Payload 里面可以看到
HTTP 響應(yīng)
在上面訪問bilibili的例子中鳄袍，顯示末尾的一部分就是服務(wù)器的響應(yīng)：
再加上前面很長(zhǎng)的那個(gè)HTML文件绢要，一起組成了HTTP響應(yīng)的結(jié)構(gòu)。
格式
協(xié)議/版本號(hào) 狀態(tài)碼 狀態(tài)解釋
Key1: value1
Key2: value2
Content-Length: n
Content-Type: text/html要下載的內(nèi)容
可以看到拗小，響應(yīng)的格式和請(qǐng)求格式基本一致重罪。
狀態(tài)碼是服務(wù)器對(duì)瀏覽器說的話，可以粗暴地如下來記憶：
1xx 表示server說：我知道了哀九，你繼續(xù)
2xx 表示成功
3xx 表示server說：滾吧
4xx 表示server說：你丫錯(cuò)了
5xx 表示server說：好吧剿配，我錯(cuò)了
一些常見的狀態(tài)碼：
200 OK //客戶端請(qǐng)求成功
400 Bad Request //客戶端請(qǐng)求有語法錯(cuò)誤，不能被服務(wù)器所理解
401 Unauthorized //請(qǐng)求未經(jīng)授權(quán)阅束，這個(gè)狀態(tài)代碼必須和WWW-Authenticate報(bào)頭域一起使用
403 Forbidden //服務(wù)器收到請(qǐng)求呼胚，但是拒絕提供服務(wù)
404 Not Found //請(qǐng)求資源不存在，eg：輸入了錯(cuò)誤的URL
500 Internal Server Error //服務(wù)器發(fā)生不可預(yù)期的錯(cuò)誤
502 Bad Gateway //作為網(wǎng)關(guān)或者代理工作的服務(wù)器嘗試執(zhí)行請(qǐng)求時(shí)息裸，從遠(yuǎn)程服務(wù)器接收到了一個(gè)無效的響應(yīng)
503 Server Unavailable //服務(wù)器當(dāng)前不能處理客戶端的請(qǐng)求蝇更，一段時(shí)間后可能恢復(fù)正常
用 Chrome 查看響應(yīng)
- 按 F12 進(jìn)入開發(fā)者模式
- 打開 Network
- 輸入網(wǎng)址
- 選中第一個(gè)響應(yīng)
- 查看 Response Headers，點(diǎn)擊「view source」
- 查看 Response 或者 Preview呼盆，你會(huì)看到響應(yīng)的第 4 部分
URI 和 URL 的區(qū)別
小插曲年扩，一圖蓋之：
總結(jié)
HTTP的知識(shí)對(duì)前端開發(fā)非常重要，這里只是淺談了一下HTTP的格式访圃、分類和一些狀態(tài)碼厨幻，等以后學(xué)習(xí)了HTTP更深入的知識(shí)再來填坑。
