getJSONを使うためのクライアントサイド/サーバーサイドの実装

javascript


JQueryにはgetJSONという便利なメソッドがあるのだが、
クライアントサイド/サーバーサイドの双方から使い方を解説している記事を見かけなかったので、
メモとして残しておく。


例えばサーバーから以下のようなjsonオブジェクトを取得したいとする。

{　'title' : 'foo',　id' : 'foo_id'　}

クライアントからの呼び出しは、例えばこうなる。

var CGI_URL = "http://example.com/cgi";
$.getJSON( CGI_URL + "?callback=?", null, function( data, status ){
  document.body.innerHTML = "<h1>" + data.title + "<h1>" + data.id
}

jsonが取得できるとコールバックが呼ばれる。
dataが取得したjsonオブジェクト、statusがリクエスト結果を表す文字列。

「callback=?」の部分はJQueryによって適当な関数名、例えばjQuery15019275276153348386_1303305468939に置き換えられる。

サーバー側にはcgiパラメータcallbackが渡されてくるので、それを使ってこんなjavascriptを返す。

jQuery15019275276153348386_1303305468939({　'title' : 'foo',　id' : 'foo_id'　})

これをクライアントサイドで実行すれば、jQuery15019275276153348386_1303305468939に格納されたコールバックがjsonを引数にして呼び出される。
(実行はJQueryが勝手にやってくれる)

これを実現するサーバーサイドの実装はこうなる。(ruby)

require "cgi"
cgi = CGI.new
print "Content-Type: application/javascript;charset=utf-8\n\n"
print cgi["callback"] + "({ 'title' : 'foo', 'id' : 'foo_id' })"

cgiパラメータとして渡されてきたcallbackをjsonを引数にして呼び出すjavascriptを返しているだけ。