リクエストとレスポンスの仕組み
WEBサーバーへのGETリクエスト
ブラウザとWEBサーバーとのデータのやり取りを見るためのツールとしてFiddlerがあります。 Fiddlerはこちらからダウンロードできます(無料)→Fiddler download
Fiddlerを立ち上げた状態でhttp://article.higlabo.com/ja/index.htmlをブラウザで表示させて見ましょう。 以下のようなデータが取得できると思います。(クリックで拡大)
ブラウザからサーバーへ送信されたデータは右側の上部のペインに表示されます。 実際のテキストを見るにはInspectorsタブのRawをクリックすると生のテキストデータを見ることができます。
1行目にリクエストの種類とリクエスト先のURLが書いてあります。
GET http://article.higlabo.com/ja/index.html HTTP/1.1
リクエストの種類はHTTPメソッドと呼ばれ以下のようなものがRFCで定義されています。
GET --- サーバーからデータを取得するために使用。ブラウザでページを閲覧するときに使用されている。
POST --- サーバーへデータを送信するために使用。登録フォームで登録ボタンを押した際などに使用されている。
PUT --- POSTと同様。PUTは既存のデータを置き換える際に使用される。
DELETE --- サーバーのデータを削除する際に使用される。
実際には置き換えや削除の場合にもPOSTを使用しているところが大半です。ほとんどのサイトでGETもしくはPOSTが使用されています。 2行目からはヘッダといいサーバーに送信したい情報が[キー:値]というフォーマットで並んでいます。
Accept: text/html, application/xhtml+xml, */*
Accept-Language: ja-JP
User-Agent: Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; WOW64; Trident/5.0)
Accept-Encoding: gzip, deflate
Proxy-Connection: Keep-Alive
Host: article.higlabo.com
クライアントへのレスポンス
サーバーへリクエストを送るとレスポンスが返ってきます。Fiddlerでレスポンスの生のテキストを見ると以下のような値が返ってきている事が確認できます。
HTTP/1.1 200 OK
Via: 1.1 TKYSVA011
Connection: Keep-Alive
Proxy-Connection: Keep-Alive
Content-Length: 10740
Date: Wed, 26 Sep 2012 03:12:39 GMT
Content-Type: text/html
ETag: "0174067f9acd1:0"
Server: Microsoft-IIS/7.0
Last-Modified: Mon, 24 Sep 2012 18:04:22 GMT
Accept-Ranges: bytes
X-Powered-By: ASP.NET

[HTMLの文字列]
フォーマットの仕様は
[ヘッダ]
[空行]
[ボディ]
といった形になります。ボディ部分にはHTML形式の文字列がセットされています。ブラウザはこのボディのHTMLを解析して画面表示を行います。
POSTリクエストの場合
次にPOSTの場合についてFiddlerを使用して動作を見てみます。GETの場合はヘッダ情報だけ送られてきましたがPOSTの場合はヘッダ+ボディの情報がクライアントからサーバーへ送信されます。 形式は以下のようになります。
[HTTPメソッド名] [URL] [HTTPのバージョン]
キー1: 値1
キー2: 値2
…繰り返し
キー8: 値8
[空の行]
ボディ
ボディにはいくつかのフォーマットがあります。順番に解説してきます。
Content-Type=application/x-www-form-urlencodedの場合
ボディのフォーマットの1つとして>application/x-www-form-urlencodedというフォーマットがあります。
POST http://article.higlabo.com/ja/send_mail.aspx HTTP/1.1
Accept: text/html, application/xhtml+xml, */*
Accept-Language: ja-JP
Content-Type: application/x-www-form-urlencoded
User-Agent: Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; WOW64; Trident/5.0)
Accept-Encoding: gzip, deflate
Proxy-Connection: Keep-Alive
Host: article.higlabo.com

mailaddress=xxx%40gmail.com&title=Test&detail=%E3%83%86%E3%82%B9%E3%83%88%E3%83%A1
%E3%83%BC%E3%83%AB
ボディがどんなフォーマットで送信されているかはヘッダのContent-Typeの値を見ればわかります。
Content-Type: application/x-www-form-urlencoded
このフォーマットは[キー1=値1&キー2=値2&...]という形でキーと値のペアをサーバーに送信します。 リクエストで日本語などのマルチバイト文字は使用できないのでUrlEncodingをした上でサーバーへ送信します。
Content-Type=multipart/form-dataの場合
もう1つのボディのフォーマットとしてmultipart/form-dataというフォーマットがあります。 これは主に画像や添付ファイルなどをサーバーへアップロードするときに使用されるフォーマットです。 フォーマットは例えば以下のようになります。
POST http://article.higlabo.com/Upload.aspx HTTP/1.1
Content-Type: multipart/form-data; boundary=7dc3151a404be
Content-Length: 420

--7dc3151a404be
Content-Disposition: form-data; name="image_file"; filename="Print24.png"
Content-Type: image/png

[画像のバイトデータ]
--7dc3151a404be
Content-Disposition: form-data; name="image_title"

MyPicture.png
--7dc3151a404be--
フォーマットの仕様は以下のようなものになります。ヘッダには必ずContent-Typeが含まれそこでmultipart/form-data形式であることが指定されます。 Content-Typeの中で各データの境界を示すboundaryの値も指定します。
[HTTPメソッド名] [URL] [HTTPのバージョン]
キー1: 値1
Content-Type: multipart/form-data; boundary=[boundaryの値]
…繰り返し
キー8: 値8
[空行]
--[boundaryの値]
Content-Disposition: form-data; name="データの名前"; filename="ファイルの名前"
Content-Type: [画像の種別]

[画像のバイトデータ]
--[boundaryの値]
Content-Disposition: form-data; name="データの名前"

[値]
--[boundaryの値]--
それぞれフォーマットのメリットとデメリット
添付ファイルを送る場合はapplication/x-www-form-urlencodedでは送れません。multipart/form-dataを使用することになります。 ただmultipart/form-dataは送信されるデータサイズが大きくなります。 ですので添付ファイルがある場合はmultipart/form-data、ない場合はapplication/x-www-form-urlencodedを使うというのが望ましいでしょう。
Create at 2012/9/26 LastUpdate 2012/9/26