Scroll

「常に新しい技術に目を向けること」
「既存の技術をより深堀りすること」

カテゴリ:JQuery PHP 開発言語
タグ:
公開日:2015/06/29(月)

Ajaxで非同期通信してみるよー

はちです。最近社内システム構築で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

続いて処理側(PHPファイルです。):getdata.php

出来たサンプルです!

サンプル→こちらからどうぞ

あとがき

これだけ見ると、戦略AもBも一緒なんじゃないの?って思ってしまいがちなんですが
「非同期通信」が出来ると「データの更新」とか「画面の一部書き換え」とかも裏で出来たりするのです。
本来「データの更新」や「画面の書き換え」はユーザーの手が止まる(更新処理や書き換え処理で画面が切り替わるので)行為ですが
「非同期通信」で裏でその作業ができれば、ユーザーの手を止めずに作業させることが出来ます。
これって地味ですが実は大切なことで「リアルタイムの操作性を追求する場合は、画面の全体書き換えはあまり良くない」とされます。
ので「非同期通信」が実装出来るに越したことはないと考えます。勿論、工数や、セキュリティ面との兼ね合いはありますが…(‘ー’)

この記事を書いた人:はち

シェアのご協力をお願いいたします!

カテゴリー

アーカイブ