【Rails】Ajax通信についてのまとめ

Ajaxとは

HTMLの読み込みなどをおこなう通信技術のこと。
非同期でJavaScriptによるHTTP通信を行い、HTMLの追加などを行う。
Asynchronous JavaScript and XMLの略。

主に使われる用途としては

HTMLの追加
HTMLの更新
バックグラウンド処理

などがある。

Ajax通信の流れ

通常はクライアントからHTML形式でサーバに対してリクエストが送られるのに対して、AjaxではJavaScript形式でサーバにリクエストが送られる。
サーバーからのレスポンスはXMLファイルやJSONファイル。

Ajaxを使うメリット

Ajaxを利用することでユーザにストレスを与えないWebサイトやアプリを作成するのに役立つ。
通信量を抑制できたり、リクエストやレスポンスによって画面全体ではなく一部だけ更新することができる。

RailsでAjaxを利用する方法

フォーム系のヘルパーメソッドでremote: trueを設定する
jQueryの$.ajax()などで実装する

前者の方法はあまり難しくないがシンプルなことしかできず、後者は難易度が上がるがより複雑な設定を行うことができる。

RailsでAjax通信をする流れ（シンプルな方法）

フォーム系のヘルパーメソッドにremote: trueを設定する（こうすることでリクエストがJavaScript形式で送信される）
フォームに関するコントローラーのアクションが実行される
アクションの処理の中にrenderやredirect_toの記述がなければ「アクション名.js.erb（slim）」が実行される

remote: trueは以下のメソッドのオプションとして使うことができる。

form_with（デフォルトでAjaxになっている）
form_for
form_tag
link_to
button_to

RailsでAjax通信をする仕組み

remote: trueが付くとHTMLタグにdata-remote="true"という属性が付与され、それを元にRailsがAjaxにするか否かを判断してくれる。
form_withにはデフォルトで付いているので、同期通信で利用したい場合はlocal: trueオプションが必要。

流れとしては、コントローラのアクション処理が終わると

JavaScript形式でリクエストを送信した場合 => アクション名.js.slim（erb）が呼ばれる
HTML形式でリクエストを送信した場合 => アクション名.html.slim（erb）が呼ばれる

参考

【Rails】 Ajaxチュートリアル(Rails+jQuery)~処理の流れを理解しよう | Pikawaka