0
1

More than 3 years have passed since last update.

Ajax(非同期通信)の基礎知識

Posted at

Ajaxとは

Ajax(エイジャックス)とは、JavaScriptを使用して非同期通信を行う処理です。
基本中の基本ですが、仕組みを理解していれば後々の学習に役に立つと信じてまとめます。

非同期通信の仕組み

非同期通信とは、リクエスト後に、ブラウザが再読み込みされることなく、ブラウザの一部分のみが更新される通信方法のことです。

有名なものだと既読機能、GoogleMapなどもカーソルを移動するだけでブラウザの再読み込みなしで、地図の情報が更新されていきます。

以下は、クリックした時にメッセージがグレーに変わる既読機能の非同期通信処理の流れです。

①HTMLで既読にしたい要素をクリック
②JavaScriptのイベントバンドラーが動き、コントローラーへデータを渡す
③データベースの内容を既読に書き換え、そのデータを取得し、Java Scriptに返却する
④返却されたデータを元にHTMLの情報を書き換える
⑤書き換えられた情報を元にCSSが適用されてメッセージがグレーに変わる

コントローラーのアクションで返却するレスポンスはデータです。
その為、データが返却されるためのURLが必要となります。

エンドポイント

エンドポイントとは、Ajaxでやりとりする時の、データ返却のアクションをするためのURLです。
Ajaxを実現するためには、コントローラーでのレスポンスを、HTMLではなくjsonなどのデータ形式で返却する必要があります。そのデータを取得する時にアクセスするためのURLを、エンドポイントといいます。

また既読機能では、どのメッセージを既読にするかを判別するため、
既読とするメッセージ内容のidというパラメータを渡す必要があります。

非同期通信では、URLパラメーターというものを使用して、サーバーへデータを送ります。

URLパラメーター

URLパラメーターとは、サーバーに情報を送るために記載するURL末尾の文字列のことです。
URLパラメーターは、主に2種類があります。
・queryパラメーター
・pathパラメーター

渡す情報が今回想定しているメッセージのように一意の情報であればpathパラメーターの方が適しているそうです。

データ形式

データ形式とは、コンピューター上でデータをやり取りする際の形式のことです。
先ほどのエンドポイントの説明の中でjson形式でデータを返却する必要があるとしました。

JSON(ジェイソン)とは、データを扱う場合のフォーマットのことで、
他にもフォーマットはありますが、JavaScriptとの相性がよく、JSON人気が高いそうです。

まとめ

本当に基本的なことしか書いていませんが、曖昧な理解になっていた部分もあったので、
実装中に理解が不十分なものはこうしてアウトプットする癖をつけたいと思います。

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1