2. 深入學(xué)習(xí)http

2.5 關(guān)于referer

????????Referer 描述了當(dāng)前頁(yè)面是從哪個(gè)頁(yè)面跳轉(zhuǎn)來(lái)的，如果是直接在地址欄輸入 url(或者點(diǎn)擊收藏夾中的按鈕) 都是沒(méi)有 Referer。如下圖所示：

????????HTTP 最大的問(wèn)題在于"明文傳輸”,明文傳輸就容易被第三方獲取并篡改.
????????HTTPS 針對(duì) HTTP 數(shù)據(jù)進(jìn)行了加密 (header 和 body 都加密了).第三方想要獲取或者篡改,就沒(méi)那么容易了(HTTPS 詳細(xì)介紹)，通過(guò)這個(gè)手段,就可以有效遏制運(yùn)營(yíng)商劫持這樣的情況?

2.6?Cookie?

????????Cookie 可以認(rèn)為是瀏覽器在本地存儲(chǔ)數(shù)據(jù)的一種機(jī)制，如下所示：

????????瀏覽器的數(shù)據(jù)來(lái)自于服務(wù)器,瀏覽器后續(xù)的操作也是要提交給服務(wù)器的.服務(wù)器這邊管理著一個(gè)網(wǎng)站的各種核心數(shù)據(jù)，但是程序運(yùn)行過(guò)程中,也會(huì)有一些數(shù)據(jù),需要在瀏覽器這邊存儲(chǔ)的,并且在后續(xù)請(qǐng)求的時(shí)候數(shù)據(jù)可能需要再發(fā)給服務(wù)器,(類(lèi)似于上次登陸時(shí)間.上次訪問(wèn)時(shí)間,用戶的身份信息,累計(jì)的訪問(wèn)次數(shù)..，臨時(shí)性的數(shù)據(jù)，存儲(chǔ)在瀏覽器比較合適的。)

????????實(shí)際上更容易想到的是,把這樣的數(shù)據(jù)直接存儲(chǔ)到本地文件中，但是實(shí)際上不可行的，瀏覽器為了考慮到安全性,禁止網(wǎng)頁(yè)直接訪問(wèn)你的電腦的文件系統(tǒng)；網(wǎng)頁(yè)代碼中也就無(wú)法直接生成一個(gè)硬盤(pán)的文件來(lái)儲(chǔ)數(shù)據(jù)了；

