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

みなさまどうも。

続きまして『Ajax』の構築方法の前に通信関係の知識が多少必要になってくるのでそれを一緒に確認していきましょう。

まず通信処理において重要な概念である『通信プロトコル』ってやつについてです。

この『通信プロトコル』っていうのは簡潔に言うと「通信する際のお互いの取り決め」って感じになります。

「通信する際の取り決めってなんじゃらほい？」ってお話なんですが、まずインターネットやパソコンの世界では全て『0』と『1』で表現できるバイナリデータを送受信することで成立しています。

んでバイナリデータを送受信したときにお互いに共通のルールを設けておかないとデータの送受信が出来てもお互いに上手く情報を伝達できない、という問題が発生してしまうんですね。

共通のルールっていうのは例えば『0001』のデータを数値の『1』にするのか、それとも英語の『a』にするのか、それとも日本語の『あ』にするのか、という内容を決めておくような感じになります。

これは「言葉」に例えると分かりやすいかと思います。人間に限らずほぼ全ての動物は声や音を発する機能をもっているわけなのですが、お互いにその声や音をどのように解釈するかという共通のルールを持っていないと意思の疎通って成立しませんよね。

日本語が喋れる人同士ならば日本語で話せばOKなのでこれが「お互いに同じ『通信プロトコル』が存在してる状態」で、英語しかわからない人に日本語で話しかけたり言葉を解釈出来ない動物に話しかけると意思の疎通が出来ない、つまりこれが「お互いに『通信プロトコル』が違うまたは『通信プロトコル』が存在していない状態」に該当します。

そしてブラウザやウェブサービス系で主に使われている『通信プロトコル』は『HTTP通信』ってやつになり、正式名は『Hypertext Transfer Protocol』(ハイパーテキスト・トランスファー・プロトコル)って言います。そしてもう1つ『HTTPS通信』っていう子もいるのですが、これは『HTTP通信』の通信部分を暗号化したものなので根本的には同じものと考えてしまってOKです。

さらに『HTTP通信』は「リクエスト(通信)する際のメソッド」という通信形式のカテゴリー分けみたいな概念があり、このメソッドで主に利用されるのは『GET』または『POST』の2つです。

この「リクエスト(通信)する際のメソッド」ってやつも『HTTP通信』の知識として必要になるのでそれも同時にみていきますね。この解説は「『HTTP通信』は内部的にどういう感じになってるの？」ってところを見ておくと色々と分かりやすいし色々と捗ると思いますので実際に送信されるデータを確認しながら進めていきましょう。

まず先程解説した通り通信の根本的な部分は『0』と『1』で構成されたバイナリデータになるのですが、『HTTP通信』の場合は更に大きく分類して「テキストデータを送り合っている」というイメージを持ってしまってほぼほぼOKです。

