シェアする
About HTTP Protocol, GET, and POST (Part 2) - Japanese Only
みなさまどうも。いかがお過ごしでしょうか。
さて前回は『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』について色々とやっていきましょう。ではこの辺で失礼致します。
This article was written by Sakurama.
Author's beloved small mammal |
桜舞 春人 Sakurama HarutoA Tokyo-based programmer who has been creating various content since the ISDN era, with a bit of concern about his hair. A true long sleeper who generally feels unwell without at least 10 hours of sleep. His dream is to live a life where he can sleep as much as he wants. Loves games, sports, and music. Please share some hair with him. |
If you find any errors or copyright issues, please contact us.
