はじめに

Ajaxとう単語をずっとかっこいいと思っていましたが、一度も使ったことがなかったので、実際に使ってみました。
ここでは、Railsでの実装となります。

Scaffoldを使って簡単に実装していきますので、暖かく見守ってください。

今回作るもの

今回作るものはいたってシンプルで、リンクをクリックすると既存のデータをAjaxで取り出すというもの。

jQueryを導入

layoutファイルがあるので、headの中にscriptタグを書きます。
今回はCDNから引っ張ってきました。

app/views/layouts/application.html.erb


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

とりあえず動くアプリを作成

Scaffoldでユーザーリストが表示されるアプリを作ります。

rails g ajax_test
cd ajax_test

rails g scaffold user name:string
rails db:migrate

データを入れる

db/seeds.rb

(1..10).each do |i|
  User.create(name: "ユーザー#{i}")
end

データを流し込んで、しっかりデータが入っていればOKです!

rails db:seed
rails c
> User.count
=> 10

controller

app/controllers/users_controller.rb

def ajax_test
  @user = User.all
  render json: @user
end

root

config/routes.rb

Rails.application.routes.draw do
  resources :users
  get "ajax_test", to: "users#ajax_test"
end

この時点で
http://localhost:3000/ajax_testにアクセスしてみてください。

すると、こんな感じにjsonデータで返ってきてるのがわかると思います。
今回はこれをviewで良い感じに出力できるようにします。

view

remote: trueをつけることで、Ajax通信してくれるようになります。

app/views/users/index.html.erb

<h1>AjaxTest</h1>
<%= link_to "全てのuserを表示", ajax_test_path, {id: "ajax_test", remote: true} %>

<table id="user"></table>

jsファイルを作る

app/assets/javascripts/ajax_test.js.coffee

$ ->
  $("#ajax_test").click ->
    $.ajax
      url: '/ajax_test'
      type: 'get'  #get,postの指定
      dataType: 'json' #レスポンスのデータタイプ指定
      async: true #非同期通信フラグ
    .done (response) ->
      #処理が成功した時の処理
      $("#user").append("<tr><th>名前</th></tr>")
      for i in [0..response.length]
        $("#user").append("<tr><td>" + response[i].name + "</td></tr>")
    .fail (response) ->
      #処理が失敗した時の処理
      alert 'fail'

処理の流れとしては、

ajax_testというidをクリックすると、イベントが呼び出される　
url: '/ajax_test'で、ajax_testにアクセスするとレスポンスとしてjsonデータが返ってくる
通信に成功(done)すると、指定したidに要素 + jsonデータを出力
(失敗したらアラート)

という感じでしょうか。

これでhttp://localhost:3000/usersにアクセスし、リンクをクリックしてみてると、リロードされずに保存された全ユーザーが表示されたかと思います。

まとめ

Ajaxを使うことで、いちいちリロードを待たなくて済むからユーザービリティーが上がるし、すごいなと実感。
(今回の例では逆に使いにくくしてますが)

今後も勉強していきます。