jQueryではじめるAjax

第2回 jQueryによるAjax実装

この記事を読むのに必要な時間:およそ 7 分

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

JSONってなに?

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

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

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

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

{"color": "green"}

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

リスト1

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

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

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

配列(順序付きの値の集まり)

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

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

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

リスト2

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


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

構造化

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

リスト3

// オブジェクトの生成
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です。とてもシンプルですね。詳細は以下を参照してください。

参考

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ブラウザはまだ少ないのが現状です。

参考

著者プロフィール

池田正一(いけだまさかず)

仕事ではもっぱらJavaを使い,たまにC/C++を書かされ,WebサービスをRubyで開発するプログラマ。ドラえもん好きでドラえもんSuperDatabaseの管理人。stacktrace.jpにて頭の中のStackを出力中。

コメント

コメントの記入