【自分メモ】Web の仕組みについて纏めてみた

あくまで自分用のメモのためコピペ多数
学習時間：２時間

前提知識
HTTP:80
HTTPS:443

HTTPステータスコード
http://www5.plala.or.jp/vaio0630/mail/st_code.htm

■ テキストファイル： 文字を表すデータ(文字コード表に載っているデータだけが書かれているファイル。)
文字コード表：http://ash.jp/code/unitbl21.htm
■ バイナリファイル： それ以外のファイルすべて。

ブラウザでWebページをする際のクライアントとサーバーの挙動は？

HTTPは「HTTPリクエスト」と「HTTPレスポンス」に分けて考えれる。

HTTPリクエスト：ブラウザ⇨サーバー
HTTPレスポンス：サーバー⇨ブラウザ

クライアント側は(49152番 - 65535番)の間で空いているポートを自動で割り当てる。
自動割り当てのタイミングはWebブラウザでタブ・ウィンドウを開いたタイミング（OS依存)

その後、Webサーバ(HTTP:80)に向かってアクセスする。
Webサーバは、IPアドレスとポートを受け取り、どこと通信しているか判別する。

サーバー側はHTTPリクエストを受け取った後にHTTPレスポンスを
クライアント側(IPアドレス：ポート番号)へレスポンスを返す。 

↓この図で気になることはクライアント側に割り当てられたポートの番号が正しいのか？（正しくなくね？！）
![スクリーンショット 2019-10-24 22.50.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/510943/301e67c1-2cee-b8ac-264b-8d3e662b3285.png)


HTTPリクエストについて
HTTPリクエストはブラウザが作る。
サーバーは受け取った情報からどの情報を返すか判断する。

HTTPリクエスト内には３つのパートがある。
・①HTTPリクエスト行
・②HTTPヘッダー
・リクエストボディ

あれ？リクエストボディないじゃん！と思いきやリクエストボディは基本的にGETメソッドではなく、POSTメソッドを使うとのこと。
![スクリーンショット 2019-10-24 23.34.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/510943/785d7dbf-06a4-e739-5527-577f14a4bfb4.png)


①HTTPリクエスト行について
HTTPリクエスト行は常に１行。(メソッド リクエストの対象 HTTPバージョン)

②ヘッダーについて
Host
ドメイン名と任意でサーバーが開いているTCP Port番号を指定することができる。
Port番号を指定しない場合は、デフォルトで決められているPort番号にアクセス。
このヘッダーが実装された理由はバーチャルホストという仕組みが大きく関係しているらしい…

バーチャルホストとは？！
バーチャルホストとは一つのサーバーマシンで複数のウェブサイトを提供する仕組みのこと
https://httpd.apache.org/docs/2.4/ja/vhosts/examples.html
↑バーチャルホストについては今回は深読みしないでおく。。

HTTPヘッダ一覧
http://www.cresc.co.jp/tech/java/Servlet_Tutorial/Att_03.htm
↑これ見ればなんとなくわかるよ！

③メソッドについて
GETメソッドとPOSTメソッドがある。
・GETメソッドについて
HTTP通信で、サーバから情報取得の際に使用する
送信できるデータ量に制限有り　←どれくらい？
ブックマークに保存する場合
テキストデータのみ送信可能(バイナリデータは送信不可)

・POSTメソッドについて
HTTP通信で、サーバへ情報を登録する時に使用する（データベースへの格納など）
データ量が多い場合(GETではデータ送信量に制限があるため)
バイナリデータを送信したい場合
他の人に見られたくないデータを送る場合

⑥User-Agent
リクエストを送信したクライアントのアプリケーションタイプ、OS、ソフトウェアベンダー、ソフトウェアのバージョンを入力することができる。

⑦Accept
クライアントが処理することができるcontent-typeをサーバーに伝えるために使用されています。
ここではcontent-typeとはボディに含まれているデータの種類のことです。
サーバー側でコンテントネゴシエーションと呼ばれる仕組みを用いてクライアントから送信されてきたcontent-typeを基にどのタイプのデータをレスポンスに含むかを決めます。
さらにヘッダーにContent-Typeを含めて、そのデータのContent-Typeを指定します。

⑧Referer
現在リクエストされているページへのリンク先を持った直前のウェブページのアドレスが含まれている。
Referer ヘッダーにより、サーバーは人々がどこから訪問しに来たかを識別することができる。
分析、ログ、キャッシュの最適化などに利用することができます。

⑨Accept-Enconding
クライアントがサポートしている圧縮方式をサーバーに教える。
サーバーは送られてきた Accept-Encoding ヘッダの値を見て、クライアントに合う圧縮アルゴリズムでコンテンツを圧縮して返却してあげれば良い。
通信データを圧縮した方がネットワークを流れるデータ量が減るため、圧縮しましょう！
けど、クライアントとサーバーが共通の圧縮方式を分からないとサーバーから送られてきた圧縮データをクライアントが解凍できないので、クライアントに合う圧縮方式にするからリクエストに書いておけと言うことですね！

⑩Accept-Language
ブラウザが受信可能な言語をサーバに伝える。

・パーセントエンコーディング(URLエンコーディング)
日本語などの文字は、そのままではURLで送信することができない
そのような文字をURLに付与して送信するには、パーセントエンコーディング（URLエンコーディング）という技術を使用する。
URLで扱えない文字を「%xx」（xx:16進数）で表現する
XXの部分は、使用する文字コードによって異なる

パーセントエンコーディングはHTTP通信において以下の箇所で利用される
1. URLのパス
2. クエリストリング（GETパラメータ部分）
3. リクエストボディ（POSTパラメータ）


実際に試してみた！！！！
<img width="475" alt="スクリーンショット 2019-10-25 0.10.02.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/510943/76353fc4-ba8c-9fd5-1101-a1a192db71a0.png">

これのことやん！！
このURLを叩くと以下のサイトに飛ぶ
アドレス欄を見ると（ja.wikipedia.org/wiki/トップドメインレベル）
トップドメインレベルと言う文字がパーセントエンコーディングされてるってことですね！！！(これって一般常識…？)
<img width="750" alt="スクリーンショット 2019-10-25 0.11.38.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/510943/b8466fc4-ff5e-b358-c1e2-e6ab3fc59a2e.png">



後で更新したい内容
POSTメソッドの説明
HTTPレスポンスについての詳細

参考URL:
https://qiita.com/Sekky0905/items/dff3d0da059d6f5bfabf
https://itsakura.com/network-http-get-post#s2
http://www.tohoho-web.com/ex/http.htm#virtualHost