ume

Ajax通信の概要から使うまで

Javascript

対象者

  1. rails tutorialを学んでいる方

Ajax通信とは

⇨一言で言うと「画面の一部分のhtmlを読み込んだり更新したりする」.
詳しくは↓の記事を参考にしてみてください。 loveenglish.hatenablog.com

Ajax通信を使ってみよう

今回はrails tutorial14章を参考にAjax通信を見ていきます。

↓followボタンをクリックする この画面上で起きた変化は2つ

  1. followボタンがunfollowに切り替わる.

  2. followersの人数が１人に増えた. この二つしか変わって無いのにページ全体を作り直している。
    ⇨ユーザーさんにレスポンス待ちの時間が発生し遅いという印象を与えるのでAjax通信を使い画面遷移を高速化する。

Ajax通信のやり方

まずは local: true⇨local: falseに変更

<%= form_with(model: current_user.active_relationships.find_by(followed_id: @user.id),
            html: { method: :delete }, local: false) do |f| %>
  <%= f.submit "Unfollow", class: "btn btn-default" %>
<% end %>

これでjavascriptを使ってhtmlファイルを変更できるようにする。

コントローラーでは

class RelationshipsController < ApplicationController
  before_action :logged_in_user 


  def create
    user = User.find(params[:followed_id])
    current_user.follow(user)

    respond_to do |format|
      format.html { redirect_to @user }
      format.js　#デフォルトではコントローラー名のディレクトリ/アクション名のファイル名を返すのでviews/relationships/create.js.erbを返す
    end
  end
end 
  respond_to do |format|
      format.html { redirect_to @user }
      format.js

この3行を追加する。フロントからのリクエストがhtml形式（http通信）の場合htmlのフォーマットでレスポンスする。

リクエストがAjax通信（javascript形式）の場合javascriptでレスポンスするってこと。

もしjavascriptが動かないために設定すること

config/application.rb
require_relative 'boot'
.
.
.
module SampleApp
  class Application < Rails::Application
    .
    .
    .
    # 認証トークンをremoteフォームに埋め込む
    config.action_view.embed_authenticity_token_in_remote_forms = true
  end
end

create.js.erb作成

$("#follow_form").html("<%= escape_javascript(render('users/unfollow')) %>");
$("#followers").html('<%= @user.followers.count %>');