Webによる通信ではデータベース処理などを行うために、フォームボタンからsubmitボタンを配置し、必要なデータを送る方法がある。この方法では、ボタンを押した後でページが更新される。
一方、JavaScriptの非同期通信オブジェクト(XMLHttpRequest)のopenメソッドを使用した通信でも同様にデータベースを更新できるが、この場合送信のみで、ページの更新は行われない。
ここではその記述方法について比較する。また、非同期通信オブジェクトを使う方がより柔軟であり、フォームを使う必要がないが、同じフォームを用いて統一する。
サーバーはPHPで処理する記述を行う。
まずはフォームを配置する必要がある。submitボタンを配置する記述方法は以下のようになる。
<form id="idForm1" name="form1" action="" method="POST"> <fieldset> <legend>データ編集フォーム</legend> <label for="val1">val1</label><input type="text" id="idVal1" name="val1" placeholder="" value="" size="6"> <label for="val2">val2</label><input type="text" id="idVal2" name="val2" placeholder="" value="" size="6"> <input type="submit" value="送信する"> </fieldset></form>fieldsetタグを使用することで、タブキーで１まとめにすることができる。val1とval2を入力し、[送信する]ボタンで送信する。
次に非同期通信オブジェクトによるopenを使用する方法では、submitの行は以下のようにする。
<input type="button" value="送信する" onclick="access()">onclickイベント追加することで、JavaScriptコードを実行する。
<script> function access() { var val1 = document.forms.form1.val1.value; var val2 = document.forms.form1.val2.value; var c = new XMLHttpRequest(); c.onreadystatechange = function(){ if (c.readyState == 4 && c.status == 200) { // 受信したときの処理。後述。 } } c.open("get", "access.php?val1=" + val1 + "&val2=" + val2, true); c.send(null); }</script>openメソッドで送信先を指定する。第１引数は"get"でURLパラメータに引数があることを示す。第２引数はURLである。ここではaccess.phpファイルに送信している。第３引数は同期か非同期を指定しtrueで同期する。ここでは第２引数で送信データを指定している。
sendメソッドで送信する。第一引数はopenメソッドの第１引数"get"が"post"のときにはURL引数を指定する。
PHPコードで処理する。
フォームのsubmitの場合は $_POST でデータを得る。
if (isset($_POST["val1"])) { $val1 = $_POST["val1"]; $val2 = $_POST["val2"]; // 以下、SQLの処理などを行う。 }val1データがあるかどうかで、submit処理があったかどうかを判定している。データがあれば取得し、データ処理を行う。
openを使用する場合はメソッド第２引数に指定されたPHPファイルにアクセスするので、これを作成する。
$_GET でデータを得る。access.phpの記述である。
$val1 = $_GET["val1"]; $val2 = $_GET["val2"];この後でデータ処理を行えばよい。
送信後のデータの反映については、更新後データやエラー出力を表示するなどがある。
submitの場合はdie関数を実行する方法と、変数をHTML出力する方法がある。
die関数を使用する方法を示す。
die("処理に失敗しました");この場合、ページには「データベースエラー」というテキストのみ表示される簡単な方法で、処理失敗時などに有用である。
次に、変数をHTML出力する方法を示す。
$message = "処理に成功しました。";これをHTMLに出力するようにする。
<?php echo htmlspecialchars($message, ENT_QUOTES); ?>これで$message変数がHTML上でテキストに置き換わる。処理が成功したか確認したい場合や、情報出力に有用で、再度データ送信することもできる。
openを使用する場合はechoなどの出力を行う。access.phpでは以下のような受信用コードになっているとする。
if ($isOk){ echo "処理に成功しました。"; } else { echo "処理に失敗しました。"; }このechoテキストを送信コードにあった「受信したときの処理。後述。」コメントのところに受信処理を記述する。
if (c.readyState == 4 && c.status == 200) { // 受信したときの処理。後述。 document.getElementById("idResult").innerHTML = c.responseText; }これでidResultタグに受信内容を出力する。クライアント上のページを更新せずに、ユーザーは次の処理を行うことができる。
最近では jQuery を使用することも増えてきている。より簡潔なコードを記述するには jQuery は使いやすいので、その一例を示す。
まず、jQueryのロードをGoogleのCDN経由で行う。headタグの最後辺りに以下の記述をすればよい。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>送信と受信のコードは以下のような記述になる。
<script>function access(){ $.get('access.php', { val1: $('input[name="val1"]').val(), val2: $('input[name="val2"]').val() } ) .done(function(data) { $('#idResult').html(data); }) .fail(function() { $('#idResult').html('access.phpへのアクセスに失敗しました。'); });}</script>getメソッドの第１引数に送信URLを指定し、第２引数に引数を指定している。doneメソッドでは受信時の処理、failメソッドではアクセスエラー時の処理を記述している。
ボタンと関数との関連付けはボタンに onclick イベントを指定していたが、jQueryではDOMオブジェクトからセレクタを用いて関連付ける記述方法も行われる。ボタンにはidを付与するため以下のようになる。
<input id="access" type="button" value="open 送信する">スクリプトは以下のようになる。
$(function() { $('#access').click(function() { $.get('submitopenacc.php', { val1: $('input[name="val1"]').val(), val2: $('input[name="val2"]').val() } ) .done(function(data) { $('#idResult').html(data); }) .fail(function() { window.alert('submitopenacc.phpへのアクセスに失敗しました。'); }); });});ページが動作する際、access IDタグに対して、クリックイベントを追加している。
http://cpage.xsrv.jp/labo/submitopen.php にはsubmitとopen両方を使用したページを用意した。val1とval2どちらか一方が空欄で送信した場合処理は失敗し、両方にテキストがあれば送信に成功する。
ページには以下のPHPコードが記述されている。
<?php$message = "";if (isset($_POST["val1"])) { $val1 = $_POST["val1"]; $val2 = $_POST["val2"]; if ($val1=="" || $val2=="") { die("処理に失敗しました"); } $message = "処理に成功しました。";}?>これはサーバー上で処理され、処理が成功した場合は「submit 送信の受信」のところのテキストを
<?php echo htmlspecialchars($message, ENT_QUOTES); ?>で置き換えている。
また、openのサーバー側の処理として、submitopenacc.phpファイルが置かれている。内容は以下のとおりである。
<?php$val1 = $_GET["val1"];$val2 = $_GET["val2"];if ($val1=="" || $val2=="") { echo "処理に失敗しました。";} else { echo "処理に成功しました。";}?>echoの出力がJavaScriptの受信処理によって表示される。
jQueryの使用例として、http://cpage.xsrv.jp/labo/submitopenjq1.php と http://cpage.xsrv.jp/labo/submitopenjq2.php を用意した。処理内容自体は３つのファイル全て同様である。