0.はじめに
伝えたいこと
- telnetでHTTPのやりとりを確認
- GET,POSTの違い
前提知識
- 応用技術者試験レベルのネットワーク知識
- プロトコル
- ポート番号
- HTMLの基本的なタグ
- aタグ
参考図書
『Webを支える技術
～HTTP、URI、HTML、そしてREST～』技術評論社
『Real World HTTP～歴史とコードに学ぶインターネットとウェブ技術～』O'Reilly
目次
1. HTTP, URIの概要
Webを支える技術
WWWは、次の3つの要素からなります。
- URI(Uniform Resource Identifier)： データはどこにあるか？
- HTTP(Hypertext Transfer Protocol)： データはどうやって手にいれるか？
- HTML(Hypertext Markup Language)： データはどうやって表現するのか？
この3つは、誕生から20年を経た今も、整理整頓はされど、まったく変化していません。
※ 『Web開発の基礎』P3 引用
HTML, URI, HTMLの関係
※ http://gihyo.jp/magazine/wdpress/plus/978-4-7741-4204-3/0002 引用
HTTPを学ぶことについて
- Webシステムでできること/できないことが分かる
- 新しい技術がたくさん出てくる中で、陳腐化しない技術を学ぶことは無駄ではない
HTTPとは
Hypertext Transfer Protocol（ハイパーテキスト・トランスファー・プロトコル、略称 HTTP）とは、HTMLなどのコンテンツの送受信に用いられる通信プロトコルである。主としてWorld Wide Webにおいて、WebブラウザとWebサーバとの間での転送に用いられる。ハイパーテキスト転送プロトコルとも呼ばれる。
※ Wikipedia HTTP 引用
HTTPの歴史
- 1990年：HTTP/0.9
- 1996年：HTTP/1.0
- 1997年：HTTP/1.1
- 2015年：HTTP/2
URIの基本構文
http://blog.example.jp/entries/1
- URIスキーム：http
- ホスト名：blog.example.jp
- パス：/entries/1
URIのポート番号
http://blog.example.jp:8080/entries/1
- ポート番号：8080
ポート番号がない場合は、スキームのデフォルトのポート番号として扱われる。スキームはhttpで、HTTPのデフォルトポート番号(well-known port numbers)は、80。
URIのクエリパラメータ
http://blog.example.jp/entries/1?safe=off&q=test
- クエリパラメータ：
safe=off&q=test
名前=値の形式で、&で区切る。
クライアントからサーバにパラメータを渡すのに使われる。
(例) Google検索の検索キーワードなど。を渡すときなどに使われる。
「http」で検索したときのURI
https://www.google.co.jp/search?safe=off&q=http&oq=http&…
「クエリ文字列」とも呼ぶ。
telnetでHTTPのやりとりを確認
telnet
Telnet（テルネット Teletype network）とは、汎用的な双方向8ビット通信を提供する端末間およびプロセス間の通信プロトコルである。
より具体的には、IPネットワークにおいて、遠隔地（リモート）にあるサーバを端末から操作できるようにする仮想端末ソフトウェア（プログラム）、またはそれを可能にするプロトコルのことを指す。
※ Wikipedia telnet 引用
サーバと直接対話ができるコマンド。
ブラウザが送信/受信していることを、素手で確認してみよう！
環境構築
- IISのインストール：http://www.wannko.net/windows10/iis/iis_00.html
- IISにWebサイトを追加。https://creativeweb.jp/personal-site/web-site/
- 以下のhello.htmlを追加
-
http://localhost/hello.htmlにアクセスできることを確認
- teratermのインストール. teraterm上でtelnetを使う。
<!DOCTYPE html>
<html>
<body>
Hello
</body>
</html>
teratermの設定
- 新しい接続
- ホスト: local
- TCPポート: 80
- サービス：Telnet
- 端末の設定
- 改行コード(受信)： CR+LF
- 改行コード(送信)： CR+LF
- ローカルエコー：ON
- TCP/IPの設定
- 自動的にウィンドウを閉じる：ON
http://blog2.k05.biz/2013/10/tera-term-web-site.html 参考
telnetでHTTPリクエスト
ブラウザがhttp://localhost/hello.htmlにアクセスしたときの動作を、telnetで確認する。
リクエスト
クライアントがリクエストをサーバに送る。
※最後に改行が必要
GET /hello.html HTTP/1.1
HOST:localhost
レスポンス
サーバからレスポンスがクライアントに返る。
HTTP/1.1 200 OK
Content-Type: text/html
Last-Modified: Wed, 19 Jul 2017 16:04:17 GMT
Accept-Ranges: bytes
ETag: "cdf9b2aca80d31:0"
Server: Microsoft-IIS/10.0
Date: Wed, 19 Jul 2017 16:10:57 GMT
Content-Length: 56
<!DOCTYPE html>
<html>
<body>
Hello
</body>
</html>
リクエストメッセージ
リクエストライン
1行目がリクエストライン。
GET /hello.html HTTP/1.1
- メソッド：GET
- 他にはPOST, PUT, DELETEなどがある
- リクエストURI：
/hello.html - プロトコルバージョン：
HTTP/1.1
リクエストヘッダ
2行目以降。
「名前:値」という形式。
付加的な情報を表現する。
HOST:localhost
リクエストボディ
今回の例では存在しない。
レスポンスメッセージ
ステータスライン
1行目がステータスライン。
HTTP/1.1 200 OK
- プロトコルバージョン：
HTTP/1.1 - ステータスコード：200
- テキストフレーズ：OK
レスポンスヘッダ
2行目から空行まで。
形式はリクエストヘッダと同じ。
Content-Type: text/html
Last-Modified: Wed, 19 Jul 2017 16:04:17 GMT
…
レスポンスボディ
空行以降。
HTMLなど、コンテンツの中身。
画像ファイルなどバイナリデータもOK。
ステータスコード
3ケタの数字。先頭の数字によって分類される。
- 1xx：処理中
- 2xx: 成功
- 3xx：リダイレクト
- 4xx：クライアントエラー
- 5xx：サーバエラー
[私見]覚えておいてほしいコード
- 200：OK
- 304：Not Modified
- 403：Forbidden：アクセス禁止
- 404：Not Found
- 500：Internal Server Error
[補足] ジョークのステータスコード
「418」は「I'm a teapot」というジョークのコード。
ジョークRFCのひとつ。
Form要素でGET,POSTメソッドを確認
<!DOCTYPE html>
<html>
<body>
<form action="/" method="GET">
<input name="country" placeholder="country">
<input name="location" placeholder="location">
<input type="submit" >
</form>
</body>
</html>
- name属性の値
- value属性の値
- クエリ文字列 or リクエストボディ
付録
- Refereの綴り間違い