AjaxでXMLを扱うなら軽量な「JSON」がイイ感じ
Ajax上でのXMLデータの取り扱いについていろいろ調べていくと、どうも「JSONが軽量でいいよ」という話が多いようです。
前の「Ajax.RequestのresponseXMLでXMLが取得できない場合の対処法」でも書きましたが、どうせPHPで中継させなきゃいけないのならJSONで吐き直したほうがイイんじゃないのか?と思いチャレンジする事にw
半年くらい前にちょこっと勉強したんですがもはや忘却の彼方へ...やっぱりブログとかに備忘録として残しておかないとダメですね。
ググりまくっていろんなサイトを調べましたが最も参考になったサイトはこちら
丁寧に解説されていてすごく分かりやすかったです。で、JSONとはいったい何なのか?
[鏡] 入門 JSON -- 戯れ言++端的に言うと「文書やデータの意味や構造を扱うXML形式の書式をJavaScriptの仕様に合わせて超簡単にしました」というカンジでしょうか。
最近 JSON (JavaScript Object Notation)にハマってます。 JSON というのはごく軽量のデータフォーマットで, Javascript (というより ECMAScript と言うべきかもしれませんが)の言語仕様がベースになっています。とはいえ, JSON 自体は Javascript からは独立していますので他の言語(C/C++, Java, C#, Perl, Ruby, Python など)でも問題なく扱うことができます。 JSON は以下の2種類のデータ構造の組み合わせでできています。(JSON フォーマットの詳しい解説をご所望の方は「入門 JSON 2」を参照ください)
- 「名前:値」の組み合わせ(連想配列)。組み合わせ自体をひとつの要素として扱うことができます。
- 要素の順序つきリスト(配列)。リスト全体をひとつの要素として扱うことができます。
XML形式からJSON形式の書式に変える
実際にXML形式とJSON形式でどう書式が違うのか?例えばこんなカンジの音楽CDのXML形式のデータがあったとします。
<ITEMS>
<ITEM>
<ARTIST>Radiohead</ARTIST>
<TITLE>The Bends</TITLE>
<TRACKS>
<TRACK>Planet Telex</TRACK>
<TRACK>The Bends</TRACK>
<TRACK>High and Dry</TRACK>
<TRACK>Fake Plastic Trees</TRACK>
<TRACK>Bones</TRACK>
<TRACK>Nice Dream</TRACK>
<TRACK>Just</TRACK>
<TRACK>My Iron Lung</TRACK>
<TRACK>Bullet Proof... I Wish I Was</TRACK>
<TRACK>Black Star</TRACK>
<TRACK>Sulk</TRACK>
<TRACK>Street Spirit (Fade Out)</TRACK>
</TRACKS>
</ITEM>
<ITEM>
<ARTIST>椎名林檎</ARTIST>
<TITLE>無罪モラトリアム</TITLE>
<TRACKS>
<TRACK>正しい街</TRACK>
<TRACK>歌舞伎町の女王</TRACK>
<TRACK>丸の内サディスティック</TRACK>
<TRACK>幸福論(悦楽編) </TRACK>
<TRACK>茜さす 帰路照らされど...</TRACK>
<TRACK>シドと白昼夢</TRACK>
<TRACK>積木遊び</TRACK>
<TRACK>ここでキスして。</TRACK>
<TRACK>同じ夜</TRACK>
<TRACK>警告</TRACK>
<TRACK>モルヒネ</TRACK>
</TRACKS>
</ITEM>
</ITEMS>これをJSON形式に書き直すとこうなります。あってる...ハズ?
[
{
"ARTIST": "Radiohead",
"TITLE": The Bends",
"TRACKS":
[
"Planet Telex",
"The Bends",
"High and Dry",
"Fake Plastic Trees",
"Bones",
"Nice Dream",
"Just",
"My Iron Lung",
"Bullet Proof... I Wish I Was",
"Black Star",
"Sulk",
"Street Spirit (Fade Out)"
]
},
{
"ARTIST": "椎名林檎",
"TITLE": 無罪モラトリアム",
"TRACKS":
[
"正しい街",
"歌舞伎町の女王",
"丸の内サディスティック",
"幸福論(悦楽編) ",
"茜さす 帰路照らされど...",
"シドと白昼夢",
"積木遊び",
"ここでキスして。",
"同じ夜",
"警告",
"モルヒネ",
]
}
] 超スッキリ♪
連想配列の書式が格段に簡素化されているので、XMLHttpRequestなんかで繰り返し非同期通信を行ったりする際にはサーバ不可もトラフィックも少なくて済むでしょう。
参照するときには「json[1]["TRACKS"][3]」みたいにすれば「幸福論(悦楽編)」という曲名のデータを取り出す事が可能です。
しかし実際問題としてこのJSONの記述がなかなか上手くいかなくて苦労させられました。少しでも書式のミスがあると返事が返ってきませんので...。
もっと丁寧で分かりやすい解説は戯れ言++さんの[鏡] 入門 JSON 2 -- 戯れ言++のページを読んだ方が良いかと思います。
ちなみにPHPからJSON形式のデータを吐き出す際に「header('Content-type: application/json');」とHTTPヘッダにMIMEタイプを書いてたんですが、自分の環境では無くても問題なく稼動いたしました。
逆に入ってるほうが動作が遅いような気がするのは?
<8月21日:追記>
前述のMIMEタイプについてですが、IEなんかで受け取る場合はHTTPヘッダに明示しないとエラーになる場合があるらしいです。
後々問題になるよりも先手を打ってMIMEタイプはしっかり宣言しておいた方が無難かと思われます。
トラックバック(1)
Infinity Dimensions Flickr Photo Stream 知り合いのカメラマン門山さんから「flickrの写真をWebサイトに表示し... 続きを読む