????????為了保證安全性,又能進(jìn)行存儲(chǔ)數(shù)據(jù),于是就引入了 Cookie(也是按照硬盤(pán)文件的方式保存的,但是瀏覽器把操作文件給封裝了,網(wǎng)頁(yè)只能往 Cookie 中存儲(chǔ)鍵值對(duì)；

????????Cookie 往往是從服務(wù)器返回的數(shù)據(jù)(也可以是頁(yè)面自己生成的)；
????????Cookie 存儲(chǔ)到瀏覽器所在主機(jī)的硬盤(pán)上, 并且是按照域名為維度來(lái)存儲(chǔ)的.(每個(gè)域名下可以存自己的 Cookie,彼此之間不影響)
????????Cookie 是按照鍵值對(duì)的形式來(lái)組織的,這里的鍵值對(duì)也都是程序猿自定義的 (和 query string 差不多)，后續(xù)再請(qǐng)求這個(gè)服務(wù)器的時(shí)候,就會(huì)把 Cookie 中的內(nèi)容自動(dòng)代入到請(qǐng)求中,發(fā)給服務(wù)器,服務(wù)器通過(guò) Cookie 的內(nèi)容做一些邏輯上的處理

? ? ? ? 瀏覽器中正在使用的cookie如下圖所示：

????????

????????鍵值對(duì)之間，使用;分割. 鍵和值使用 = 分割.上圖所述的這些內(nèi)容就是瀏覽器本地存儲(chǔ)的cookie,都會(huì)再后續(xù)請(qǐng)求服務(wù)器的時(shí)候,把這些內(nèi)容給代入到請(qǐng)求中,傳給服務(wù)器

3. 關(guān)于http響應(yīng)

????????響應(yīng)狀態(tài)碼表示了這次請(qǐng)求對(duì)應(yīng)的響應(yīng),是啥樣的狀態(tài)(成功,失敗,等其他的情況,以及對(duì)應(yīng)的原因是啥)，總體所有的響應(yīng)如下所示：

404 Not Found：

????????請(qǐng)求中訪問(wèn)的資源,在服務(wù)器上不存在；404 這個(gè)狀態(tài)碼表示的是資源不存在，同時(shí)在 body 中也是可以返回一個(gè)指定的錯(cuò)誤頁(yè)面，很多網(wǎng)站會(huì)把這個(gè)錯(cuò)誤頁(yè)面做的很豐富多彩；

403 Forbidde：

????????表示訪問(wèn)的資源沒(méi)有權(quán)限；

5xx ：

????????表示服務(wù)器出錯(cuò)了 看到這個(gè)說(shuō)明服務(wù)器掛了

特殊的狀態(tài)碼,418：

????????lam a teapot!(杯具），418 狀態(tài)碼是 HTTP RFC 文檔中專(zhuān)門(mén)規(guī)定的一個(gè)狀態(tài)碼表白這個(gè)事情是非常不靠譜的，這個(gè)狀態(tài)碼并沒(méi)有實(shí)際的意義,只是“"開(kāi)個(gè)玩笑”,稱(chēng)為“彩蛋”

????????以上所述,是 HTTP 協(xié)議報(bào)文結(jié)構(gòu)的基本情況.對(duì)于鍵值對(duì)來(lái)說(shuō)-->?HTTP 中存在很多種鍵值對(duì):

1) 、query string

2)、 heade
3) 、cookie
4) 、body

類(lèi)似于：form表單和json格式：
form key1 =value1&key2=value2
json { key1: value1, key2: value2}

4. 客戶端構(gòu)造請(qǐng)求

????????如何讓客戶端構(gòu)造一個(gè) HTTP 請(qǐng)求？

????????瀏覽器：
1、直接在瀏覽器的地址欄 輸入 url, 此時(shí)構(gòu)造了一個(gè) GET 請(qǐng)求
2、?htm| 中,一些特殊的 html 標(biāo)簽, 可能會(huì)觸發(fā) GET 請(qǐng)求.比如像 img, a, link, script ..等

3、通過(guò) form 表單來(lái)觸發(fā) GET / POST 請(qǐng)求

????????form 本質(zhì)也是一個(gè) HTML 標(biāo)簽，寫(xiě)一個(gè)簡(jiǎn)單的 html 代碼,來(lái)編寫(xiě)邏輯；

????????HTML、 CSS、 JS 也是編程語(yǔ)言，他們和C 和 Java 有一個(gè)明顯的差別,這幾個(gè)語(yǔ)言是運(yùn)行在瀏覽器上的，不像 C 需要安裝 VS，也不像 Java 需要安裝JDK，只要有瀏覽器就能運(yùn)行。

在下面的內(nèi)容中，我們使用VSCode來(lái)編寫(xiě)前端代碼；

????????VSCode 中不需要?jiǎng)?chuàng)建項(xiàng)目,只需要打開(kāi)一個(gè)目錄即可,在你想要編輯的目錄中,右鍵打開(kāi)即可；

? ? ? ? 1）、下面來(lái)簡(jiǎn)單介紹一下html的相關(guān)標(biāo)簽

? ? ? ? 2）、直接輸入!<tab>，就會(huì)自動(dòng)生成基本的 htm| 代碼模板 )

????????3）、form 表單如何編寫(xiě).

? ? ? ? 簡(jiǎn)單舉例輸入框的設(shè)置：

? ? ? ? 提交按鈕的設(shè)置：

? ? ? ? 完整的請(qǐng)求構(gòu)造如下所示：

