WEBサイトってどういう仕組みで見られるの？
こんにちは。ネットワーク初心者です。
ネットワークについて苦手意識があったけど、一般的な知識くらいは身につけておかねばと思ったので本読んで少しだけ知識つきましたという記事。
まずはHTTP編。
目次
- 参考にした本
- WEBサイトの仕組み
- HTTPって何？
1.参考にした本
本屋でたまたま見つけて、パラパラ見てたら図を中心に話が展開されていて、
「図がいっぱいある。。。これはいける」と小学生並みの直感を信じて速攻でレジに持って行きました。
- 作者: リブロワークス
- 出版社/メーカー: SBクリエイティブ
- 発売日: 2014/07/28
- メディア: 大型本
- この商品を含むブログ (1件) を見る
2.WEBサイトの仕組み
エッチなサイトを中心とするWEBサイトをどのような仕組みで僕たちは見られるのか。
一般的にエッチなサイトを見るときこんな手順で見ますよね？
①ブラウザを起動(chromeやIE、safariなど)
②google先生やyahoo先生を使って、検索するところに「エッチなサイト」って入力してすごい勢いでEnter
③「エッチなサイト」の検索に引っかかったWEBサイトの一覧が表示される
④一覧から自分が見たいエッチなサイトをクリックする
手順は分かった！！じゃあなんで僕たちはブラウザでエッチなサイトを見ることができるんだ！？
見たいエッチなサイトをクリックしてから画面が表示されるまでの仕組みはおおよそこういう感じ。
①ブラウザはWEBサーバに「このエッチなサイト見せてくれ！お願いします。お願いします。」という要求を必死に出す
②要求を受け取ったWEBサーバは「よしよし。お前はこのエッチなサイトが見たいのじゃな。」と要求されたHTMLファイルやJavaScriptファイル、CSSファイルなどを自分のハードディスクから探し出す
③探し出したファイルを「今からそっちに送るぞ！」と言って要求が来たブラウザに送る
④WEBサーバから送られてきたファイルをブラウザが整理してエッチなサイトの画面を表示する
⑤僕たちの目にエッチなサイトが飛び込んでくる(歓喜)
3.HTTPって何？
エッチなサイトが僕たちの目に飛び込んでくる(歓喜)仕組みは分かったけど、HTTPってのは何？
HTTPとはHyperText Transfer Protocolと呼ばれ、僕たちがWEBサイトを見るための大事な役割を担ってくれる技術で、
日本語に訳すと、「HTML(HyperText Markup Language)を通信するための規約」となる。
って言われてもよく分からんので、
2章の①~⑤で具体的に何が行われているかを見てみる。
①ブラウザはWEBサーバに「このエッチなサイト見せてくれ！お願いします。お願いします。」という要求を必死に出す
これはブラウザがHTTPリクエストと呼ばれる入れ物に、見たいサイトの情報を入れてWEBサーバに飛ばしている。
情報には以下が含まれている。
・GET/POST
・HTMLファイルが格納されているディレクトリ(フォルダ)名とそのHTMLファイル名
・サーバを特定する名前(ホスト名+ドメイン名)
・ブラウザ情報
例）見たいサイトのURLが「http://www.example.com/example/index.html」の場合
・GET
・/example/index.html
・www.example.com
・User-Agent: Chrome/34.0.1847.137 Safari/537.36(他にもいろんな情報があります。)
となる。ブラウザ情報についてはよく分かんないので、また調べておきます。
※GET/POST
データをWEBサーバに送るときの方式で、
GET:URLに情報をくっつけて送る
POST:URLはそのままで情報を送る
詳しくは「GET POST 違い」で検索すれば山ほどサイトが出てくるのでそこで確認を。
②要求を受け取ったWEBサーバは「よしよし。お前はこのエッチなサイトが見たいのじゃな。」と要求されたHTMLファイルやJavaScriptファイル、CSSファイルなどを自分のハードディスクから探し出す
ブラウザから送られてきたHTTPリクエストの情報を基に該当するファイルをハードディスクから探し出す作業をしている。
①で例にあげたHTTPリクエストから送られてきたとすると、
exampleフォルダのindex.htmlを探している。
③探し出したファイルを「今からそっちに送るぞ！」と言って要求が来たブラウザに送る
HTTPレスポンスと呼ばれる入れ物に、探し出した情報を入れてブラウザに送っている。
以下の情報が含まれている。
・ステータス番号
・HTMLファイルの更新日やファイルサイズなど
・HTMLファイルの中身
例）
・200
・Last-Modified: Sat, 05 Sep 2016 23:00
・<!DOCTYPE html>
・
・
・
「200」はリクエストが成功したので要求されたどおりのファイルを返すよ！って意味で、他にも「404」(指定されたファイルが見つからない)などがある。
④WEBサーバから送られてきたファイルをブラウザが整理してエッチなサイトの画面を表示する
WEBサーバから送られてきたHTTPレスポンスのHTMLファイルの内容を画面に表示する。
⑤僕たちの目にエッチなサイトが飛び込んでくる(歓喜)
歓喜！！
