JSON で実現する快適な Ajax

AJAX で JavaScript でサーバからの出力を解釈する際に、最も用意にパースできる出力形式として、JSON(JavaScript Object Notation)形式があります。出力が XML ではなくなるため、厳密には Ajax(Asynchronous JavaScript + XML)ではなくなりますが、JSON を利用することで、JavaScript でのパース作業が格段に容易になる上、クロスドメイン呼び出しが可能になるというメリットがあります。
 
基本的な文法についてはこちらが参考になりますが、大体このようになります。

var person = {
      name: “John”, // name プロパティ
      age: 30,
      family: [ // 配列
        {name: “Jane”, age: 24}, // 配列内オブジェクト
        {name: “Richard”, age: 1}
      ]
   };
// 参照例
alert(person.name); // John が出力される
alert(person.family[0].name); // Jane が出力される

 
JavaScript で動的利用する場合、
– JavaScript – JSONでデータを受信する方法2種類(s.h.log)
– dojo toolkit の ScriptSrcIO(snippets from shinichitomita’s journal)
が参考になります。
これを PHP で生成する場合、PHP 5.2.0 以降デフォルトで組み込まれるようになったJSON関数(PECL:php-json)を利用します。日本語使用時の注意として、json_encode に渡す文字列の文字コードは UTF-8 にする必要があります。

  echo json_encode(array(“name”=>”John”, “age”=>30));

また、JSONP (JSON with Padding) という手法により、サーバ側からクライアントに対し非同期コールバック関数を実行させることができます。
リクエストURL:

http://foo.example.com/api/person?name=John&callback=myPersonHandler

リクエスト結果:

myPersonHandler({name: “John”, age:30});

埋め込む HTML:

<script type=”text/javascript” src=”http://foo.example.com/api/person?name=John&callback=myPersonHandler” charset=”UTF-8″><!–
    function myPersonHandler(result){
        alert(result.name + ” is ” + result.age + “years old”);
    }
//–></script>

こうすると、サーバからの結果の出力完了後に自動的に myPersonHandler が呼ばれるようになります。なお、myPersonHandler という関数名は、リクエストURL の callback パラメータを元にしているため、クライアント側で任意の関数に置き換えることが可能です。
 
参考:
– PHP で JSON(Do You PHP?)
– Collection & Copy – JSON 入門
– JavaScript – dojo の ScriptSrcIO で動的クロスドメイン JSON 読み込み
– JSONP とコールバック関数(戯れ言++ – 入門 JSON 3)