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)
