# HTTP請(qǐng)求
在`ng s`下啟動(dòng)系統(tǒng)，并用Firefox瀏覽器打開(kāi)http://localhost:4200。查看控制臺(tái)中的網(wǎng)絡(luò)選項(xiàng)卡，然后刷新界面，點(diǎn)擊如下記錄：
在彈出的網(wǎng)絡(luò)請(qǐng)求詳情中將查看到如下數(shù)據(jù)：
上圖中標(biāo)明了一個(gè)http請(qǐng)求的4個(gè)要素：請(qǐng)求方法method、請(qǐng)求地址url、請(qǐng)求頭header、請(qǐng)求主體body。在發(fā)起的get請(qǐng)求中，請(qǐng)求主體為空：
同時(shí)有請(qǐng)求就必然有響應(yīng)，http請(qǐng)求對(duì)應(yīng)的響應(yīng)有兩部分組成：響應(yīng)頭header以及響應(yīng)主體body。
在響應(yīng)主體為返回了兩個(gè)教師數(shù)據(jù)：
接下來(lái)，我們?cè)敿?xì)的解讀一下web開(kāi)發(fā)的基礎(chǔ) ---- http協(xié)議。
## Http
當(dāng)前訪問(wèn)網(wǎng)頁(yè)，大多數(shù)是以https打頭的網(wǎng)址，比如https://www.baidu.com，https://www.jd.com，https是在http的基礎(chǔ)上增加了安全機(jī)制，它使得http傳輸更加的安全。在此我們僅討論做為https基本的http。在網(wǎng)絡(luò)中，有很多以`P`結(jié)尾的專(zhuān)有名詞，比如`TCP`、`DHCP`等，這里的`P`代表`protocol`，即協(xié)議。http的全稱(chēng)為：HyperText Transfer Protocol ，即常說(shuō)的超文本傳輸協(xié)議。
所謂的協(xié)議其實(shí)是一種規(guī)范，比如我們可以把現(xiàn)實(shí)生活中的靠右行駛的交通規(guī)則稱(chēng)為協(xié)議，也可以將紅燈停綠燈停稱(chēng)為一種協(xié)議。
HTTP是一種能夠獲取如 HTML 這樣的網(wǎng)絡(luò)資源的** [protocol](https://developer.mozilla.org/en-US/docs/Glossary/Protocol)(通訊協(xié)議)。**它是在 Web 上進(jìn)行數(shù)據(jù)交換的基礎(chǔ)，是一種 client-server 協(xié)議，也就是說(shuō)，請(qǐng)求通常是由像瀏覽器這樣的接受方發(fā)起的。一個(gè)完整的Web文檔通常是由不同的子文檔拼接而成的，像是文本、布局描述、圖片、視頻、腳本等等。
當(dāng)客戶(hù)端想要和服務(wù)端進(jìn)行信息交互時(shí)，過(guò)程表現(xiàn)為下面幾步：
1. 打開(kāi)一個(gè)TCP連接：TCP連接被用來(lái)發(fā)送一條或多條請(qǐng)求，以及接受響應(yīng)消息。客戶(hù)端可能打開(kāi)一條新的連接，或重用一個(gè)已經(jīng)存在的連接，或者也可能開(kāi)幾個(gè)新的TCP連接連向服務(wù)端。
2. 發(fā)送一個(gè)HTTP**報(bào)文**：HTTP報(bào)文（在HTTP/2之前）是語(yǔ)義可讀的。
3. 讀取服務(wù)端返回的**報(bào)文**信息：
4. 關(guān)閉連接或者為后續(xù)請(qǐng)求重用連接。
### Http報(bào)文
請(qǐng)求與響應(yīng)的報(bào)文格式有所不同：
> 報(bào)文可以簡(jiǎn)單理解為數(shù)據(jù)包、或數(shù)據(jù)。
請(qǐng)求由以下元素組成：
- 請(qǐng)求方法，比如：get、post、put等。
- 要獲取的資源的路徑。
- HTTP協(xié)議版本號(hào)。
- 為服務(wù)端表達(dá)其他信息的可選頭部[headers](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers)。
- 對(duì)于一些像POST這樣的方法，報(bào)文的body就包含了發(fā)送的資源，這與響應(yīng)報(bào)文的body類(lèi)似。
響應(yīng)報(bào)文包含了下面的元素：
- HTTP協(xié)議版本號(hào)。
- 一個(gè)狀態(tài)碼（[status code](https://developer.mozilla.org/en-US/docs/Web/HTTP/Status)），來(lái)告知對(duì)應(yīng)請(qǐng)求執(zhí)行成功或失敗，以及失敗的原因。
- 一個(gè)狀態(tài)信息（可選），這個(gè)信息是非權(quán)威的狀態(tài)碼描述信息，可以由服務(wù)端自行設(shè)定。
- HTTP [headers](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers)，與請(qǐng)求頭部類(lèi)似。
- 可選項(xiàng)，比起請(qǐng)求報(bào)文，響應(yīng)報(bào)文中更常見(jiàn)地包含獲取的資源body（在firefox中，將響應(yīng)報(bào)文以**響應(yīng)**的形式查看，實(shí)際上響應(yīng)的body數(shù)據(jù)緊跟header數(shù)據(jù)之后）。
綜上，一個(gè)標(biāo)準(zhǔn)的http請(qǐng)求大概是這樣的：
## Header
以請(qǐng)求教師列表為例，我們?cè)趦H僅使用了以下代碼：
```typescript
this.httpClient.get(url)
.subscribe();
```
在此過(guò)程中并未設(shè)置haeader信息，那么瀏覽器中顯示的header信息又具體是由誰(shuí)生成的呢？具體來(lái)說(shuō)，headers信息的生成是由httpClient以及瀏覽器組合生成的。
```
GET???? /teacher???? HTTP/1.1??
Host: angular.api.codedemo.club:81????
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:86.0) Gecko/20100101 ??Firefox/86.0??
Accept: application/json, text/plain, */*
Accept-Language: zh-CN,zh;q=0.8,zh-TW;q=0.7,zh-HK;q=0.5,en-US;q=0.3,en;q=0.2
Accept-Encoding: gzip, deflate
Origin: http://localhost:4200
Connection: keep-alive
Referer: http://localhost:4200/
Cache-Control: max-age=0
```
比如：
- 以????標(biāo)注的信息是由httpClient決定的
- 以??標(biāo)注的信息則是由firefox來(lái)決定的
我們使用chrome打開(kāi)同樣的地址，查看相應(yīng)的請(qǐng)求信息如下：
```
GET /teacher HTTP/1.1
Host: angular.api.codedemo.club:81
Proxy-Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache
Accept: application/json, text/plain, */*
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.192 Safari/537.36
Origin: http://localhost:4200
Referer: http://localhost:4200/
Accept-Encoding: gzip, deflate
Accept-Language: en-GB,en;q=0.9,zh-CN;q=0.8,zh;q=0.7
```
可見(jiàn)，同樣是向http://angular.api.codedemo.club:81/teacher發(fā)起一個(gè)http請(qǐng)求，firefox及chrome向后臺(tái)發(fā)起的請(qǐng)求報(bào)文并不相同。但可以確定的是，兩者均遵循了http協(xié)議，都是有效的http請(qǐng)求報(bào)文。
## 本節(jié)作業(yè)
1. 當(dāng)發(fā)請(qǐng)教師新增操作時(shí)，請(qǐng)求的主體內(nèi)容為請(qǐng)求的教師數(shù)據(jù)。我們來(lái)到新增教師界面，并嘗試一個(gè)教師，觀察會(huì)發(fā)起什么樣的網(wǎng)絡(luò)請(qǐng)求，觀察該請(qǐng)求的請(qǐng)求方法、請(qǐng)求地址、請(qǐng)求頭、請(qǐng)求主體、響應(yīng)頭以及響應(yīng)主體。
2. 觀察firefox以及chrome的響應(yīng)報(bào)文，并對(duì)其進(jìn)行比較。
3. 當(dāng)我們?cè)L問(wèn)某些站點(diǎn)時(shí)，會(huì)提醒我們?yōu)g覽器或?yàn)g覽器版本不兼容，你能猜到這些站點(diǎn)是如何獲取到我們的瀏覽器及版本信息嗎？
4. 如果你使用的是windows操作系統(tǒng) ，請(qǐng)查看edge或ie瀏覽器請(qǐng)求http://angular.api.codedemo.club:81/teacher的請(qǐng)求報(bào)文。
5. 如果使用的是macos操作系統(tǒng)，請(qǐng)查看Safari瀏覽器的請(qǐng)求報(bào)文。
| 名稱(chēng) | 地址 | 備注 |
| -------- | ------------------------------------------------------------ | ---- |
| HTTP概述 | [https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Overview](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Overview) | |
- 序言
- 第一章 Hello World
- 1.1 環(huán)境安裝
- 1.2 Hello Angular
- 1.3 Hello World!
- 第二章 教師管理
- 2.1 教師列表
- 2.1.1 初始化原型
- 2.1.2 組件生命周期之初始化
- 2.1.3 ngFor
- 2.1.4 ngIf、ngTemplate
- 2.1.5 引用 Bootstrap
- 2.2 請(qǐng)求后臺(tái)數(shù)據(jù)
- 2.2.1 HttpClient
- 2.2.2 請(qǐng)求數(shù)據(jù)
- 2.2.3 模塊與依賴(lài)注入
- 2.2.4 異步與回調(diào)函數(shù)
- 2.2.5 集成測(cè)試
- 2.2.6 本章小節(jié)
- 2.3 新增教師
- 2.3.1 組件初始化
- 2.3.2 [(ngModel)]
- 2.3.3 對(duì)接后臺(tái)
- 2.3.4 路由
- 2.4 編輯教師
- 2.4.1 組件初始化
- 2.4.2 獲取路由參數(shù)
- 2.4.3 插值與模板表達(dá)式
- 2.4.4 初識(shí)泛型
- 2.4.5 更新教師
- 2.4.6 測(cè)試中的路由
- 2.5 刪除教師
- 2.6 收尾工作
- 2.6.1 RouterLink
- 2.6.2 fontawesome圖標(biāo)庫(kù)
- 2.6.3 firefox
- 2.7 總結(jié)
- 第三章 用戶(hù)登錄
- 3.1 初識(shí)單元測(cè)試
- 3.2 http概述
- 3.3 Basic access authentication
- 3.4 著陸組件
- 3.5 @Output
- 3.6 TypeScript 類(lèi)
- 3.7 瀏覽器緩存
- 3.8 總結(jié)
- 第四章 個(gè)人中心
- 4.1 原型
- 4.2 管道
- 4.3 對(duì)接后臺(tái)
- 4.4 x-auth-token認(rèn)證
- 4.5 攔截器
- 4.6 小結(jié)
- 第五章 系統(tǒng)菜單
- 5.1 延遲及測(cè)試
- 5.2 手動(dòng)創(chuàng)建組件
- 5.3 隱藏測(cè)試信息
- 5.4 規(guī)劃路由
- 5.5 定義菜單
- 5.6 注銷(xiāo)
- 5.7 小結(jié)
- 第六章 班級(jí)管理
- 6.1 新增班級(jí)
- 6.1.1 組件初始化
- 6.1.2 MockApi 新建班級(jí)
- 6.1.3 ApiInterceptor
- 6.1.4 數(shù)據(jù)驗(yàn)證
- 6.1.5 教師選擇列表
- 6.1.6 MockApi 教師列表
- 6.1.7 代碼重構(gòu)
- 6.1.8 小結(jié)
- 6.2 教師列表組件
- 6.2.1 初始化
- 6.2.2 響應(yīng)式表單
- 6.2.3 getTestScheduler()
- 6.2.4 應(yīng)用組件
- 6.2.5 小結(jié)
- 6.3 班級(jí)列表
- 6.3.1 原型設(shè)計(jì)
- 6.3.2 初始化分頁(yè)
- 6.3.3 MockApi
- 6.3.4 靜態(tài)分頁(yè)
- 6.3.5 動(dòng)態(tài)分頁(yè)
- 6.3.6 @Input()
- 6.4 編輯班級(jí)
- 6.4.1 測(cè)試模塊
- 6.4.2 響應(yīng)式表單驗(yàn)證
- 6.4.3 @Input()
- 6.4.4 FormGroup
- 6.4.5 自定義FormControl
- 6.4.6 代碼重構(gòu)
- 6.4.7 小結(jié)
- 6.5 刪除班級(jí)
- 6.6 集成測(cè)試
- 6.6.1 惰性加載
- 6.6.2 API攔截器
- 6.6.3 路由與跳轉(zhuǎn)
- 6.6.4 ngStyle
- 6.7 初識(shí)Service
- 6.7.1 catchError
- 6.7.2 單例服務(wù)
- 6.7.3 單元測(cè)試
- 6.8 小結(jié)
- 第七章 學(xué)生管理
- 7.1 班級(jí)列表組件
- 7.2 新增學(xué)生
- 7.2.1 exports
- 7.2.2 自定義驗(yàn)證器
- 7.2.3 異步驗(yàn)證器
- 7.2.4 再識(shí)DI
- 7.2.5 屬性型指令
- 7.2.6 完成功能
- 7.2.7 小結(jié)
- 7.3 單元測(cè)試進(jìn)階
- 7.4 學(xué)生列表
- 7.4.1 JSON對(duì)象與對(duì)象
- 7.4.2 單元測(cè)試
- 7.4.3 分頁(yè)模塊
- 7.4.4 子組件測(cè)試
- 7.4.5 重構(gòu)分頁(yè)
- 7.5 刪除學(xué)生
- 7.5.1 第三方dialog
- 7.5.2 批量刪除
- 7.5.3 面向?qū)ο?/a>
- 7.6 集成測(cè)試
- 7.7 編輯學(xué)生
- 7.7.1 初始化
- 7.7.2 自定義provider
- 7.7.3 更新學(xué)生
- 7.7.4 集成測(cè)試
- 7.7.5 可訂閱的路由參數(shù)
- 7.7.6 小結(jié)
- 7.8 總結(jié)
- 第八章 其它
- 8.1 打包構(gòu)建
- 8.2 發(fā)布部署
- 第九章 總結(jié)