はじめに

非同期通信を学んでいく上で、用語等を中心に整理していきます。
フレームワークはRailsを前提として進めております。
もうすでにご存知の方、省略の仕方等ご存知でしたら、ご教授願います。

非同期通信（Ajax)とは

• リクエスト後にレスポンスが帰ってきた際、ブラウザが再読み込みされること無く通信が行われる通信方法
• 非同期通信　英語では（(Asynchronous JavaScript + XML)となる。　略称Ajax
• Ajaxでは、レスポンスのデータにJSONという形式が使われることが多い。

JSON(JavaScriptObjectNotation)とは

• データ交換を行うためのデータ記述形式の一種
• Rubyのハッシュと同様、キーとバリューの組み合わせでデータを表現する形式

今までの学習からの変化

• 今まではアプリケーションのレスポンスはHTML
  • その場合、ブラウザは全てのHTMLを書き換える。　→　画面が再読み込みされる。

Ajaxの場合

• 主にJSON型でレスポンスが行われる。
• ブラウザではJavaScriptが動作する。

• JavaScriptはサーバーからJSON形式で返されたデータをHTMLに成形、ブラウザを書き換える。

  →　ブラウザの一部だけを更新することが可能になる。

非同期通信の実装ポイント

JavaScriptを用いてリクエストを行う。

デフォルトアクション

• HTMLの要素を操作した際に定められている挙動。

JavaScriptのメソッドを利用してリクエストを送る。

• フォーム要素のデフォルトアクションを無効にする必要がある。

　　→　この時、リクエストに対してのレスポンスはJSON形式で返して欲しい旨をリクエストに含む。

コントローラでJSON形式のデータを用意するよう準備する。

• 同期通信の時は、特に指定もせずともHTML形式のデータを返すようRailsが動いてくれる。
• 非同期通信の時は、リクエストにJSON形式で返して欲しい旨の情報が含まれているため、その場合の対処をコントローラのアクションに明記する必要がある。

レスポンスするためのJSON形式のデータを準備する。

• 同期通信の時は、viewsディレクトリの中に○○.html.erbという形式でHTMLのファイルを準備しておくことでレスポンスとしてHTMLを返すことができた。

• 非同期通信の時は、JSONのデータをレスポンスとして返す必要がある。

  • 短いデータであれば、コントローラ内に直接書くことができるが、同期通信の時と同じように、viewsディレクトリのなかにJSON形式のファイルを準備することもできる。

  →　この時のファイル名は、○○.json.jbuilderという形式となる。

JavaScriptでレスポンスを受け取り、HTMLを操作して表示させたいJSONデータを追加する。

• 同期通信におけるレスポンスは、HTML形式であり、受け取ったHTMLを描画するためにブラウザは一度リロードされる。
• 非同期通信の場合は、ページがリロードされない。
  • 代わりに、レスポンスとして帰ってきたJSONのデータを利用して、HTMLを操作する。

さいごに

日々勉強中ですので、随時更新します。
皆様の復習にご活用頂けますと幸いです。