Ajaxの実装
こんにちは、りゅうじです。
Ajaxについて学習した事のまとめです。
Ajaxとは
読み方:一般的にはエイジャックス
ウェブブラウザ内で非同期通信を行いながらインターフェイスの構築を行うプログラミング手法である。XMLHttpRequest（HTTP通信を行うためのJavaScript組み込みクラス）による非同期通信を利用し、通信結果に応じてダイナミックHTML (DHTML) で動的にページの一部を書き換えるというアプローチを取る。
AjaxはAsynchronous JavaScript And XML の略 ※ウィキペディア参照
簡単にわかりやすく言うと
サーバにHTML形式ではないリクエストを送信し、ページ全体を再読み込みせずに、サーバからの取得データとJavaScriptでページの一部分だけを更新する事ができる。
SNSの いいねボタン はページの再読み込みなしでいいね！の数だけ増えるじゃないですか！あれです！
いいね！ボタンを押した時の流れ
1.「いいね」ボタンを押す
2.js形式でリクエストが飛ばされる
3.コントローラーのcreateアクションが動き、いいねが保存される。モデルを介してデータベースに追加される(リロードせずに)
4.更新したい部分のページcreate.js.erb,destroy.js.erbがレスポンスとして返される。
Railsの中でAjaxを使うには
Railsには簡単にリクエストを送信させられる便利なヘルパーがあります。
form_with
デフォルトでAjaxを使えます。
使わない場合は local: true を入れる必要があります。
#どこかのview
<%= form_with model: @test do |f| %>
このように何も特に記載する事なく自動的に remote="true"となりAjaxを使えます。
link_to
remote: true を入れる事でAjaxを使えます。
#どこかのview
<%= link_to 'リンク名', @test, remote: true %>
これで remote="true"となりAjaxを使えます。
button_to
こちらは link_to と同様の方法で Ajaxで使えます。
ちなみに link_to との記載上の違いは
methodの指定を
何も記述しない場合のhttpリクエストが link_to だと get になって、button_to だと post になるという違いです。
js.erbファイルの実装
流れの説明の中に出てきた
4.更新したい部分のページcreate.js.erb,destroy.js.erbがレスポンスとして返される。
の部分ですね。
コントローラの該当アクションと結びつく.js.erbファイルを実装します。
#該当のjs.erb
$("#id名").html("<%= j(render 'test/test') %>");
初見だと私はよくわかりませんでした。
一つずつ見ていきましょう
初めの "#id名" ですが
#htmlからの場合
<div class=“alert alert-danger”, id=“error_messages”>
#form_withからの場合
<%= form_with model: @test, id: 'new_comment' do |f| %>
htmlからの場合 id=“error_messages” が該当し、 "#error_messages" が
form_withから場合
id: 'new_comment' を追加で指定する事で "#new_comment" として使えます。
この先頭の # は id で使用します。
class では . になります。
どちらでも動かせるのですが
id を使用する方が望ましいです。理由は idは同一ページに一箇所しか存在しないので処理が高速化されるからです。
htmlメソッドは、指定した要素("id名")の内容を置き換えています。
指定したid自体は変わりません。
https://js.studio-kingdom.com/jquery/manipulation/html
またhtmlメソッドと同じ記載場所にreplaceWithメソッドを使用する事もできます。
jQuery日本語リファレンス
http://semooh.jp/jquery/api/manipulation/replaceWith/content/
こちらはid自体を変えてしまう事ができます。
j(render は excape_javascript(render のalias(別名)です。
簡単に言うと js.erb の中でパーシャルを呼び出す時に使うと覚えておけば十分かと。
最後に
読んで頂いた方、ありがとうございました。
