第1回ではJSONPによるAjax実装を取り上げましたが，今回はそこで使ったJSONという表記法と，JSONPというAjax実装手法について解説します。また，jQueryによる簡単なAjaxの実装についても解説します。

JSONってなに？

JSONとは，JavaScript Object Notationの略称です。ECMAScript言語 ECMA-262をベースに作られた，Javascriptオブジェクトの表記法のサブセットです。

JSONは，名前と値のペア，および，順序付きの値という2つのシンプルな構造に基づいて，構造化データを簡潔に表現することができます。

オブジェクト（名前と値のペアの集まり）

JSONでオブジェクトを表現するには，メンバを「{」と「}」で囲みます。複数のメンバは「,」で区切られます。例えば，名前が「color」，値が「green」というメンバを持つオブジェクトを表現するには，次のように記述します。

{"color": "green"}

試しに，このオブジェクトを生成し，アクセスしてみましょう。

// オブジェクトの生成
var obj = {"color": "green"};

// "color" プロパティにアクセス
alert(obj.color);       // "green"

alert(obj["color"]);    // "green"

配列（順序付きの値の集まり）

JSONで配列を表現するには，値を「[」と「]」で囲みます。複数の値は「,」で区切られます。例えば，「red」「green」「blue」という値を持つ配列を表現するには，次のように記述します。

["red", "green", "blue"]

試しに，この配列を生成し，アクセスしてみましょう。

// 配列の生成
var array = ["red", "green", "blue"];


// 配列の各要素にアクセス
alert(array[0]);    // "red"
alert(array[1]);    // "green"
alert(array[2]);    // "blue"

構造化

オブジェクト，配列はネストすることができます。例えば，以下のようにしてオブジェクトを表現することができます。

// オブジェクトの生成
var obj = {
    "title" : "reunion",
    "users": [
        {
            "name": "aoki",
            "code": "0001",
            "age": 34
        },
        {
            "name": "ueno",
            "code": "0002",
            "age": 33
        }
    ]
};


// 各メンバにアクセス
alert(obj.title);            // "reunion"

alert(obj.users[0].name);    // "aoki"
alert(obj.users[0].code);    // "0001"
alert(obj.users[0].age);     // "34"

alert(obj.users[1].name);    // "ueno"

alert(obj.users[1].code);    // "0002"
alert(obj.users[1].age);     // "33"

表記の制約

名前は文字列でなければなりません。かならず「"」で囲みます。

値は，文字列，数値，オブジェクト，配列，真偽値(true，false)，nullのいずれかです。文字列は，「"」で囲まれたUnicode文字の集まりです。数値は，10進数のみ表記できます（整数，浮動小数点）。

基本的にこの表記法がJSONです。とてもシンプルですね。詳細は以下を参照してください。

参考

• JSON
• RFC4627 The application/json Media Type for JavaScript Object Notation (JSON)

Youtube APIのデータフォーマットにjson-in-script（JSONP）を指定すると，このJSONでデータが返ります。Youtubeからのレスポンスデータがどのような構造になっているか，解析してみてください。

なぜJSONを使うのか

Ajaxの「x」は，XMLの頭文字です。もともとは，戻り値の形式としてXMLが想定されていました。Youtubeのレスポンスデータも，何も指定しないとatom（XML）になります。しかしなぜ，XMLではなくJSONを使うのでしょうか（もちろんXMLを使ってもかまいません）。

最大の理由はJavascriptで扱いやすいことです。JSONはJavascriptオブジェクトの表記法のサブセットなので，そのテキストをJavascriptとして評価するだけで扱えるようになります。

現在，JavascriptでXMLを扱う場合は，何かしらのライブラリを介すのが一般的です。ECMAScript for XMLという，ECMAScriptからXMLをネイティブに扱うための言語拡張も仕様化されていますが，対応するWebブラウザはまだ少ないのが現状です。

参考

• Standard ECMA-357 ECMAScript for XML (E4X) Specification