XMLの読み込み。
XMLを読み込んで、画像とテキストまとめて変えるようにしてみました。
- サンプル:XMLの読み込み
<?xml version="1.0" encoding="UTF-8" ?> <pages> <page> <image>Ki.jpg</image> <text>あははー</text> </page> </pages>
画像ファイルとテキストをこんなふうにXMLに持たせます。
JavaScriptでこれをパーシングします……と思ったんですが、パーシングの必要ないんですね(汗)。
test.js
// イメージを置き換えます。 var imageUrl = ajax.responseXML.documentElement.childNodes.item(0).childNodes.item(0).text; imageObjName.src = imageUrl; // テキスト置き換え先の取得。 var textObj = document.getElementById( textObjId ); // テキストを置き換えます。 var text = ajax.responseXML.documentElement.childNodes.item(0).childNodes.item(1).text; textObj.innerHTML = text;
XMLHttpRequestがもうそのままXMLのDOMオブジェクトみたいに使えるんで、これをそのままアクセスできるんですねー。
<image>タグにアクセスするためには、<pages><page><image>とアクセスします。
「ajax.responseXML.documentElement」までが「<pages>」、次の「childNodes.item(0)」が「<page>」、次の「childNodes.item(0)」が「<image>」、最後の「text」がその中身。
「(0)」っていうのは、XML内での上からの順番ね。だから「<text>」の方は「childNodes.item(1)」です。
こういうふうにアクセスすればもうXML内の情報が取得できるとゆー。パーシングする必要がないのは楽だなぁ。
>追記
コメントで、「childNodes.item(0)」は「childNodes[0]」でアクセスできることを教えて頂きました。
// イメージを置き換えます。 var imageUrl = ajax.responseXML.documentElement.childNodes[0].childNodes[0].text; imageObjName.src = imageUrl; // テキスト置き換え先の取得。 var textObj = document.getElementById( textObjId ); // テキストを置き換えます。 var text = ajax.responseXML.documentElement.childNodes[0].childNodes[1].text; textObj.innerHTML = text;
普通のオブジェクトと思ってたものが配列として扱えるって不思議だ。それとも、C++の演算子のオーバーロードみたいなもんと考えればいいのかな……。
この形式で修正したのはこちらになります。
- サンプル:XMLの読み込み(修正版)
<追記ここまで。
呼び出す方はこう。
index.html
<IMG NAME="char" SRC="Ki.jpg" BORDER="0"><BR> <DIV ID="maintext"> </DIV><BR> <input type="button" value="「喜」へ切り替え" onClick="getData( 'dataKi.xml', document.char, 'maintext' ); return false;"> </form> <input type="button" value="「怒」へ切り替え" onClick="getData( 'dataDo.xml', document.char, 'maintext' ); return false;">
基本的にはこれまでの合わせ技で。
XMLのパーシングが必要ないっていうのはちょっとビックリだ。なんかやることがだいぶ減ったな。
とりあえず現在の課題。
- <IMG NAME="char">と<DIV ID="maintext">で渡し方が違うので統一したい。
- XMLの各要素のアクセスにインデックスナンバーじゃなく文字列で指定したい。
- ……FireFoxだと動かない(汗)。
次はその辺調べてみましょう。