? ? ? ? 請(qǐng)求抓包如下所示：

? ? ? ? 將其改為post請(qǐng)求之后抓包如下所示：

????????對(duì)于 GET 來(lái)說(shuō), 這幾個(gè)鍵值對(duì), 是在 url 中；對(duì)于 POST 來(lái)說(shuō),這幾個(gè)鍵值對(duì),就在 body 中了；

4.、ajax 的方式
? ? ? ? form 有一些缺陷，只支持 GET 和 POST,不支持其他方法，同時(shí)form 會(huì)觸發(fā)頁(yè)面跳轉(zhuǎn),(有的時(shí)候不想跳轉(zhuǎn)）

????????ajax可以通過(guò) js 提供的 api 來(lái)構(gòu)造 http 請(qǐng)求；針對(duì)拿到的響應(yīng),同樣可以使用js 靈活處理,想要怎么處理都行,或者想跳轉(zhuǎn)不跳轉(zhuǎn)也都行.如此給前端代碼,帶來(lái)了更多的可操作空間.故此現(xiàn)在的網(wǎng)站,主體都是通過(guò) ajax 的方式來(lái)進(jìn)行交互的；

????????瀏覽器原生提供了 ajax 的 api, 原生的 api 特別難用.所以一些第三方庫(kù)封裝了 ajax,就準(zhǔn)備使用封裝的版本來(lái)進(jìn)行操作,我們本次所使用的是 jquery 這個(gè)庫(kù)就是封裝的 ajax；

? ? ? ? 使用ajax構(gòu)造http請(qǐng)求的步驟如下所示：

????????1、引入 jquery 庫(kù).(第三方庫(kù),是需要額外下載引入的)

????????前端引入第三方庫(kù)非常容易的.只要代碼中寫(xiě)一個(gè)庫(kù)的地址即可.

????????2、編寫(xiě)代碼

????????

????????$是一個(gè)變量名(全局變量,在jquery 中定義的)，通過(guò)這個(gè)變量來(lái)調(diào)用一些方法來(lái)使用jquery 中的 api；

????????js 中 {}表示對(duì)象，{}里面是使用鍵值對(duì)的方式來(lái)描述 "屬性名" 和"屬性值”的.

? ? ? ? 上圖這里 的success 這個(gè)函數(shù),不是立即執(zhí)行的.而是服務(wù)器返回 200 這樣的響應(yīng)的時(shí)候,才會(huì)執(zhí)行到 success，至于服務(wù)器啥時(shí)候返回 200 是不太確定的，可能是 10ms 之后,也可能是 1s之后,也可能永遠(yuǎn)也不返回.至于啥時(shí)候返回 200 了,啥時(shí)候執(zhí)行 success.主要是因?yàn)閟uccess 執(zhí)行時(shí)機(jī)不是程序員自己能控制的，而是在合適的時(shí)候自動(dòng)被調(diào)用的；

????????像這樣的函數(shù),就是"回調(diào)函數(shù)”；

????????這個(gè)寫(xiě)法就是定義變量，不需要寫(xiě)類(lèi)型 ，不管啥類(lèi)型, 都是 let，變量具體類(lèi)型是根據(jù)= 后面初始化的值的類(lèi)型來(lái)確定的，此處'1'是一個(gè)字符串,所以 value1 變量類(lèi)型也就是字符串了；

????????這個(gè)操作就可以把js 對(duì)象轉(zhuǎn)成json 格式的字符串了；

? ? ? ? 至于更簡(jiǎn)單的構(gòu)造 http 請(qǐng)求的方式，可以直接通過(guò)第三方工具，即圖形化界面構(gòu)造.

5、postman構(gòu)造http請(qǐng)求

? ? ? ? postman布局如下所示：

? ? ? ? ? ?基本頁(yè)面布局即操作：

?ps：本次的學(xué)習(xí)就到這里了，如果大家感興趣的話就請(qǐng)一鍵三連哦！！！