Services_JSON + MochiKitの簡単なサンプル

かんばん＠ＷｅｂでXMLのデータ受け渡しが気に食わない。
php側（サーバ）でテキストデータを読み込んでXML形式に変換、
JavaScript（クライアント）でXMLをパースしてデータを取得する。

通信の為だけにXMLを利用しているし、変換処理が無駄っぽい。

これを解決するのがJSONだが、今さらJSONにするのもなーと思っていましたが
やっぱ他でも使いそうなので勉強がてらに簡単なサンプルを作成してみました。。

まずはPHP側でJSON形式にエンコードしないといけないのですが、
JSONを利用する為に環境まで準備するのはちょっとやだ。
aaa.livedoor.jpにインストールする事もできないし。

なのでPHPで作成したJSONモジュールPEAR::Services_JSONを使うことにする。
ライセンスはBSDなのでたぶん大丈夫。

Services_JSON
http://pear.php.net/pepr/pepr-proposal-show.php?id=198

ほんとはJsphonを使いたかったのですが
エラー処理にPEAR_ErrorStackを使っている為、PEARが入っていないaaa.livedoor.jpでは利用できなかった。
逆にPEARのServices_JSONが単体で利用できるのがちょっとヒニク・・・

使い方は非常に簡単。
インスタンス化してencodeメソッドを呼ぶだけ。

あと、Cntent-typeは下記を参照に設定。

JSONとContent-Type
http://blog.nomadscafe.jp/archives/000578.html

サーバ側：PHP

require_once("./JSON/JSON.php");

$test = array();
$test["a"] = "abc";
$test["b"] = array(2, -3, 500.123, 1000000000000);
$test["c"] = array("key1" => "value", "key2" => "ばりゅう");

header ("Content-type: text/javascript+json; charset=UTF-8");
$json = new Services_JSON();
echo $json->encode($test);

結果はこんな感じで返ってきます。

{"a":"abc","b":[2,-3,500.123,1E+012],"c":{"key1":"value","key2":"u3070u308au3085u3046"}}

※レイアウトが崩れる為、意図的に改行しています。

次にクライアント。一度prototype.jsで実装したのですが
ここもちょっと新しいことしたくて話題のMochiKit。

MochiKit
http://mochikit.com/

クライアント側：JavaScript

function send() {
	var url = "./php/test_json.php";
	var deferred = loadJSONDoc(url);
	deferred.addCallback(callBackFunc);
}

function callBackFunc(obj) {
	var html = "";

	html += decoration("a", obj.a);
	html += decoration("b", obj.b.join(" | "));
	html += decoration("c", obj.c.key1+","+obj.c.key2);

	var element = document.getElementById("disp");
	element.innerHTML = html;
}

function decoration(key, value) {
	return "<p>"+key+":<b>"+value+"</b></p>";
}

これでＯＫ

できたのはココです。
http://f56.aaa.livedoor.jp/~tdnr/lab/json_mochikit/

まだガッツリしたのは組んでないのでアレなんですが、XMLでの受け渡しよりは
楽になる予感が（非常に）します。なのでVer1.0に向けてJSONに作り直すでしょう。

MochiKitはちょっと保留。これだけではprototype.jsと比較するのは困難。
よってクライアント側を作り直すとしてもjsライブラリを変えるかどうかは保留。

どっかでjQueryも評価しないとなー。

参考サイト

Collection & Copy – JSON入門
http://d.hatena.ne.jp/brazil/20050915/1126709945

ふつうのMochiKitプログラミング
http://tokyoenvious.xrea.jp/javascript/Shibuya.js/tt2.html

コメントを残す