« XMLHttpRequestのresponseTextの表示 | メイン | DOM APIを利用したHTMLの生成 »

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が設定されています。

この格言集を10秒毎に循環的に表示させましょう。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);は10秒毎にdisplayData()を実行するためのJavaScriptコードです。

トラックバック

このエントリーのトラックバックURL:
http://www.yumemaro.com/apps/mt-tb.cgi/29

コメントを投稿

(いままで、ここでコメントしたことがないときは、コメントを表示する前にこのブログのオーナーの承認が必要になることがあります。承認されるまではコメントは表示されません。そのときはしばらく待ってください。)