そんでもって以下は当サイトの『tpl_rep.php』ってファイルにアクセスした際のリクエストデータ(閲覧者がブラウザで『https://wp-p.info/tpl_rep.php?cat=js-practice&fl=r1』と打ち込んだ場合の閲覧者→弊社のサーバーに送られたデータ)になります。これは通信メソッドが『GET』だった場合に該当しますね。あとセキュリティの問題もあるため一部分を伏せ字にしててそこはすんませんでございます。

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

なにやら色々と書かれていますがとりあえずテキストデータであることは間違い無さそうですね。ちなみにこういうデータはブラウザの開発ツールで見れたりするので色々といじってみると面白いかもでございます。

そしたら1行目に注目してみましょう。『GET /tpl_rep.php?cat=js-practice&fl=r1 HTTP/1.1』って感じで書かれています。

これは一般的に『HTTPリクエスト行』なんて呼ばれている部分になります。他には「HTTPのリクエストしてるとこ」とか「HTTPの1行目」とか結構色々な呼び方をされますね。多分ちゃんとした名前は決まってない気がするのですがもし決まってたらすみません。

記述内容についてですが、冒頭の『GET』って書いてある部分で「通信する際のメソッドが『GET』だよー」って教えつつ、さらに『HTTP/1.1』って部分で「『通信プロトコル』は『HTTP通信』でバージョンは1.1だよー」って指定してる感じになります。

なぜこういう風に記述するのかというと「こういう風に記述すること！」と世界的に決められておりましてこれが『HTTP通信』のルールの1つに該当する感じです。

んで『HTTPリクエスト行』はこれまた『HTTP通信』のルールで「『冒頭の1行』は『HTTPリクエスト行』にしないとダメよ！」って決められているので冒頭の1行は必ず『HTTPリクエスト行』に該当します。

そして上記の『HTTPリクエスト行』の真ん中あたりに『/tpl_rep.php?cat=js-practice&fl=r1』って書いてありますよね。なんとなーくアクセスしているファイルは『/tpl_rep.php』っぽいなって印象は持って頂けてると思うのですがその後の『?cat=js-practice&fl=r1』って部分がちょっと謎ですよね。

実はこれが『GET』通信においてとっても重要な部分で、俗に『GETパラメーター』とか『クエリーストリング』とか単純に『URLクエリー』なんて呼ばれるとこになります。

まあ簡単に言うとURLの内部にちょっとしたデータを記述する事が出来る機能って感じです。記法は上記のように通信先のファイルの末尾に『?』を置いて、『パラメーター名=値』という書式にすればOKです。んで『パラメーター名=値』が2つ以上だった場合は更に『&』を付けて分割すればOKです。

『GETパラメーター』が1セットならば『/tpl_rep.php?cat=js-practice』、2つならば『/tpl_rep.php?cat=js-practice&fl=r1』になるって感じですね。

んでこれをどういう風に使うのかというとサーバー側で動かすほぼ全てのプログラム言語には『GETパラメーター』を受け取る処理が用意されていますのでそれを使ってちょっとした分岐処理を行ったり〜って感じです。使い方は様々ですが分岐処理に使われることが多い気がしてます。

例えば、今閲覧している当サイトの記事ページを出力しているファイルは著者が書いた『tpl_rep.php』って子になるのですが、通常の記事はこの『tpl_rep.php』くんだけで全ての記事の出力処理を行ってくれています。とっても良い子です。

なぜそんな事が可能なのかというとこの子はアクセスしてきた時の『GETパラメーター』を元にした『カテゴリー』と『記事名』で取り込むファイルを変えて出力分けする処理を行ってくれているからなんですね。

キーが『cat』な値が『js-practice』だったら『JavaScript実践編』で、キーが『fl』な値が『r1』だったらその中の『r1.php』を読み込む、といった感じになります。こんな感じで色々な使い方ができるのが『GETパラメーター』になりますね。

んで『HTTPリクエスト行』からその続きの

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

ってところが『HTTPヘッダー行』って呼ばれる部分になります。他には『HTTPヘッダーフィールド』とか『HTTPヘッダー部』なんて呼ばれたりしますね。これは『HTTP通信』のルールで「複数行OKですよー」ってなっているので複数行で構成される場合がほとんどです。

中身の内容としてはキャッシュを指定したり閲覧時に使っているブラウザ情報が書いてあったりクッキーが書いてあったりといった感じですね。この部分は処理によってちょいちょい変わる部分ではあるのですが基本的に「オプション的な内容が書かれている」ってイメージでOKかなって思います。

そして『HTTPリクエスト行』と『HTTPヘッダー行』をまとめて『HTTPリクエストヘッダー』(HTTP Request Header)って呼ばれます。

ちょいと名前がややこしいのですが現場でも『HTTPヘッダー』とか『HTTPのヘッド部分』なんて適当に呼ばれる事が多いので丸暗記する必要とかは全然無く、ある程度概要を掴んでおくだけでOKかなって思います。

んで上記の場合は『リクエスト』、つまり送信する側で送っているテキストデータになるので逆に受信した『レスポンス』なデータも存在しています。

以下は先程と同じく『/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">
以下省略...
...

まず1行目に注目してみましょう。

これは『HTTPステータス行』と呼ばれるとこで、「冒頭の1行は『HTTPステータス行』だよー」って決められているので冒頭の1行は必ず『HTTPステータス行』になります。これも人によって色々な呼び方がされる部分で多分正式名は無いのではないかという予感なので少々ご注意かもですね。あったらすみませんでございます。

んで中身は『HTTPリクエスト行』と同じような感じで『HTTP/1.1』って部分で『HTTP通信』とバージョンを指定してる感じなのですがその中で『200 OK』って部分がありますよね。

これは俗にいう『ステータスコード』って呼ばれる部分で「通信が成功した場合は『200』にしてね」って決められているので通信が成功すれば基本的に『200』になります。

逆にエラーは『400』番台が使われることが多いですね。例えばファイルが見つからないエラーは『404』になる感じで『404』なページは皆様も見たことあるかと思います。

ただちょっと注意点として最近は「通信が成功しても失敗してもとりあえず『200』を返す」って処理が組まれる場合が結構あり上記のルールはそれほど守られていないのが現実なのでそこは少し気をつけて下さい。実は当サイトもそんな処理で組まれていたりします。

「なんでエラーなのに『400』番台にしないの？」って話になると様々な目的があったりするのですがブラウザによっては『400』番台を使うと『Ajax』とかをしているJS側でもエラーっぽい扱いされてしまってその内容が赤字でコンソール画面とかに出力されてしまったりって事があるのでその予防というのが理由の1つになるかと思います。

基本的に使ってる閲覧者さんにはエラー内容はあまり見せたくないわけですので全ての処理をとりあえず『200』で返して、他の部分でエラー判定が出来るように構成している感じですね。

あと『ステータスコード』がまちまちになるとJS側の分岐処理を組むのが少々ややこしくなりがちなので「エラーかどうかはこの部分を見れば100%判定できる！」って部分を自作して用意して処理を簡潔にしておくって目的もあったりします。まあこれは構築の仕方で色々と変わる部分なのでお好きなように構築してしまってOKな部分になりますね。

んで続いて『HTTPステータス行』から先の以下の部分ですが

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

これも先程と同じく『HTTPヘッダー行』とか『HTTPヘッダーフィールド』とかって呼ばれる部分になり、中身も同じくオプション的な内容が記載されている感じになります。

そしてその先は以下のように

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">
以下省略...
...

空白行を1つ挟んでHTMLが記載されていますよね。このHTMLが皆さんがブラウザで見ている部分に該当します。「空白行を1つ挟む」っていうのも『HTTP通信』で決められたルールになりますね。

というわけで『GET』な『HTTP通信』の中身はこんな感じになります。ちょっとややこしいとこも多いかもですが細かく見てみるとそこまで難しい内容ではないし丸暗記なんぞする必要も無いわけなのでなんとなーくで理解して頂ければ幸いでございます。

ちなみに『?』から先が存在していない『https://wp-p.info/』みたいなURLでも「『GETパラメーター』を通信に使ってないからその部分の記述が無い」ってだけで通信方式は『GET』が該当します。

ここ間違いやすいので気をつけて下さい。

さて大分長くなってきてしまったのでここらで一旦記事を切りますね。次は『POST』な通信内容について色々みていきましょう。

ではこの辺で失礼致します。