network中的請求信息，headers中的每一項分別是什麼意義?

這裏是修真院前端小課堂，每篇分享文從

【背景介紹】【知識剖析】【常見問題】【解決方案】【編碼實戰】【擴展思考】【更多討論】【參考文獻】

八個方面深度解析前端知識/技能，本篇分享的是：

【network中的請求信息，headers中的每一項分別是什麼意義? 】

1.背景介紹
HTTP（HyperTextTransferProtocol）即超文本傳輸協議，目前網頁傳輸的的通用協議。HTTP協議採用了請求/響應模型，瀏覽器或其餘客戶端發出請求，服務器給與響應。

 

HTTP請求的7個步驟
1.創建TCP連接

2.瀏覽器發送請求（GET/sample/hello.jsp HTTP/1.1）

3.瀏覽器發送請求頭（request header）

4.服務器發送應答（HTTP/1.1 200 OK）

5.服務器發送應答頭（response header）

6.服務器發送數據

7.服務器關閉TCP鏈接

 

用於HTTP協議交互的信息被稱爲HTTP報文，客戶端的HTTP報文叫作請求報文，服務器端的叫作響應報文。HTTP報文自己是由多行數據構成的字符串文本。

 

URI:uniform resource identifier,統一資源標識符。URI是以一種抽象的，高層次概念定義統一資源標識，而URL和URN則是具體的資源標識的方式。URL和URN都是一種URI。

 

2.知識剖析
做爲一個Web開發人員，平常中與咱們開發相關的，就是Chrome的開發者工具。

Network標籤頁對於分析網站請求的網絡狀況、查看某一請求的請求頭和響應頭還有響應內容頗有用，特別是在查看Ajax類請求的時候，很是有幫助。

今天就是要簡要說說Chrome的開發者工具中Network中header部分。

首先咱們打開chrome的開發者工具，選中network，再刷新頁面，此時能夠在下方看到一個Name，Name對應的是資源的名稱及其路徑，Status是請求服務器返回的狀態碼,當狀態碼爲200時，則表示接口配置成功。點擊任一文件名，右側則會出現Header選項。下面讓咱們來詳細看下Header中的各項是什麼意思。

General部分:

Request URL:資源的請求url

Request Method:HTTP方法

Status Code:響應狀態碼
200（狀態碼） OK（緣由短語）
301 - 資源（網頁等）被永久轉移到其它URL
404 -請求的資源（網頁等）不存在

500 - 內部服務器錯誤

比較全的響應狀態碼彙總

Response Headers:

Content-Encoding:gzip ——壓縮編碼類型

Content-Type:text/html ——服務端發送的類型及採用的編碼方式

Date:Tue, 14 Feb 2017 03:38:28 GMT ——客戶端請求服務端的時間

Last-Modified:Fri, 10 Feb 2017 09:46:23 GMT ——服務端對該資源最後修改的時間，GMT是格林尼治標準時間

Server:nginx/1.2.4 ——服務端的Web服務端名

Transfer-Encoding:chunked ——分塊傳遞數據到客戶端

Request Headers:

Accept:text/html ——客戶端能接收的資源類型

Accept-Encoding:gzip, deflate ——客戶端能接收的壓縮數據的類型

Accept-Language:en-US,en;q=0.8 ——客戶端接收的語言類型

Cache-Control:no-cache ——服務端禁止客戶端緩存頁面數據

Connection:keep-alive ——維護客戶端和服務端的鏈接關係

Cookie: ——客戶端暫存服務端的信息

Host:www.jnshu.com ——鏈接的目標主機和端口號

Pragma:no-cache ——服務端禁止客戶端緩存頁面數據

Referer:http://www.jnshu.com/daily/15052 ——來於哪裏

User-Agent: ——客戶端版本號的名字

 

數據回發到服務器時瀏覽器使用的編碼類型。 下邊是說明： application/x-www-form-urlencoded： 窗體數據被編碼爲名稱/值對，這是標準的編碼格式。 multipart/form-data： 窗體數據被編碼爲一條消息一般上傳圖片等文件會使用這種編碼格式提交。

