« Flex2の入力値チェック | トップページ | ASP.NETでページの多言語化 »

2006年8月 4日 (金)

AjaxでJSONを利用する

このところFlex2のネタばかりでしたので、久しぶりにJavaScriptのネタです。
AjaxでJSONを利用するサンプル

Ajaxでデータを受信する際、構造化されたデータが欲しい場合は多いです。
Ajaxの"x"はXMLのXなので、XMLデータを使うのが王道なのかもしれません。
実際、XMLデータは色々な環境で利用できますし、構造を定義しやすいのですが、JavaScript標準の機能のみで処理するのはとても面倒です。
このような場合、JSONというフォーマットが便利です。
JavaScriptでは、オブジェクトを生成する際に、
var data = 
{
    title : 'Title',
    url : 'URL'
};
のように記述することが出来ます。
この title や url は data のプロパティとなり、data.title や data["title"] のようにアクセスできます。
上記のサンプルの { から } までの部分の記述をJSONと呼び、JavaScriptではこの形式のデータをテキストとして受信した後、eval関数を使って 動的にオブジェクトを生成することが出来ます。

実際にAjaxで受信したJSONデータからオブジェクトを生成するサンプルは以下のようになります。
Ajaxの通信にはprototype.jsを利用しています。
var url = 'json.txt';
var opts = {
    method : 'get',
    onComplete : showData
};

new Ajax.Request(url, opts);


function showData(r)
{
    var data = eval('(' + r.responseText + ')');
    alert(data.title);
}
とても簡単ですね。
JSON を eval に渡す際には ( ) で囲む必要があります。

XMLほど汎用的でなくてよいと割り切るなら、JSONも検討してみてはいかがでしょうか。
ただし、JavaScriptとしてそのまま実行されてしまいますので、注意は必要です。

|

« Flex2の入力値チェック | トップページ | ASP.NETでページの多言語化 »

コメント

コメントを書く



(ウェブ上には掲載しません)




トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/12438/11252797

この記事へのトラックバック一覧です: AjaxでJSONを利用する:

» AjaxでJSONを利用する [ecko2187]
nice.. [続きを読む]

受信: 2006年8月 4日 (金) 05時29分

« Flex2の入力値チェック | トップページ | ASP.NETでページの多言語化 »