XMLを読み込んで、どうこうしたいということは多いんじゃないかと思います。
jQueryでHTMLの要素を指定するように、XMLの要素も指定できると素敵よねー、と。
ひとまず今回は外部XMLを読み込んで、適当な要素の内容を表示できたら良しとしよう。
最近はAjaxって単語自体が出ることは多くなくなったけど、もう定着しちゃったんであって、過去の技術になったわけじゃない。
そして定着している技術なら、当然のようにjQueryは対応しているというのが偉い。
そして、ブラウザ毎の細かい差異も吸収してくれるという素晴らしさ。
Ajax系のメソッドは豊富に用意されているけど、ファイル読めば良いって場合は$.get()がいいっぽい。
$(function(){
$.get("test.xml", readXmlAfter, "xml");
});
うわっ、簡単!! xmlオブジェクトじゃなくてテキストで受ける場合は最後の引数も省略できる…うへー。
readXmlAfterは後で定義する関数。読み込みが成功したら引数にファイルをdocumentオブジェクト化したものが送られる。
多分、
<contents> <text id="test">アタリ!</text> <text>ハズレ…</text> </contents>
上記のような、テキトーXMLを用意。
先ほど読み込み成功時の関数として指定したやつを作る。
function readXmlAfter(xml){
$("samp").text( $("#test",xml).text() );
}
$("#test",xml).text() と $(xml).find("#test").text() は同じ結果を返す、あるいは前者は内部的に後者の処理が行われている。ここではちょっとだけ記述が短い方を採用。
DOMでまともに書くと、xml.getElementById( "test" ).firstChild.nodeValue となる。…倍以上の長さがあるよ、これ。firstChild.挟まなきゃいけないっつーのが直感的じゃないよなー。
ちなみに、jQueryは変数xmlの中味がDOMオブジェクトじゃなくてテキストであっても、その場でパースしてくれるので、実は最初に読んだときの最後の引数"xml"はなくても動く。
何となく、これで動くんじゃないかなーと作ったものが動くってのが凄いね。
で、出力されたのが以下。
出力先
いやー、なんでしょうね、この分かりやすさというか素直さは。凄く納得の仕様です。
逆に最初のDOMの仕様考えた人は、内部構造をそのままスクリプトで書くという意味では、凄く素直だったんだけど、人間が読んだり書いたりしたときの明解さは全然考えてなかった感じ。
今日はここまで。