Ajaxを用いた非同期通信の一連の流れ

Ajax（Asychronous JavaScript XML）とは

• 一言でいうとJavaScriptの機能。
• ページ遷移させることなく、JSを用いて、ページの一部を書き換えることでスムーズなUXを提供するプログラミングの手法。

非同期通信の一連の流れ

• JSイベントの発火

qiita.rb

  $('.js-form'). on('submit', function(e){
    e.preventDefault();
    e.stopPropagation();
    var formData = new FormData ($(this).get(0));
    var path_name = location.pathname;
    $.ajax ({
      type:'POST',
      url: path_name,
      data: formData,
      processData: false,
      contentType: false,
      dataType: 'json'
    })
    .done(function(data) {
      var html = buildHTML(data);
      $('.messages').append(html);
    })
    .fail(function() {
      alert('error');
    });
  });
});

• controllerでアクションが行われ、formatをhtml, Jsonといったデータの形式のどれで返すか決まる

qiitas_controller.rb

  def create
    @message = Message.new(message_params)
    if @message.save
      respond_to do |format|
        format.html { redirect_to :group_messages, notice: "メッセージが投稿されました" }
        format.json
      end
    else
      flash[:alert] = "メッセージを入力してください"
      render :index
    end
  end

• viewの一部が上記で決まったデータ形式で切り替わる。
• 非同期通信完了！！！！