【イラスト図解式 この一冊で全部わかる Web技術の基本】 「3-2.HTTPリクエストとHTTPレスポンス」を読んで
【イラスト図解式 この一冊で全部わかる Web技術の基本】
「3-2.HTTPリクエストとHTTPレスポンス」を読んで
「イラスト図解式 この一冊で全部わかる Web技術の基本」の第3章2節についての要点、自分なりの知識の整理の2点を述べていきます。
1.要点
HTTPにおけるやりとりにはHTTPリクエストとHTTPレスポンスがある
HTTPリクエストの構成
リクエスト行、メッセージヘッダー、メッセージボディ
HTTPレスポンスの構成
ステータス行、メッセージヘッダー、メッセージボディ
2.知識の整理
構成がざっくりわかりましたが、具体的にそれぞれで何が行われているかはまだわかりません。
これを知ることでより理解が深まると考えたので、まとめていきます。
- HTTPリクエスト、HTTPレスポンスの復習
構成はざっくりわかりましたが、具体的にそれぞれで何が行われているかはまだわかりません。
これを知ることでより理解が深まると考えたのでまとめていきます。
Webサイトを閲覧するためには、まずこの工程が必要でしたね。
ブラウザからWebサーバーに送られるのはHTTPリクエスト（要求）、
Webサーバーからブラウザに送られるのはHTTPレスポンス（応答）と言います。
- HTTPリクエスト、HTTPレスポンスでは何が行われている？
【HTTPリクエストのメッセージ（ブラウザ→Webサーバー）】
○リクエスト行（画像の「POST / HTTP/1.1」と書いてあるところ）
Webサーバーに対してどんな処理を依頼するかの記述
1.「POST」...「メソッド」Webサーバーに対する要求
（POSTなので、データをWebサーバーへ送信するという意味）
2.「HTTP/1.1」...「バージョン」HTTPのバージョン
※1と2の間にパス名 （リクエスト対象のデータ、URLなど）が入ることもある
○メッセージヘッダー（画像のRequest headers、General headers、Entity headersの部分）
ブラウザの種類、対応するデータの種類、データ圧縮方法、言語などの情報の記述
1.Request headers
指定するとリクエストを変更するもの (Accept-languageなど)、状況を示すもの、条件を与えるもの
2.General headers
メッセージ全体に適用されるもの
3.Entity headers
リクエスト本体に適用されるもの
○空白行
メッセージヘッダーの終わり
○メッセージボディ（画像の「-12656974」と書いてあるところ）
Webサーバーにデータを送るためのもの
【HTTPレスポンスのメッセージ（Webサーバー→ブラウザ）】
○ステータス行（画像の「HTTP/1.1 200 OK」と書いてあるところ）
Webサーバーがブラウザに処理結果を伝える
1.「HTTP/1.1」...「バージョン」HTTPのバージョン
2.「200」...「ステータスコード」リクエストの成功失敗を伝える数字
（200なので、表示成功。代表的なのは、一時的に転送の302、表示失敗の404）
3.「OK」...「テキストフレーズ」ステータスコードの内容をテキスト化したもの
○メッセージヘッダー（画像のResponse headers、General headers、Entity headersの部分）
Webサーバーのソフトウェア情報、返信するデータの種類、データ圧縮方法などの情報の記述
1.Response headers
ステータス行で伝えられないサーバーの追加情報
2.General headers
メッセージ全体に適用されるもの
3.Entity headers
レスポンス本体に適用されるもの
○空白行
メッセージヘッダーの終わり
○メッセージボディ（画像の「-12656974」と書いているところ）
HTMLや画像などのデータを格納する場所
表示されるまでには、このような情報がやりとりされていることがわかりました。
細かく分解していくと、少しずつ解像度が上がってきて、少しずつわかってきたような？気が？します。
おまけ
デベロッパーツールでもHTTPリクエストとHTTPレスポンスが見られる！
調べていくうちにわかったのですが、ブラウザのデベロッパーツールでこの一連のやりとりが見られるんです！（すごい）
Chrome...バージョン: 91.0.4472.114（Official Build） （x86_64）
オペレーティングシステム...mac Big Sur バージョン11.2.3
デベロッパーツールを開いたら、
①「Network」タブをクリック
②Webページ内のリンクに飛ぶと出てくる「Name」タブのデータの行をクリック
③「Headers」タブが表示され、以下の画像のような表示
これで細かくどんなやりとりがされているかわかります！
普段Webページ作成で使っているデベロッパーツールでもやりとりが見られるとは知らなかったです！
また新しいことを一つ知れました！
明日はHTTPメソッドについてまとめます。
ご意見やご指摘、感想などコメントでお待ちしています！
最後まで読んでいただき、ありがとうございました！
【出典】
イラスト図解式 この一冊で全部わかるWeb技術の基本
HTTP メッセージ
閲覧しているウェブページで利用されている HTTP のバージョンを確認する方法
