Ajaxを使った非同期通信の流れ

Ajaxを使った非同期通信の流れ

非同期通信(Ajax)とは？

ブラウザが再読み込みされることなく通信が行われる通信方式
画面をリロードしなくても、情報が反映されるWepアプリケーションの機能！

AsynchronousJavaScriptXML
の略！エイジャックスと読む。
レスポンスのデータに　JSONというデータ形式を使う。

JSONとは？

JavaScriptObjectNotationの略で、データ交換を行うための一種
Rubyのハッシュと同様、キーとバリューの組み合わせ。
例）{ name: “yamada”}みたいな

turbolinksを消す

gemfilre
application.html.haml
application.js

RailsのjQuery導入

gem 'jquery-rails'

application.js

//= require jquery
//= require jquery_ujs

非同期通信の実装の全体の流れ

1，JavaScriptを利用してリクエストを行う
2，コントローラでJSON形式のデータを用意するよう準備
3，レスポンスのためのJSON形式のデータを準備（~~.json.jbuilderファイル）
4，JavaScriptでレスポンスを受け取り、HTMLを構築構築構築〜
5，4番で構築したHTMLをViewにぶち込む。終わり。あら簡単

respond_toとは？

リクエストがHTMLかJSONのレスポンスを求めているのかを条件分岐してくれる。便利必須

コントローラーでJSON形式を受け取れるようにします

def create
  @todo = Todo.create(todo_params)
  respond_to do |format|
    format.html { redirect_to :root }
    format.json 
  end
end

jQueryのデータ取得からajaxに変換まで

$(function () {
  function buildHTML(post) {
    var html = `
    <div class='content'>${post.text}<div>
    `;
    return html;
  }
  $("form").on("submit", function (e) {
    e.preventDefault();
    var formData = new FormData(this);
    var url = $(this).attr("action");
    $.ajax({
      url: url,
      type: "POST",
      data: formData,
      dataType: "json",
      processData: false,
      contentType: false,
    })
      .done(function (post) {
        var html = buildHTML(post);
        $(".contents").append(html);
        $("#post_text").val("");
        $("form").prop("disabled", false);
      })
      .fail(function () {
        console.log("no");
      });
  });
});

オプション 説明
type HTTP通信の種類を記述する。通信方法は、GETとPOSTの2種類がある。
url リクエストを送信する先のURLを記述する。
data サーバに送信する値を記述する。
dataType サーバから返されるデータの型を指定する。

formからsubmitが起きると、thisでformDataを取得する。
urlはthisのactionを参照する。
formDataを使うなら一緒！仲良しの二人
processData: false,
contentType: false,
appendで生成したhtmlをぶち込む。
valで中身を消す
propでボタンを何回でも蘇らせられる（押せるようにできる）