ウェブでデータを扱う場合のメモです。
JSON
JavaScriptのオブジェクトデータをそのままString表現できますので、ウェブ界隈では人気のデータ形式です。
詳細は後で記載
JSONデータの授受
XHR：バックエンドでサーバーとのデーター授受が容易にできる
JSONP：クロスドメインでのデータが読み込みが容易
postMessage：ブラウザサイドでウェブページ間のデータ授受が容易
XML
XML制定中には期待をもたせる様な記事が花盛りでした。
そして一時はウェブでも盛んに使われ始めましたが、JavaAcriptでは扱いづらい事もあり今は下火です。
※このメモは書きかけです！！、こんどまたXML使う機会があったら加筆・・・するかな？
XML → DOM → JSON → DOM → XML
「XML String ⇔ DOM Tree」の変換は標準APIで出来ますが、DOM TreeはJavaScriptでデータとして扱うは少々面倒です。この点がウェブ界隈でJSONに主流の座を奪われてしまった理由かもしれません。
しかしXMLはデータ授受の書式としてそれなりに普及していますので、ウェブ以外のシステムとのデータ授受には必要な知識です。
データと扱うにはXML DOM Treeのままでも扱えますが、DOMのAPIを駆使しなければならず、そのコードの可読性も良いとは言えません。
そこでXML DOM TreeからJSON Obejectに変換して扱う方が楽です。この変換には標準APIはありませんが、先人達の知恵を使わせてもらうことで簡単にできます。
巷のノウハウを読むと、以下の表現が区別されずに解説されていたりしますので、少し頭の中で整理してみました。
・Web上のXML String ⇒ XML DOM Tree (XMLHttpRequestでresponseTypeにdocument)
・XML String ⇒ XML DOM Tree (window.DOMParser)
・XML DOM Tree ⇒ JSON String (xml2json.js)
・JSON String ⇒ JSON Object (JSON.parse)
・JSON Object ⇒ XML DOM Tree (json2xml.js)
・XML DOM Tree ⇒ XML String (window.XMLSerializer)
・Attributeを含むXMLタグのJSON表現の'@'と'#'の意味
次の表は、上記のxml2json.jsとjson2xml.jxの変換パターンを示しています。これ以外にXMLの属性をJSONで表現するパターンは色々な考え方があります。落書き人にはこの変換パターンがしっくりきました。
| Pattern | XML | JSON | JavaScriptでの参照 |
| 1 |
<e/>
|
"e": null
|
o.e
|
| 2 |
<e>text</e>
|
"e": "text"
|
o.e
|
| 3 |
<e name="value" />
|
"e":{"@name": "value"}
|
o.e["@name"]
|
| 4 |
<e name="value">text</e>
|
"e": { "@name": "value", "#text": "text" }
|
o.e["@name"] o.e["#text"]
|
| 5 |
<e> <a>text</a> <b>text</b> </e>
|
"e": { "a": "text", "b": "text" }
|
o.e.a o.e.b
|
| 6 |
<e> <a>text</a> <a>text</a> </e>
|
"e": { "a": ["text", "text"] }
|
o.e.a[0] o.e.a[1]
|
| 7 |
<e> text <a>text</a> </e>
|
"e": { "#text": "text", "a": "text" }
|
o.e["#text"] o.e.a
|
CSV
CSVはXMLやJSONよりシンプルで根強く利用されています。標準仕様というよりは、デファクトスタンダード的に互換性が取られています。
一般ユーザー向けに、表計算ソフトに流し込んで使ってください的な用途でよく使われます。