Railsにおける非同期通信

3548 ワード
JavaScript JSON Rails Ajax Jbuilder JavaScript テキストリンク

非同期通信(Ajax)とは

ブラウザが再読み込みされること無く通信が行われる通信方法です。
ex.メッセージを投稿→画面をリロードしなくても反映される

JSONとは

データ交換を行うためのデータ記述形式の一種で、キーとバリューの組み合わせでデータを表現します。
AjaxでJSONという型でレスポンスが行われ、ブラウザではJavaScriptが動作しサーバからJSON形式で返されたデータをHTMLにつくりブラウザが書き換えられます。
これらにより、ブラウザの一部だけを更新することができるようになります◎

ポイント
①　JavaScriptのメソッドを利用してリクエストを送る。
②　コントローラでJSON形式のデータを用意するよう準備（コントローラーにアクション記述）
③　レスポンスするためのJSON形式のデータを準備（json.jbuilder）
④　JavaScriptでレスポンスを受け取り、HTMLを操作して追加

非同期通信の実装

respond_toメソッドを使用します!
リクエストがHTMLか、JSONかを条件分岐してくれます

respond_to do |format|
  format.html { render ... } # HTMLリクエストのときにに呼ばれる
  format.json { render ... } # JSONリクエストのときに呼ばれる
end
  • 以下のようにレスポンスできるようにhogesコントローラーに記述していきます リクエストされたformatによって処理を分けます
def create
  @hoge = モデル名.create(hoge_params)
  respond_to do |format|
    format.html { redirect_to :root }
    format.json { render json: @hoge} #jsファイル側で作成した@hogeを使用するためにrenderメソッドを使用し、作成したhogeをjson形式で返すようにする
  end
end

  • assets/javascripts配下にhoge.jsファイルを作成する

  • 非同期通信でリクエストする

$(function() {
  $('.js-form').on('submit', function(e) {
    e.preventDefault();
    var hoge = $('.js-form__text-field').val();
    $.ajax({
      type: 'POST',
      url: '/hoges',
      data: {
        hoge: {
          content: hoge
        }
      },
      dataType: 'json'
    })
    .done(function(data) {
      var html = $('<li class="hoge">').append(data.content);
      $('.hoges').append(html);
      $('.js-form__text-field').val('');
    })
    .fail(function() {
      alert('error');
    });
  });
});
オプション 詳細
Type HTTP通信の種類を記述する。（GET、POST）
url リクエストを送信する先のURLを記述
data サーバに送信する値を記述する
datatype サーバから返されるデータの型を指定

挙動確認

htmlを生成するvar html = $('

').append(＊＊＊.content);という処理をメソッドにして切り出します。 
$(function() {
  function buildHTML(hoge) {
    var html = $('<li class="hoge">').append(hoge.content);
    return html;
  }

  $('.js-form').on('submit', function(e) {
    e.preventDefault();
    var hoge = $('.js-form__text-field').val();
    $.ajax({
      type: 'POST',
      url: '/hoges',
      data: {
        hoge: {
          content: hoge
        }
      },
      dataType: 'json'
    })
    .done(function(data) {
      var html = buildHTML(data);
      $('.hoges').append(html);
      $('.js-form__text-field').val('');
    })
    .fail(function() {
      alert('error');
    });
  });
});

再度挙動確認して完了です！

C++Primer第2章