JSONを受信するサンプルを作った。

・del.icio.usのJSON-APIからshokaiのブックマーク一覧を読み込み

・サーバに置いたdel.icio.usのJSONファイルからブックマーク一覧を読み込み

・サーバに置いたGPSデータから位置情報のリストを読み込み

やっと理解できた。

JSONは、JavaScriptObjectNotationの略で、JavaScriptのオブジェクトをテキストデータで表記するためのフォーマット。JSONテキストをJavaScriptでeval()する事で、クラスとして読み込んですぐ使える。

んで、そのJSONは、JavaSciptで別のサーバーにあるデータを取得するのにも使える。

■なぜJSONで通信するのか

AjaxことXMLHttpRequestはセキュリティの為に、クロスドメイン制限がかかっているから。（別のドメイン、つまり別のサーバーにアクセスできない）

だから、JavaScriptで別ドメインのデータを受信するには、XMLHttp+cgiでパイプ処理するか、JSONを使ってクロスドメイン制限を回避する。

Flashもクロスドメイン制限があるけど、crossdomain.xmlを置く事で解決できる。

■2種類のJSON受信方法

.jsファイルの静的読み込みの機能を使う事で、別ドメインのJSONを読み込む事ができる。

また、Ajaxを使うことで動的にJSONを受信する事もできるが、別ドメインのデータは読み込めない。

以下に両方のサンプルを解説します↓↓



■JSONで別ドメインのデータを受信する（静的読み込み）

del.icio.usのJSON-APIからshokaiのブックマーク一覧を読み込み

del.icio.usはJSONでAPI出してる。

普通に


という感じで、javascriptを別ファイルで読み込む。これでデータ受信完了。もうオブジェクトになっています。お疲れ様でした。

あとは、その読み込んだファイルにDelicious.postsという配列が宣言されているので、Delicious.posts[1].d みたいな感じでデータが取り出せる。

というかrun()の前のhtmlファイル読み込まれた時点で受信は終わってるんだけど

/*JSON受信*/

functionrun(){

trace(“run()”);

varurl=”http://del.icio.us/feeds/json/shokai”;

trace(url+”からJSON受信”);

trace(Delicious.posts.length+”件受信”);

for(vari=0;i
trace(“—“+i+”件目”);

trace(“title:”+Delicious.posts[i].d);

trace(“URL:”+Delicious.posts[i].u);

trace(“tag:”+Delicious.posts[i].t);

trace(“—“+i+”件目ここまで”);

}



}

/*デバッグ用*/

functiontrace(str){

$(“debug”).innerHTML=str+”
“+$(“debug”).innerHTML;

}

prototype.jsを使っているが、trace()の中で使ってるだけなので実際必要ない。

■Ajax+JSON（同一ドメインの場合のみ可能）

サーバに置いたdel.icio.usのJSONファイルからブックマーク一覧を読み込み

Ajax.Request()の為だけに、prototype.jsを使う。

まず、del.icio.usのJSONをファイルに保存する。

んでスクリプトと同じサーバーに置く。

あとは、prototype.jsでXMLHttpRequestして、responseTextをeval()してJavaScriptオブジェクトに変換する。もう変数として扱えるようになっている。

/*JSON受信*/

functionreceiveJson(){

trace(“receiveJson()”);

varurl=”./shokai.js”;

trace(url+”からJSON受信”);

newAjax.Request(url,{method:’get’,onComplete:receiveJsonComplete});

}

/*JSON受信完了したとき*/

functionreceiveJsonComplete(httpObj){

trace(“receiveJsonComplete()”);

vardata=eval(httpObj.responseText);

trace(“解析完了、”+data.length+”件受信”);

for(vari=0;i
trace(“—“+i+”件目”);

trace(“title:”+data[i].d);

trace(“URL:”+data[i].u);

trace(“tag:”+data[i].t);

trace(“—“+i+”件目ここまで”);

}

}

あと、GPSのデータを読み込む事もできた。これはおいおい…

→サーバに置いたGPSデータから位置情報のリストを読み込み

■JSONの利点と欠点

というわけで、JSONを静的／動的(ajax)に読み込んでみた。

静的に、つまり