XMLHttpRequest 動作例(POST)について
XMLHttpRequestについて、実際に動作サンプルを試してみます。
画面上のボタンを押したら、クライアント側からサーバ側へ文字列を送信してみます。
単純な文字列を、POST形式で送信するサンプルを、以下のHTMLを用意してみました。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | <!DOCTYPE html><html lang="ja"><head><meta charset="UTF-8"><title>テストHTML</title></head><body><input type="button" id="sampleXMLHttpRequest" value="XMLHttpRequest送信テスト(POST)"><script type="text/javascript">// ボタン要素のDOMを取得let element_sampleXMLHttpRequest = document.getElementById('sampleXMLHttpRequest');// イベントを付与element_sampleXMLHttpRequest.addEventListener('click', SendXMLHttpRequest, false);// ボタン押下時の処理function SendXMLHttpRequest(){ let req = new XMLHttpRequest(); // 送信する文字列は「キー=値」の形にする let send_string = "test_post_value=123"; req.open("POST", "./receive.php"); req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); req.send(send_string);}</script></body></html> |
また、受取り側のreceive.phpでは、受取った値を$_REQUESTで参照し、ログファイルに出力して値を確認しています。
ログ出力の内容は常に通信1回につき、1回の受信のみ出力しています(蓄積はしていません)
1 2 3 4 5 | <?phpfile_put_contents('./receive.log', print_r($_REQUEST, true));?> |
実際に画面上のボタンを押下してボタンを押すと、見た目の変化はありません。
開発者ツールのネットワークで、サーバ側への通信が行われていることが確認できます。
POST形式でサーバ側へ通信する場合は
「キー=値」の形式にしないと正しくサーバ側(この例ではphp側)で値を受信できません。
また、setRequestHeaderの値も、第一引数に「Content-Type」
第二引数に「application/x-www-form-urlencoded」を指定するとXMLHttpRequestを使わない場合の
通常の画面サブミットを同じ形式でサーバ側に値を送ることができます。
サーバ側の受信ログの内容をみてみると、以下のようになります。
1 2 3 4 | Array( [test_post_value] => 123) |
XMLHttpRequest 動作例(GET)について
では次に、GET方式でサーバ側に文字列を送信してみます。
受信側のphpはPOSTの場合と同じです。
HTMLは以下のように書いています。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | <!DOCTYPE html><html lang="ja"><head><meta charset="UTF-8"><title>テストHTML</title></head><body><input type="button" id="sampleXMLHttpRequest" value="XMLHttpRequest送信テスト(GET)"><script type="text/javascript">// ボタン要素のDOMを取得let element_sampleXMLHttpRequest = document.getElementById('sampleXMLHttpRequest');// イベントを付与element_sampleXMLHttpRequest.addEventListener('click', SendXMLHttpRequest, false);// ボタン押下時の処理function SendXMLHttpRequest(){ let req = new XMLHttpRequest(); req.open("GET", "./receive.php?test_get_value=123"); req.setRequestHeader("Content-Type", "text/plain;charset=UTF-8"); req.send();}</script></body></html> |
GET形式でサーバ側へ通信する場合は、URLの後に「キー=値」の文字列を追加してサーバ側に送信しています。
画面上のボタンを押下すると、開発者ツールのネットワークは以下のように通信が行われていることがわかります。
また、setRequestHeaderの値も、第一引数に「Content-Type」、第二引数に「text/plain;charset=UTF-8」を
指定しています。
サーバ側の受信ログの内容をみてみると、以下のようになります。
1 2 3 4 | Array( [test_get_value] => 123) |