Ajax(非同期通信)の実装

スポンサーリンク
ajax-非同期通信プログラミング

今回はAjaxについて。

スポンサーリンク

Ajax(非同期通信)の実装

Ajaxとは

リクエスト後のレスポンスが帰ってきたときに「ブラウザが再読み込みされることなく通信が行われる通信方法」

Asynchronous + JavaScript + XML ‘の 頭文字をとって通称Ajax(エイジャックス)と呼ばれる。

ツイッターなどの「いいね !」ボタンはAjax

分かりやすい例で言うとツイッターの「いいね !」ボタンです。

あれって押したときに画面は再読み込みされず「いいね !」の箇所だけ表示が変わりますよね。かつボタンを押したことはしっかりデータベースに保存されています。

Ajaxはユーザー目線便利

いいね !ボタンを押したり、何かクリックするたびにページがリロードされてたらユーザー目線めんどくさいですよね。

結果ユーザーのページの回遊性も上がるしいいことだらけなんじゃないかと。

Ajaxの流れ

JavaScriptでリクエストしJSON形式でレスポンス

デフォルトアクションを無効にし、JavaScriptでリクエストを送ります。

最終的にはJSONというデータ形式でレスポンスを返します。

そうすることでビュー全体を書き換えるのではなく必要なデータのみを変更することができます。

コントローラーにJSONで返して欲しい旨を明記

通常はデフォルトアクションでHTML形式のデータを返すようにRailsが動いているので、コントローラーにJSONで返して欲しい旨を明記する必要があります。

そのときに使われるのが「respond_to」という記述。

レスポンスするためのJSON形式のデータを準備

JSONのデータをレスポンスとして返す必要があるため、viewsフォルダの中に別途「○○.json.jbuilder」という形式のファイルを用意してあげる必要があります。

短いデータであればコントローラ内に直接書くこともできる。

Ajaxメソッド集

respond_to

Railsのコントローラ内で利用できる。

「リクエストがHTMLのレスポンスを求めているのか、JSONのレスポンスを求めているのか」を条件分岐するためのもの。

例)

respond_to do |format|
  format.html { render ... } #こっちがHTML
  rormat.json { render ... } #こっちがJSON
end

preventDefaultメソッド

デフォルトのイベントを止めるときに利用するメソッド。フォームが送信されたときに通信するのを止めたい時などに使う。

例)

$(function() {
  $('.js-form').on('submit', function(e) {
    e.preventDefault();
    let todo = $('.js-form__text-field').val();  
  });
});

$.ajax

jQueryで非同期通信を行うための記述。

$(function() {
  $('.js-form').on('submit', function(e) {
    e.preventDefault();
    let todo = $('.js-form__text-field').val();
    $.ajax({
      type: 'POST',
      url: '/todos.json',
      data: {
        todo: {
          content: todo
        }
       },
       dataType: 'json'
    })   
  });
});
  

入れ子構造でかなり複雑に見えますが、これを日本語に直すと

「通信方法はPOSTで、’/todos.json’というURLに{ todo: { content: todo(テキストフィールドに入力された値)} }を送信する。サーバから値を返す際は、jsonになる。」

といった感じです。

done/fail

先ほどのajaxメソッドの後につける。ajaxメソッドとセットとなるメソッドです。

非同期通信が成功した時と失敗した時にに行う処理を書くことができます。

doneは通信が成功したときにfailは通信が失敗したときに動きます。

例)

.done(function(data) {
  let html = $('<li class="todo">').append(data.content);
  $('.todos).append(html);
  $('.js-form__text-field').val('');
})
.fail(function() {
  alert('error');
});

コメント