Caution

お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。

JavaScript
実践編

トップページ
JavaScript実践編 - HTTPプロトコルとGETとPOSTについて(2)

HTTPプロトコルとGETとPOSTについて(2)

みなさまどうも。いかがお過ごしでしょうか。

さて前回は『GET』な『HTTP通信』について確認していきましたね。今回は『POST』についてでございます。

まず『GET』形式でアクセス時に送られる(リクエスト)データ(閲覧者がブラウザで『https://wp-p.info/tpl_rep.php?cat=js-practice&fl=r1』と打ち込んだ場合の閲覧者→弊社のサーバーに送られたデータ)は以下のような感じでしたね。

GET /tpl_rep.php?cat=js-practice&fl=r1 HTTP/1.1
Host: wp-p.info
Connection: keep-alive
Cache-Control: max-age=0
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.186 Safari/537.36
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8
Referer: https://wp-p.info/
Accept-Encoding: gzip, deflate, br
Accept-Language: ja,en-US;q=0.9,en;q=0.8
Cookie: xxxx=yyyy; xxxx=yyyy

んで「『POST』ならどうなるの？」っていうとこうなります。以下は当サイトのお問い合せをした場合の送信データになりますね。セキュリティの為、一部を伏せ字にしてますがそこはすんませんでございます。

POST /ajax.php HTTP/1.1
Host: wp-p.info
Connection: keep-alive
Content-Length: 188
Origin: https://wp-p.info
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.162 Safari/537.36
Content-Type: text/plain;charset=UTF-8
Accept: */*
Referer: https://wp-p.info/
Accept-Encoding: gzip, deflate, br
Accept-Language: ja,en-US;q=0.9,en;q=0.8
Cookie: xxx=yyy; xxxx=yyyy

{"t":"8AblHZ6We","contact_name":"初音ミク","contact_email_address":"ひみつ","contact_content":"てすとー"}

なんとなーく似た感じになっているみたいですね。実は『GET』と『POST』で内部的にはそこまで大きな違いはありません。

そして「『冒頭の1行』は『HTTPリクエスト行』にしないとダメよ！」とかのルールも同じなので上記の『POST /ajax.php HTTP/1.1』って部分も『GET』と同じように読み進めて頂いてOKで、上記の場合のメソッドは『POST』なので『POST』、『通信プロトコル』は『HTTP通信』でバージョンは『1.1』なので『HTTP/1.1』、当サイトのお問い合せの処理は『ajax.php』ってファイルで構築されているので送信先が『/ajax.php』になるって感じです。

その次の『Host: wp-p.info』から先の部分も前回の記事で解説した『HTTPヘッダー行』に該当するのでオプション的な内容がちょいちょい書かれてる感じになります。

んで『GET』と『POST』で大きな違いが1つあり、それは以下の部分になります。


{"t":"8AblHZ6We","contact_name":"初音ミク","contact_email_address":"ひみつ","contact_content":"てすとー"}

ちょうど『HTTPヘッダー行』が終わった先に空白行が1行あって、その先になにやらデータが書いてありますね。

これが『HTTPリクエストボディ』なんて呼ばれる部分になります。

ちなみに『HTTPリクエストボディ』も『リクエストボディ』とか『リクエストした時のボディ部分』とか様々な呼び方をされがちなとこなのでここはちょいと気をつけて下さい。まあ呼び方なんぞ相手にちゃんと伝わればOKなのであまり気にしないことこそ肝要でございます。

そして「『POST』形式で何かしらのデータを送りたい」となった場合にデータを書き込む場所は『HTTPリクエストボディ』になり、『GET』な場合は『HTTPリクエストボディ』は存在しません。ここちょいと間違いやすいとこなのでちょっと注意です。

んでもって「『GET』と『POST』で何が違うの？」とセンチメンタルな気持ちになってしまった方も多いと思いますのでその辺を見ていきましょう。これは『GET』と『POST』のデータの送り方の違いを見比べてみると分かりやすいと思います。

『GET』な場合は『https://wp-p.info/tpl_rep.php?cat=js-practice&fl=r1』みたいにURLに『GETパラメーター』を添付することでデータを送信していましたよね。

ここでちょいと問題になるのが「URLに添付する形になっている」というところになります。実はURLの最大文字数っていうのは決められてしまっており、今現在ですと大体『2000文字』くらいになっています。なので「2000文字以上のデータを送りたい」ってなった場合だと『GET』形式じゃデータが送れないんですね。画像を送ったり動画を送ったりなんて事は確実に無理なわけでございます。

あとURLに送信データが添付されてしまうのでプログラミングの知識が無い方でも簡単に送信データの内容が確認出来てしまうというのもあまりよろしくありません。

その反面、『POST』になると『HTTPリクエストボディ』にデータを書き込む事ができるのでデータの上限はほぼ存在していない形になります。このデータの受け取りの最大サイズはデータを受け取るサーバー側である程度自由に設定できるので「大きめなデータを送る」とかになると『POST』じゃないと無理なんですね。まあ送信データが何十GBとかになるとネット回線的な問題も出てくるので色々とむつかしいかもですが一般的なウェブサービスに使用されるであろうデータ量は確実にカバーできます。

そして受信される(レスポンス)データに関しては『GET』と『POST』でそこまでの差はありません。以下が当サイトのお問い合せフォームに投稿した場合の『POST』なレスポンスデータです。

HTTP/1.1 200 OK
Date: Wed, 21 Mar 2018 07:12:43 GMT
Server: Apache/2.2.15 (CentOS)
X-Powered-By: PHP/7.1.15
Expires: Thu, 19 Nov 1981 08:52:00 GMT
Cache-Control: no-store, no-cache, must-revalidate
Pragma: no-cache
Set-Cookie: xxx=yyy; path=/
X-Content-Type-Options: nosniff
Vary: Accept-Encoding,User-Agent
Content-Encoding: gzip
Content-Length: 40
Connection: close
Content-Type: application/json; charset=UTF-8

{"status":"success"}

『https://wp-p.info/tpl_rep.php?cat=js-practice&fl=r1』にアクセスした際の『GET』なレスポンスデータは以下でした。

HTTP/1.1 200 OK
Date: Mon, 19 Mar 2018 09:19:10 GMT
Server: Apache/2.2.15 (CentOS)
X-Powered-By: PHP/7.1.15
Expires: Thu, 19 Nov 1981 08:52:00 GMT
Cache-Control: no-store, no-cache, must-revalidate
Pragma: no-cache
Set-Cookie: XXXX=YYYY; path=/
Vary: Accept-Encoding,User-Agent
Content-Encoding: gzip
Content-Length: 12897
Connection: close
Content-Type: text/html; charset=UTF-8

<!DOCTYPE html> 
<html lang="ja"> 
<head> 
<meta charset="utf-8">
<meta http-equiv="Expires" content="86400000">
以下省略...
...

『POST』と『GET』と同じような感じですね。『HTTPヘッダー』部分の後に空白行を1行挟んでその先にHTMLだったりJSONだったりっていうデータが書いてある感じになります。

そしてちょいと応用技なんですが『POST』と『GET』を両方使うなんて荒業も可能です。これまで色々と長話をしてしまっていてちょっと頭がこんがらがっちゃうかもなんですが『GET』形式って要するにURLに『GETパラメーター』を添付したりしなかったりするだけだったりしますよね。

なので例えば『https://wp-p.info/ajax.php?test=hoge』に『POST』でデータを送るなんて事も可能だったりします。これは『GET』と『POST』両方に該当する感じになるわけなんですが場合によっては凄く便利なのでなんとなーくでも頭の片隅に置いておいて貰えると嬉しいです。

あとここがちょっと紛らわしいのですが「なんで『GET』(受け取る)と『POST』(送る)って名前なの？」というと「元々『GET』は何かを取得する際に使えるよう作られたもの」、「元々『POST』は何かを送信する際に使えるよう作られたもの」っていう背景があるからなんですね。

ただ個人的にこの使い分けについてはほとんど意識しなくてOKかなって思います。

セキュリティを考えつつしっかりした通信ができれば後は受け取り側でどうとでも出来る感じになりますので送りたいデータがシンプルで閲覧者に簡単に見られても問題なければ『GET』、ややこしいときは『POST』って感じでお好きなように構築してしまってOKです。

というわけで『GET』と『POST』の違いについては以上となりますがいかがでしたでしょうか。

さてこれまでの記事で以下のような記述ってありましたよね。

{"t":"8AblHZ6We","contact_name":"初音ミク","contact_email_address":"ひみつ","contact_content":"てすとー"}

{"status":"success"}

これは『JSON』って呼ばれるものなのですが、『Ajax』を構築するにあたってこちらも必須事項になります。

なので次回の記事では『JSON』について色々とやっていきましょう。ではこの辺で失礼致します。

この記事は桜舞が執筆致しました。

著者が愛する小型哺乳類

桜舞春人 Sakurama Haruto

ISDN時代から様々なコンテンツを制作しているちょっと髪の毛が心配な東京在住のプログラマー。生粋のロングスリーパーで、10時間以上睡眠を取らないと基本的に体調が悪い。好きなだけ寝れる生活を送るのが夢。ゲームとスポーツと音楽が大好き。誰か髪の毛を分けて下さい。

記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。

トップページへ

前の記事へ

次の記事へ

WebProgrammingPortalウェブプログラミングポータル

Caution

JavaScript実践編

HTTPプロトコルとGETとPOSTについて(2)

桜舞 春人 Sakurama Haruto

JavaScript
実践編

桜舞春人 Sakurama Haruto