【JavaScript】 MooTools：Json.Remoteを使ってみる
2007.09.05 Author: たわばがに
前回に引き続き、MooTools のお話です。
今回は、Json.Remote オブジェクトを使ってみます。
JSON とは、JavaScript Object Notation の略称で、 データ交換フォーマットの一つです。
名前からして、JavaScript専用であるかのように感じますが、
あくまでデータフォーマットなので、当然、他の言語でも使用できます。
データの簡単な例は↓です。
(例)
{"名前":"たわばがに", "職業":"へっぽこエンジニア", "好きな動物":"ネコ"}
当然ですが、階層構造にすることも可能です。
(例)
{
"たわばがに" : {
"職業" : "へっぽこエンジニア",
"好きな動物" : "ネコ"
},
"あべしえび" : {
"職業" : "へたれデザイナー",
"好きな動物" : "イヌ"
}
}
Json.Remote オブジェクトを用いると、サーバサイドのスクリプトと JSON 形式のデータを
簡単にやりとりすることができます。
いつものごとく、簡単なサンプルを作成してみました。
今回は、Json.Remote オブジェクトを使ってみます。
JSON とは、JavaScript Object Notation の略称で、 データ交換フォーマットの一つです。
名前からして、JavaScript専用であるかのように感じますが、
あくまでデータフォーマットなので、当然、他の言語でも使用できます。
データの簡単な例は↓です。
(例)
{"名前":"たわばがに", "職業":"へっぽこエンジニア", "好きな動物":"ネコ"}
当然ですが、階層構造にすることも可能です。
(例)
{
"たわばがに" : {
"職業" : "へっぽこエンジニア",
"好きな動物" : "ネコ"
},
"あべしえび" : {
"職業" : "へたれデザイナー",
"好きな動物" : "イヌ"
}
}
Json.Remote オブジェクトを用いると、サーバサイドのスクリプトと JSON 形式のデータを
簡単にやりとりすることができます。
いつものごとく、簡単なサンプルを作成してみました。
HTML、サーバサイドのPHPスクリプト、共に文字コードはUTF8で記述します。
まずHTMLは以下の通り。
PHP5.2.0以上であれば、デフォルトで組み込まれている php-json を使えばよいですが、
それ以前のバージョンの場合、導入も簡単な PEAR::Services_JSON あたりを使うのがオススメです。
今回は PEAR::Services_JSON を使用しています。
サーバに設置します。（全て同じディレクトリ内に設置）
PHPスクリプトを見れば、何を行っているのかおおよそ見当はつくかと思います。
HTML側から送信された JSON 形式のデータ「name」が「hoge」であるかないかで、
出力する JSON 形式のデータを切り替えます。
今回のスクリプトの場合は「name」が「hoge」なので、上側のデータが出力されます。
今回の肝としては、HTML側の以下の部分。
'data.php'がデータを送受信するURL、onComplete: はサーバサイドスクリプトからのデータを受け取った時点で行う処理(関数)を指定します。
なお、無名関数に渡されている data には、サーバサイドから受け取った JSON 形式のデータが格納されています。
故に、data.A には「あ」、data.B には「い」、data.C には「う」が格納されます。
とりあえず、ここまで理解できれば、前回同様に簡単な Ajax アプリが作れそうですね。
やりとりするデータ項目が多かったり、複雑だったりする場合、
こちらの方が圧倒的に使い勝手がいいような気はします。
以上、偏った MooTools ネタでした。
名古屋のWebシステム開発・ネットワーク構築会社 コネクティボへ
まずHTMLは以下の通り。
<html>
<head>
<script type="text/javascript" src="mootools_v1_11.js"></script>
<script type="text/javascript">
<!--
function test() {
// 取得
var jSonRequest
= new Json.Remote(
"data.php",
{onComplete:
function(data) {
document.getElementById("A").innerHTML = data.A;
document.getElementById("B").innerHTML = data.B;
document.getElementById("C").innerHTML = data.C;
}
}).send({'name': 'hoge'});
}
//-->
</script>
</head>
<body onLoad="test()">
<div id="A">Aデータ</div>
<div id="B">Bデータ</div>
<div id="C">Cデータ</div>
</body>
</html>
続いてサーバサイドのPHPスクリプト。PHP5.2.0以上であれば、デフォルトで組み込まれている php-json を使えばよいですが、
それ以前のバージョンの場合、導入も簡単な PEAR::Services_JSON あたりを使うのがオススメです。
今回は PEAR::Services_JSON を使用しています。
<?php
require_once('JSON.php');
$json = new Services_JSON();
$data = $json->decode($_POST['json']);
if ($data->name == 'hoge') {
$obj = array('A'=>'あ','B'=>'い','C'=>'う');
} else {
$obj = array('A'=>'abon1','B'=>'abon2','C'=>'abon3');
}
// 出力
echo $json->encode($obj);
この2つのファイルと、Json.Remote オブジェクトを含んだ MooTools の本体をサーバに設置します。（全て同じディレクトリ内に設置）
PHPスクリプトを見れば、何を行っているのかおおよそ見当はつくかと思います。
HTML側から送信された JSON 形式のデータ「name」が「hoge」であるかないかで、
出力する JSON 形式のデータを切り替えます。
今回のスクリプトの場合は「name」が「hoge」なので、上側のデータが出力されます。
今回の肝としては、HTML側の以下の部分。
var jSonRequest
= new Json.Remote(
"data.php",
{onComplete:
function(data) {
document.getElementById("A").innerHTML = data.A;
document.getElementById("B").innerHTML = data.B;
document.getElementById("C").innerHTML = data.C;
}
}).send({'name': 'hoge'});
この部分でサーバサイドスクリプトと JSON 形式データのやりとりを行っています。'data.php'がデータを送受信するURL、onComplete: はサーバサイドスクリプトからのデータを受け取った時点で行う処理(関数)を指定します。
なお、無名関数に渡されている data には、サーバサイドから受け取った JSON 形式のデータが格納されています。
故に、data.A には「あ」、data.B には「い」、data.C には「う」が格納されます。
とりあえず、ここまで理解できれば、前回同様に簡単な Ajax アプリが作れそうですね。
やりとりするデータ項目が多かったり、複雑だったりする場合、
こちらの方が圧倒的に使い勝手がいいような気はします。
以上、偏った MooTools ネタでした。
名古屋のWebシステム開発・ネットワーク構築会社 コネクティボへ
