PHP
Ajaxで非同期通信してみるよー
はち
更新日:2021/08/04
はちです。最近社内システム構築でJQuery使いすぎだろって石を投げられました。
だって操作性を高めるには仕方ないし…諦めずに使えるところでガンガン使っていきたいと考えています。
JQueryで最近悩んだことがあります。
JQueryを減らすといっても、それに代替するものがどうしても必要です。
社内システム構築では、連動プルダウンについて考えなければならないと思いました。
連動プルダウンを作るときの仕様はどうするか
戦略A：必要なデータを全部ページロード時に読み込んでおく戦略
AというプルダウンにA配列のデータを、Bというプルダウンには最初は何も入れないがB配列には必要そうなデータを詰め込んでおく。
Aで選ばれたキーを元に、Bの配列を検索させてヒットしたものを描画する。
データを最初に読み込むので、読み込み処理には少し時間がかかるし、必要ないときも読み込む必要がある。
読み込みを最初に全部するので、ソースコードには読み込んだ配列データが全部記載されて汚い。メソッドもいっぱい定義する必要がある。
そして何より、連動プルダウンの処理は、実装がそこそこ大変で工数がかかる。
戦略B：必要なデータは必要なときに読みこむ戦略
AプルダウンにA配列だけを最初に読み込んで、Aが変更されたらキーをDBに投げて検索して
その時にBプルダウンに入れるB配列を作れば良い。同一画面への遷移はカッコ悪いのでしたくない(ページロードさせない)
読み込みを最初にしない分、ページロードは戦略Aより早いが、Bを可能にするのは画面遷移をしたくない場合は「非同期通信」しかない。
工数の兼ね合いもあり、初期リリースでは、戦略Aをそのまま実装したのですが、モヤモヤが残るので、戦略Bを研究してみることにしました。
Ajaxで非同期通信してみます！
非同期通信といえばお馴染みのAjax先生に登場いただくことにしました。
今回は「表示用のファイル」「処理を頑張るファイル」の2個を用意します。
まずは表示側(HTMLファイルです。)：sample.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 38 39 40 41 42 43 44 45 46 47 48 49 |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Ajaxを用いたプルダウンサンプル</title> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script type="text/javascript"> <!-- function getTableData() { //プルダウンで選択されたValueを取得 var selectVal = $("#team_id").val(); //getJSONで、別途用意している処理用PHPに必要な値を投げて受け取ります $.getJSON("https://www.alt-plus.jp/sandbox/hachi/20150629_ajaxsample/getdata.php" , {"team_id": selectVal } //team_idに取得したValue値を投げます , function (data, status) { var playerList = $("#player_id"); //連動するプルダウンのID playerList.children().remove(); //子要素は毎回全て削除します(初期化) for (i in data) { var row = data[i]; //取得したデータをAppendで1行ずつ追加 playerList.append(new Option(row['player_name'], row['player_id'])); } } /*****エラーハンドリング用 ).success(function(json) { console.log("成功"); }).error(function(jqXHR, textStatus, errorThrown) { console.log("エラー：" + textStatus); console.log("テキスト：" + jqXHR.responseText); }).complete(function() { console.log("完了"); } */ ); } </script> </head> <body> <select id="team_id" name="team_id" onchange="getTableData()"> <option value="">--チームを選択してください--</option> <option value="1">読売ジャイアンツ</option> <option value="2">中日ドラゴンズ</option> </select> <select id="player_id" name="player_id"> <option value="">--選手を選択してください--</option> </select> </body> </html> |
続いて処理側(PHPファイルです。)：getdata.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
//クライアントから送信されるチームIDを取得します $team_id = $_GET['team_id']; //クライアントに返す検索結果はこいつに入れます $response = array(); //DBからチームIDに合致する選手名を取得します if (strlen($team_id) != 0) { $link = mysql_connect('DBの場所', 'DBユーザ', 'DBパスワード'); mysql_select_db('使用するDB名'); mysql_query("SET NAMES utf8", $link); $sql = "SELECT player_id"; $sql .= " , player_name"; $sql .= " FROM テーブル名"; $sql .= sprintf(" WHERE team_id = '%s'", mysql_real_escape_string($team_id)); $sql .= " ORDER BY player_id ASC"; $result = mysql_query($sql, $link); while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) { array_push($response, $row); } } //JSON形式で値を返します echo(json_encode($response)); |
あとがき
これだけ見ると、戦略AもBも一緒なんじゃないの？って思ってしまいがちなんですが、「非同期通信」が出来ると「データの更新」とか「画面の一部書き換え」とかも裏で出来たりするのです。
本来「データの更新」や「画面の書き換え」はユーザーの手が止まる(更新処理や書き換え処理で画面が切り替わるので)行為ですが、「非同期通信」で裏でその作業ができれば、ユーザーの手を止めずに作業させることが出来ます。
これって地味ですが実は大切なことで「リアルタイムの操作性を追求する場合は、画面の全体書き換えはあまり良くない」とされます。
ので「非同期通信」が実装出来るに越したことはないと考えます。勿論、工数や、セキュリティ面との兼ね合いはありますが…(‘ー’)
