# HTTP請求 在`ng s`下啟動系統，并用Firefox瀏覽器打開http://localhost:4200。查看控制臺中的網絡選項卡，然后刷新界面，點擊如下記錄：  在彈出的網絡請求詳情中將查看到如下數據：  上圖中標明了一個http請求的4個要素：請求方法method、請求地址url、請求頭header、請求主體body。在發起的get請求中，請求主體為空：  同時有請求就必然有響應，http請求對應的響應有兩部分組成：響應頭header以及響應主體body。  在響應主體為返回了兩個教師數據：  接下來，我們詳細的解讀一下web開發的基礎 ---- http協議。 ## Http 當前訪問網頁，大多數是以https打頭的網址，比如https://www.baidu.com，https://www.jd.com，https是在http的基礎上增加了安全機制，它使得http傳輸更加的安全。在此我們僅討論做為https基本的http。在網絡中，有很多以`P`結尾的專有名詞，比如`TCP`、`DHCP`等，這里的`P`代表`protocol`，即協議。http的全稱為：HyperText Transfer Protocol ，即常說的超文本傳輸協議。 所謂的協議其實是一種規范，比如我們可以把現實生活中的靠右行駛的交通規則稱為協議，也可以將紅燈停綠燈停稱為一種協議。 HTTP是一種能夠獲取如 HTML 這樣的網絡資源的** [protocol](https://developer.mozilla.org/en-US/docs/Glossary/Protocol)(通訊協議)。**它是在 Web 上進行數據交換的基礎，是一種 client-server 協議，也就是說，請求通常是由像瀏覽器這樣的接受方發起的。一個完整的Web文檔通常是由不同的子文檔拼接而成的，像是文本、布局描述、圖片、視頻、腳本等等。 當客戶端想要和服務端進行信息交互時，過程表現為下面幾步： 1. 打開一個TCP連接：TCP連接被用來發送一條或多條請求，以及接受響應消息。客戶端可能打開一條新的連接，或重用一個已經存在的連接，或者也可能開幾個新的TCP連接連向服務端。 2. 發送一個HTTP**報文**：HTTP報文（在HTTP/2之前）是語義可讀的。  3. 讀取服務端返回的**報文**信息：  4. 關閉連接或者為后續請求重用連接。 ### Http報文 請求與響應的報文格式有所不同： > 報文可以簡單理解為數據包、或數據。  請求由以下元素組成： - 請求方法，比如：get、post、put等。 - 要獲取的資源的路徑。 - HTTP協議版本號。 - 為服務端表達其他信息的可選頭部[headers](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers)。 - 對于一些像POST這樣的方法，報文的body就包含了發送的資源，這與響應報文的body類似。  響應報文包含了下面的元素： - HTTP協議版本號。 - 一個狀態碼（[status code](https://developer.mozilla.org/en-US/docs/Web/HTTP/Status)），來告知對應請求執行成功或失敗，以及失敗的原因。 - 一個狀態信息（可選），這個信息是非權威的狀態碼描述信息，可以由服務端自行設定。 - HTTP [headers](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers)，與請求頭部類似。 - 可選項，比起請求報文，響應報文中更常見地包含獲取的資源body（在firefox中，將響應報文以**響應**的形式查看，實際上響應的body數據緊跟header數據之后）。 綜上，一個標準的http請求大概是這樣的：  ## Header 以請求教師列表為例，我們在僅僅使用了以下代碼： ```typescript this.httpClient.get(url) .subscribe(); ``` 在此過程中并未設置haeader信息，那么瀏覽器中顯示的header信息又具體是由誰生成的呢？具體來說，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 ``` 比如： - 以????標注的信息是由httpClient決定的 - 以??標注的信息則是由firefox來決定的 我們使用chrome打開同樣的地址，查看相應的請求信息如下： ``` 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 ``` 可見，同樣是向http://angular.api.codedemo.club:81/teacher發起一個http請求，firefox及chrome向后臺發起的請求報文并不相同。但可以確定的是，兩者均遵循了http協議，都是有效的http請求報文。 ## 本節作業 1. 當發請教師新增操作時，請求的主體內容為請求的教師數據。我們來到新增教師界面，并嘗試一個教師，觀察會發起什么樣的網絡請求，觀察該請求的請求方法、請求地址、請求頭、請求主體、響應頭以及響應主體。 2. 觀察firefox以及chrome的響應報文，并對其進行比較。 3. 當我們訪問某些站點時，會提醒我們瀏覽器或瀏覽器版本不兼容，你能猜到這些站點是如何獲取到我們的瀏覽器及版本信息嗎？ 4. 如果你使用的是windows操作系統 ，請查看edge或ie瀏覽器請求http://angular.api.codedemo.club:81/teacher的請求報文。 5. 如果使用的是macos操作系統，請查看Safari瀏覽器的請求報文。 | 名稱 | 地址 | 備注 | | -------- | ------------------------------------------------------------ | ---- | | HTTP概述 | [https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Overview](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Overview) | |