大学生からの Web 開発

廃れない技術よ 我が身に

Sinatra & jQueryで、JSONを扱ったAjaxをしてみよう

Ajaxを扱ったことがなかったのと、これの前のエントリーでJSONについて書いたのでそれの自己解決のための記事です。

Ajaxとは何か

Ajaxってのは非同期的に処理をして動的に処理をしてくれる技術です。Twitterでツイートしたらページが遷移することなく更新されるアレ。

実際にやってみよう

「Just F**king Do It(とにかくやれ)」の精神で、実際にやってみましょう。タイトルの通り、SinatrajQueryを使います。SinatraでJSONを生成して、jQueryAjaxを利用した処理を行います。

どんなのを作るか

f:id:karur4n:20131023205436p:plain

こんな感じ。フォームに名前を入れたら、フォームに入れた名前と年齢として0~99までの乱数がJSONで返ってきて、それを表示。

サーバサイド

app.rb
require 'bundler'
Bundler.require
# Bundler使わない人はこっち
# gem 'sinatra'
# gem 'sinatra-reloader'
# gem 'slim'

get '/' do
  slim :index
end

get '/member/:name' do
  member_age = rand(100)
  content_type :json
  data = {name: params[:name], age: member_age}
  data.to_json
end

/member/:nameにアクセスしたらJSONが返ってきます。/member/Davidとか/member/karuranとか。

してどういう処理をして返しているのか。
content_type :jsonと書くとリソースのタイプをSinatraがjsonにしてくれるんで、あとはRubyto_jsonメソッドでハッシュをjsonに変換するだけ。これでOK。ちなみにテンプレートにはslimを使いました。すごく書かされた感があったけど、タイプが減って楽ではある。

index.slim
doctype html
html
  head
    meta charset="utf-8"
    title ajaxSample
  body
    h1 ajaxSample
    input#member_name type="text"
    input#load type="button" value="読み込む"
    #result
    script src="jquery.min.js"
    script src="main.js"

htmlに直すとこう。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>ajaxSample</title>
</head>
<body>
  <h1>ajaxSample</h1>
  <input type="text" id="member_name">
  <input type="button" id="load" value="読み込む">
  <div id="result"></div>
  <script src="jquery.min.js">
  <script src="main.js">
</body>
</html>

クライアントサイド

main.js
$(function(){
  $('#load').click(function(){
    var member_name = $('#member_name').val();
    $.ajax({
      type: 'GET',
      url: 'http://localhost:4567/member/' + member_name,
      dataType: 'json',
      success: function(json) {
        $('#result').append('<ul><li>' + json.name + '</li><li>' + json.age + '</li></ul>');
      },
      error: function() {
        $('#result').append('error');
      }
    });
  });
});

ぶっちゃけJavaScriptをまともに書いたことがないんで検索しながらのコーディング。

注目は$.ajaxっていう関数。jQueryの。使っているオプションは以下。

  • type: リクエストがGETってことを明示。デフォルトが'GET'なんでなくてもいい。
  • url: 通信先のURL。
  • dataType: 受け取るデータの型を指定する。ここではjson。
  • success: 通信成功した時に呼び出す関数の指定。関数の第一引数に受け取ったデータが入ります。
  • error: 通信が失敗した時に呼び出す関数の指定。

オプションについてはここでまとめられています。
jQuery.ajax(options) - jQuery 日本語リファレンス

できました。あとは実際に確認してみましょう。ChromeはローカルでAjax処理ができないんで注意。

GitHubも見てね。
karuran/ajaxSample · GitHub

まとめ

SinatrajQuery便利だなー。

サーバはJSON投げるだけ、JavaScriptでDOMを構築してAjaxバンバン、みたいなアプリケーションが流行りらしいんで早くモノにしたいです。

参考リンク

1分でわかるjQuery $.ajaxによるJSON・JSONP読み込み方法 | iwb.jp
jQuery.ajax(options) - jQuery 日本語リファレンス