JSON|Ajax入門|Ajaxの基礎と応用の学習|StudyNet

JSON

JSONとは、JavaScript Object Notationの略で、テキストデータフォーマットの一種です。JavaScriptで扱いやすいという理由で、Ajaxのデータ交換フォーマットとして広く利用されています。

JSON形式のデータは、JavaScriptのeval()関数で簡単にJavaScriptオブジェクトに変換出来るために、XMLなどよりも広く使われています。JSONは、JavaScriptだけでなく、様々な言語で取り扱えるように各言語で専用の関数などが用意されています。

JSON形式の基礎：

オブジェクトは、{}で囲む
キーと値のペアで記述、キーは文字列のみ:{key:value}
複数のペアが有る場合は、カンマでつなげる:{key1:value1, key2:value2, key3:value3}
値の部分を配列にする場合は、配列を[]で囲む:{key:[arr1,arr2,arr3]}
データ（値）は、数値、文字列、真偽値（true、false}、配列、オブジェクト、nullが使える
文字列はダブルクオートで囲む。特殊文字（改行、タブ、ダブルクオートなど）は、バックスラッシュ（\）でエスケープする。
オブジェクトや配列を入れ子にして使うことができる

[サンプル]

JSON形式のファイル（画像ファイル名を記述）をprototype.jsを使って読み込み、eval()関数を使ってオブジェクト化する例（HTMLの部分は省略）。urlには、JSON形式のファイル名が引数として渡されます。

JSON形式のサンプル

{"pictures": [
    {"picture": "images/pic01.jpg"},
    {"picture": "images/pic02.jpg"},
    {"picture": "images/pic03.jpg"}
]}

JavaScript

function getJSON(url)
{
    new Ajax.Request(url,
                    {method: 'get',
                    onComplete: showPhoto
                    });
}

//画面に出力
function showPhoto(request)
{
    //alert(request.responseText);
    eval("var data = " + request.responseText);
    $("res").innerHTML = "";
    for(var i = 0; i < data.pictures.length; i++) {
        $("res").innerHTML += " “;
    }
}