Sinatra & jQueryで、JSONを扱ったAjaxをしてみよう
Ajaxを扱ったことがなかったのと、これの前のエントリーでJSONについて書いたのでそれの自己解決のための記事です。
Ajaxとは何か
Ajaxってのは非同期的に処理をして動的に処理をしてくれる技術です。Twitterでツイートしたらページが遷移することなく更新されるアレ。
実際にやってみよう
「Just F**king Do It(とにかくやれ)」の精神で、実際にやってみましょう。タイトルの通り、SinatraとjQueryを使います。SinatraでJSONを生成して、jQueryでAjaxを利用した処理を行います。
どんなのを作るか
こんな感じ。フォームに名前を入れたら、フォームに入れた名前と年齢として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にしてくれるんで、あとはRubyのto_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も見てね。
https://github.com/karuran/ajaxSample
まとめ
サーバはJSON投げるだけ、JavaScriptでDOMを構築してAjaxバンバン、みたいなアプリケーションが流行りらしいんで早くモノにしたいです。
参考リンク
1分でわかるjQuery $.ajaxによるJSON・JSONP読み込み方法 | iwb.jp
jQuery.ajax(options) - jQuery 日本語リファレンス