フレームワークのjavaScriptについて

教えてください。プログラミング初心者です。
フレームワークのjavascriptでprototypejsやbackbonejsなどあるかと思いますが、サーバーからのレスポンスをどの様なかたちで受け取って処理するのか、何がメリットなのかあまりイメージができていません。
またオブジェクト指向のjavascriptという点についてもサーバーとの連携でメリットがあるのかも分かりません。何か具体的に教えてください。

質問者からの補足コメント

• サーバーサイドはJavaやPHPです。

    補足日時：2021/12/22 00:52

No.2 回答者： fujillin 回答日時： 2021/12/22 22:35

こんばんは

詳しい回答が既にされていますので、使用している一例を・・

googleなどの地図サービスをご覧になったことがあると思いますが、
　・表示位置を移動する
　・拡大・縮小する
　・地図と航空写真を切り替える
などの操作をユーザが行った際に、必要となる（追加の新しい）情報をリクエストして表示していると考えられます。

拡大・縮小の際には、縮尺によって表示している地図全体を入れ替えたりしていますし、地図と写真の切り替えの場合も同様ですね。
付帯的に表示されている、特定スポットの情報なども同様に受信しているものと考えられます。

一方で、操作に応じて新しいURLに遷移するような方式だったとすると、都度、画面全体が書き直しになるので、チラつきの原因にもなりますし、閲覧者にとって必ずしも見やすくはないことが想像されます。
仮に、通信環境が悪い場合でも、部分的なリクエストであれば、その部分の表示に若干の時間がかかるものの、全体構成の表示は保たれますので、比較的スムーズに閲覧ができるものと思います。

No.1 回答者： naktak 回答日時： 2021/12/22 11:57

ajax、非同期通信と呼ばれる手法を利用することで、ページ遷移をすることなくサーバーサイドへ通信し、制御を行うことができます。

これによって、例えば、下記のようなことがブラウザがフリーズすることなく行えます。
　・プルダウンA、プルダウンBがあり、プルダウンAの選択に応じて
　　プルダウンBの選択肢が変わる。
　・処理中のローディングを画面に表示し、データの登録処理などが
　　完了したらローディングが消えて、「登録しました」のメッセージ
　　を表示する。

これ自体はフレームワークがなくてもできますが、まぁフレームワークを使うことが大半ですね。

ではどうやってデータを通信するのかですが、当たり前ですが、クライアントからのリクエストとサーバーからのレスポンスがあります。
フレームワークによって構文は違うので、フレームワークの作法に応じてデータの送受信を行います。

リクエスト
　通常の画面遷移（<form type="submit">）と同じです。
　GETによる通信なら、URLにパラメータが付与される形になります。
　POSTによる通信なら、必要なデータをPOSTデータとして設定します。
　POSTデータは、様々な制御をした上で、JSONとしたり、
　それは設計に応じて行えばいいです。

レスポンス
　非同期通信なわけですから、レスポンスは画面を表示するための
　HTMLではありません。
　今の時代、大抵がJSON形式となります。
　クライアントは受け取ったJSONを解析して制御することになります。
　サーバーサイドは、レスポンスをJSONとして返却する形になります。
　様々なエラーが発生した場合はHTTPステータスコードを状況に
　応じたもので返却する必要があります。
　200 OKではなく、400 Bad Request、401 Unauthorized、
　403 Forbidden、500 Internal Server Errorなど。

なお、Webシステム全体としては、URLとリクエストデータが分かってしまえば、ブラウザやpostmanなどのWebAPI通信を実施できるツール、悪意のあるスクリプトなどからリクエストして処理ができてしまいます。
無条件公開して問題ないものは、リクエストの検証がしっかり行われていれば問題ありません。
しかし、そうでないものもあります。
　・ユーザー認証などがされていないと処理が動作して欲しくない
　・特定画面からの特定操作が行われないと動作して欲しくない
といったものがそれに当たります。
それらは、処理が許可されるべきものなのかというセキュリティ制御を、トークンやそれに紐づく認証情報などを利用して、サーバーサイドとして実装する必要があります。