XMLHttpRequestのresponseXMLの表示
XMLHttpRequestによるリクエストの結果はresponseTextとresponseXMLのプロパティに設定されます。簡単なresponseXMLをブラウザ側に表示してみましょう。
サンプルは相場の格言を並べた簡単なXMLファイルです。
<?xml version="1.0" encoding="UTF-8"?> <souba> <kakugen>もうはまだなり、まだはもうなり</kakugen> <kakugen>人の行く裏に道あり花の山</kakugen> <kakugen>株を買うな時を買え</kakugen> </souba>
XMLHttpRequestオブジェクト(xmlobjとします）のresponseXMLプロパティに設定されている格言要素を取得するコードは以下です。
kakugen=xmlobj.responseXML.getElementsByTagName('kakugen');
getElementsByTagNameは指定された名前の要素のリストを返してくれます。ちなみに、xmlobj.responseTextには元のXMLが設定されています。
この格言集を１０秒毎に循環的に表示させましょう。kakugenを<div id="kakugen"><div>に表示させるdisplayDataのコードは以下です。
var i=0
function displayData(){
if(i==kakugen.length) { i=0 };
document.getElementById('kakugen').innerHTML=kakugen[i].firstChild.nodeValue;
i++;
setTimeout('displayData()',10*1000);
}
ここで、iは大域変数になっています。重要なのは以下のコードです。
document.getElementById('kakugen').innerHTML=kakugen[i].firstChild.nodeValue;
document.getElementById('kakugen')によりIDがkakugenのdiv要素を取っています。
さらに、innerHTMLはその要素内の全てのコンテンツの文字列を示しており、それをkakugen[i].firstChild.nodeValueで置き換えています。kakugen[i]自体のnodeValueはnullを返すため、firstChildが必要になります。
一般的なXMLではより複雑な階層構造を持つでしょう。その場合には、getElementsByTagNameを再度利用して必要な要素を取得することになります。
最後のsetTimeout('displayData()',10*1000);は１０秒毎にdisplayData()を実行するためのJavaScriptコードです。