« ウィンドウのロード時イベントハンドラ | メイン | XMLHttpRequestのresponseXMLの表示 »

XMLHttpRequestのresponseTextの表示

XMLHttpRequestによるリクエストの結果はresponseTextとresponseXMLのプロパティに設定されます。最も簡単なresponseTextをブラウザ側に表示してみましょう。

リクエストしたレスポンスがテキスト形式で|をデリミタで区切られた以下の格言集だとします。

もうはまだなり、まだはもうなり|人の行く裏に道あり花の山|株を買うな時を買え

XMLHttpRequestオブジェクト(xmlobjとします)のresponseTextプロパティに設定されているデータを取得するコードは以下です。

          kakugen=xmlobj.responseText.split('|');

あっけないですが、JavaScriptのsplit関数は指定したデリミタで文字列を配列に分けてくれます。自分で配列を作る必要はありませんが、大域的に受け渡すためには宣言しておきましょう。

この格言集を10秒毎に循環的に表示させましょう。kakugenを<div id="kakugen"><div>に表示させるdisplayDataのコードは以下です。

var i=0;
function displayData(){
    if(i==kakugen.length) { i=0 };
    document.getElementById('kakugen').innerHTML=kakugen[i];
    i++;
    setTimeout('displayData()',10*1000);
}

ここで、iは大域変数になっています。重要なのは以下のコードです。

    document.getElementById('kakugen').innerHTML=kakugen[i];

document.getElementById('kakugen')によりIDがkakugenの要素を取得しています。
さらに、innerHTMLはその要素内の全てのコンテンツの文字列を示しており、それを直接、以前取得したkakugen配列の要素で置き換えています。innerHTMLはDOMの仕様にありませんが、便利なためWeb開発者でよく使われるようです。

最後のsetTimeout('displayData()',10*1000);は10秒毎にdisplayData()を実行するためのJavaScriptコードです。これで循環的に表示されます。

トラックバック

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

コメントを投稿

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