カーソルの動きに合わせてDBからのデータを表示する

教えてください。
初心者です。別で質問させていただいた内容に関係する質問ですが、例えばブラウザ上にカレンダーがあり、日付のところをカーソルを移動していくと、日付ごとにデータベースからの予約情報を見れるようにするにはどのようにJavascript、Ajaxとサーバサイドのプログラムが連携するのでしょうか？カーソルがあたったらその都度hpptでリクエストを投げるような動きになるのでしょうか？それともクライアントサイドに全ての日付のデータをレスポンスで取ってあとはクライアントサイドで整形してるようなイメージでしょうか？

No.2 回答者： lv4u 回答日時： 2021/12/10 23:16

GoogleのMapソフトがAjaxを使っていますね。

おおざっぱには、以下のような動きでしょうか。

１）ブラウザで動作するJavascriptが、カーソル、マウスの動きを検知して、サーバにリクエストを投げる。
２）サーバは受け取ったリクエストを解析して、必要なデータ（例題の場合は、予約データ）をDBから読み込んで、ブラウザーに返す。
３）ブラウザは受け取ったデータを元に、画面の必要な箇所を書き換える。

こんな感じ？
だから、クライアント側には予約データは持ちません。

No.1 回答者： fujillin 回答日時： 2021/12/10 22:16

こんばんは

データ量や使い方によって決めることだと思われます。

例えば、1日ごとにリクエストして情報を受け取る方式だと、仮に1か月分を全部を見るのに30回のリクエストと、それに応じて30回のサーバサイドの処理が発生します。
これに対して、1か月分をまとめてリクエストする方式なら、それぞれ1回で済むので、データそのものの量は30倍程度にはなりますが、全体としては圧倒的に短い時間とサーバへの負荷で済みます。

・・ということで、1日分の情報量がどのくらいかによって、1日で区切るのか1週間で区切るのかといった妥当そうな区切りを見つけることになるのではないでしょうか？
検索ページが、1回の検索に対して「適当」な件数で区切って表示するのと似ているかも知れません。

「1件分の予約情報の情報量」も不明ですが、それに「1日分の件数」と「1度に取得する日数」を乗ずれば、およその通信量は推測できると思います。
目安としては、画像等を読み込む際の大きさと速度の関係で、大まかな見当はつけられるかと思います。

また、使い方として「1日分を確認するだけ」がほとんどの使い方であるなら、複数日分をリクエストする必要もなさそうですし、何日かを交互に見て調整したり比較したりするような作業をするようであるなら、その内容に応じて考慮したほうが良いのかも知れません。

＞ブラウザ上にカレンダーがあり、日付のところをカーソルを移動していくと、
＞日付ごとにデータベースからの予約情報を見れるようにするには～～
というUIから想像すると、カーソルの移動でその日が拡大されたりすることはなさそうですので、カレンダーのマス目上か、あるいは固定の表示エリアに情報が表示されるものと思います。
また、カーソルの移動に対するレスポンスを考えれば、1日毎にリクエストしていたのでは、タイミングにずれが生じる可能性が考えられます。
表示情報だけが全てであると仮定してよいのなら（紐づけ情報とか、詳細情報とかはない）、1か月程度をまとめて取得しても、さほどの情報量ではなさそうに思いますけれど・・・
（実際のところがまったくわからないので、なんとも言えませんが‥）

この回答へのお礼

ありがとうございました。参考になりました。

お礼日時：2021/12/10 23:09