如何監視瀏覽器的 HTTP 請求和回應

在本文中，您將

• 了解如何監視您的 Web 瀏覽器的 HTTP 請求和回應
• 開始了解為什麼瀏覽器會傳送HTTP請求頭，以及為什麼網路伺服器會傳送HTTP回應頭。

你需要什麼

• Google Chrome 的開發者工具
• 或者，如果您能弄清楚如何使用其他瀏覽器的開發工具，您也可以使用其他瀏覽器。

HTTP協定根本不是什麼秘密，監視你的瀏覽器也超級容易。

你的瀏覽器和遠端伺服器之間的互動是否讓你覺得像某種神秘的魔法？別以為HTTP請求和回應就像某種只有瀏覽器廠商和網站經營者才知道和看到的秘密握手： 並非如此。 假設您使用的是Google瀏覽器，請執行以下操作：

1. 開啟新視窗或標籤頁
2. 命中的 F12 按下快速鍵開啟GoogleChrome開發者工具，然後點選 Network 選項卡
3. 在新視窗中載入谷歌。您可以研究用於取得 Google.com 首頁的 HTTP 請求的內部結構。

請注意 請求方法 以及  請求頭 部分

正如你所看到的， 請求方法 is GET下面還有一大袋… 請求頭。 我們現在只重點介紹主要的請求頭。 HTTP 請求頭將在我們開始學習如何向伺服器發送資料時發揮作用。 Digital.ai Agility以前稱為 VersionOne，REST API，因為我們需要指定一些「自訂標頭」。

HTTP 標頭提供更多信息，以幫助伺服器正確回應。

您的瀏覽器會在 HTTP 請求中傳送 HTTP 標頭，以便向伺服器提供處理請求所需的額外資訊。實際上，最相關的標頭是： 接受 標題和 Cookie 第一，Accept 標頭告訴伺服器瀏覽器希望以何種格式接收回應，而 cookie 實際上是一個唯一識別值，我的瀏覽器之前從 Google 取得了這個值。我的瀏覽器會在後續請求中將 cookie 傳送回 Google，以便 Google 將不同的請求與我關聯起來。

現在，向下捲動窗格即可看到 回應頭 部分

類似地，回應也包含頭部訊息。 內容/類型 這裡最重要的就是標題，你會注意到這一點。 text / html的 對應於發起 HTTP 請求所包含的值之一 接受 頭部資訊。稍後當我們使用 JavaScript 建立請求時，這一點會很重要。 Digital.ai Agility 休息 API。

在操作欄點擊 響應 選項卡

你還記得上一篇文章中萬維網之父提姆·伯納斯/李在最初設計HTTP GET方法時所說的話嗎？他說：

伺服器傳回的回應始終是一個 HTML 頁面。

即使回覆頂部寫著 大部分回應都包含 JavaScript 程式碼，而且是看起來非常奇怪的 JavaScript 程式碼。這被稱為 縮小的 JavaScript。開發者會壓縮腳本以減少回應的大小。但是，這無疑會使程式碼更難理解！

現在，我們來看看 HTTP POST 請求。

假設您仍然打開著另一個瀏覽器或標籤頁，而開發者工具觸手可及：

1. 請瀏覽 http://www.pastebin.com
2. 輸入一些內容 新糊狀物 填寫表單，向下捲動並點擊 提交

POST 請求和回應要點

以下是您可以在開發者工具視窗中看到的請求和回應的一些亮點：

請求頭

請求 URL：http://pastebin.com/post.php 請求方法：POST

請求負載

有效負載中包含的值對應於 HTML 表單欄位的值。 HTML 表單元素的原始碼如下所示：

如果你也跟我一樣，輸入了 Digital.ai Agility 是我最喜歡的敏捷管理工具！ 到 新糊狀物 字段（名為） 貼上程式碼 如果在 HTML 中），則您的有效負載應類似於這樣：

//////WebKitFormBoundaryM0FtBA3eFtIeoTma Content/Disposition: form/data; name="post_key" KgvURkjA //////WebKitFormBoundaryM0FtBA3eFtIeoTma Content/Disposition:Content/dataat; //////WebKitFormBoundaryM0FtBA3eFtIeoTma Content/Disposition: form/data; name="paste_code"

Digital.ai Agility 是我最喜歡的敏捷管理工具！

回應頭

同樣，就像我們從 Google.com 收到的 GET 請求回應中看到的那樣， 內容/類型 頭部是 text/xml，但新的 看板地點 標頭指定瀏覽器應自動導航到何處以取得回應性文檔，因為如果您查看回應選項卡，會發現它是空的。這是一種稱為「頭部訊息傳遞」的優秀設計模式。 POST/重定向/獲取 這種模式，我們將在後續文章中了解更多相關資訊。