application/json，提交JSON格式的數據-->

3.常見問題：
 

使用post發送請求時如何設置content-type的值？

4.解決方案

1. application/x-www-form-urlencoded  最多見的POST提交格式，使用這個編碼格式post的數據會以鍵值對的方式提交

 

1. multipart/form-data  一般上傳圖片等文件會使用這種編碼格式提交。

 

1. application/json    提交JSON格式的數據

5.編碼實戰
此知識點暫無編碼，主要在於學會查看network中的信息。

6.擴展思考
HTTP的缺點
通信使用明文（不加密），內容可能會被監聽；

不驗證通信方的身份，所以有可能遭遇假裝；

沒法證實白報文的完整性，因此有可能已被篡改；

解決方法：使用HTTPS
HTTP + 加密 + 認證 + 完整性保護 = HTTPS

7.參考文獻
參考一：http中請求頭和響應頭

參考二：content-type說明

參考三：HTTP header

8.更多討論
1.爲何更安全的 HTTPS 協議沒有在互聯網上全面採用？
由於沒錢

爲啥沒錢

2.Timeline 時間軸中的不一樣顏色的線表明什麼意思？
Timeline工具裏面使用是4種顏色來表示不一樣類別的事件:

藍色：加載；

黃色：腳本；

紫色：渲染；

綠色：繪製；

谷歌瀏覽器Timeline用法詳解

學員問答：

1.http請求的工做方式；

首先客戶端和服務器經過3次握手創建TCP鏈接，鏈接正常後客戶端按照服務器的要求發送固定格式的請求信息，服務器判斷客戶端下發的數據是否正常，正常後會對應回覆客戶端請求的數據；客戶端收到數據進行處理便可；

2.400狀態碼的含義？

400 Bad Request 客戶端請求的語法錯誤，服務器沒法理解；

發送數據格式不對，請求方式不對都會出現400 的錯誤；

3.請求成功後，timeline顯示的什麼意思？

表明文件加載所耗用的時間，能夠查看具體那個文件加載的時間過長，能夠對應進行優化；

對於angular框架而言，能夠減小數據的雙向綁定來減小網頁加載時間，通常值須要對input框進行雙向綁定，其餘的儘可能用單行綁定，減小網頁加載的時間；

4.接口怎麼定義？

客戶端給服務端發送請求的時候，須要按照後端定好的接口文檔，對應發數據的；

接口文檔是由後端來肯定的，裏面有不一樣請求對應的不一樣的接口和數據格式，以及請求方式；

因此必定要注意查看接口文檔，客戶端請求失敗的好多緣由都是接口文檔沒看清楚致使的請求失敗；

5.http錯誤信息怎麼顯示，nginx怎麼配跨域？

請求發送後，客戶端須要判斷服務器回覆的信息；若是都正常，客戶端對應進行下面的操做，若是錯誤，判斷錯誤信息，直接將服務器回覆的錯誤信息展現，也能夠自定義錯誤信息；

nginx的跨域問題：服務器若是跟客戶端不在一個局域網，須要配置nginx跨域，服務器會給出跨域的配置方式，按照要求將本地的nginx配置文件配置好便可；

6.什麼是3次握手，爲何tcp鏈接須要進行3次握手？

第一次握手：客戶端向服務器發送信息，肯定跟服務器是否能鏈接上；

第二次握手：服務器回覆客戶端發送的信息，告知客戶端，能夠收到客戶端下發的信息，表明客戶端和服務器的鏈路正常；

第三次握手：客戶端收到服務器回覆的信息後，回覆服務器，已經收到信息，確保服務器跟客戶端的鏈路正常，客戶端能夠向服務器下發請求了；

做用：1.爲了防止已失效的鏈接請求報文段忽然又傳送到了服務端，於是產生錯誤；

2.確保服務器和客戶端的鏈路正常，以便於進行正常通信；