altplusaltplusB3Sスタッフの技術紹介サイトです。2016年9月1日TwitterFacebookGoogle+LinkedInPocketはちです。最近社内システム構築でJQuery使いすぎだろって石を投げられました。操作性を高めるには仕方ないし...諦めずに使えるところでガンガン使っていきたいと考えています。JQueryで最近悩んだことがあります。連動プルダウンを作るときの仕様はどうするか戦略A:必要なデータを全部ページロード時に読み込んでおく戦略AというプルダウンにA配列のデータを、Bというプルダウンには最初は何も入れないがB配列には必要そうなデータを詰め込んでおく。Aで選ばれたキーを元に、Bの配列を検索させてヒットしたものを描画する。データを最初に読み込むので、読み込み処理には少し時間がかかるし、必要ないときも読み込む必要がある。読み込みを最初に全部するので、ソースコードには読み込んだ配列データが全部記載されて汚い。メソッドもいっぱい定義する必要がある。何より、連動プルダウンの処理は、実装がそこそこ大変で工数がかかる。戦略B:必要なデータは必要なときに読みこむ戦略AプルダウンにA配列だけを最初に読み込んで、Aが変更されたらキーをDBに投げて検索してその時にBプルダウンに入れるB配列を作れば良い。同一画面への遷移はカッコ悪いのでしたくない(ページロードさせない)読み込みを最初にしない分、ページロードは戦略Aより早いが、Bを可能にするのは画面遷移をしたくない場合は「非同期通信」しかない。工数の兼ね合いもあり、初期リリースでは、戦略Aをそのまま実装したのですが、モヤモヤが残るので、戦略Bを研究してみることにしました。いうことで、Ajaxで非同期通信してみます!非同期通信といえばお馴染みのAjax先生に登場いただくことにしました。今回は「表示用のファイル」「処理を頑張るファイル」の2個を用意します。表示側(HTMLファイルです。value="">--選手を選択してください--</option></select></body></html>続いて処理側(PHPファイルです。$row);}}//JSON形式で値を返しますecho(json_encode($response));出来たサンプルです!サンプル→こちらからどうぞあとがきこれだけ見ると、戦略AもBも一緒なんじゃないの?って思ってしまいがちなんですが「非同期通信」が出来ると「データの更新」とか「画面の一部書き換え」とかも裏で出来たりするのです。本来「データの更新」や「画面の書き換え」はユーザーの手が止まる(更新処理や書き換え処理で画面が切り替わるので)行為ですが「非同期通信」で裏でその作業ができれば、ユーザーの手を止めずに作業させることが出来ます。これって地味ですが実は大切なことで「リアルタイムの操作性を追求する場合は、画面の全体書き換えはあまり良くない」とされます。「非同期通信」が実装出来るに越したことはないと考えます。円グラフ作成NextMS-DOSでディスクの空き容量を確認するPrev関連記事tableでの大量データの描画[その1]はじめまして、まっきーです。...PHPでの未入力チェック方法(多重配列対応)PHPでの未入力(空文字)チェックは0とスペースの判定に困ります。...javascriptで子ウインドウから親ウインドウを更新する(ポップアップ、iframe対応)javascriptは便利ですが、気をつけないとすぐエラーが発生する気がします。...Ajaxのデバッグを簡単に実行したい!!ブログの更新を頑張っています。...ディスカッションコメント一覧まだ、コメントがありませんコメントを残すコメントをキャンセルこの記事のトラックバックURL新着記事[MySQL]ウインドウ関数お久しぶりでございます。...自作HPが突然見れなくなってしまった!!こんにちは。...Googleドキュメントの「写真のファイルをテキストに変換する」をやってみた。お久し振りです!ぽんてです。...Ajaxのデバッグを簡単に実行したい!!ブログの更新を頑張っています。~プッシュ通知編~はちです。