XMLHttpRequestのresponseTextの表示
XMLHttpRequestによるリクエストの結果はresponseTextとresponseXMLのプロパティに設定されます。最も簡単なresponseTextをブラウザ側に表示してみましょう。
リクエストしたレスポンスがテキスト形式で|をデリミタで区切られた以下の格言集だとします。
もうはまだなり、まだはもうなり|人の行く裏に道あり花の山|株を買うな時を買え
XMLHttpRequestオブジェクト(xmlobjとします）のresponseTextプロパティに設定されているデータを取得するコードは以下です。
kakugen=xmlobj.responseText.split('|');
あっけないですが、JavaScriptのsplit関数は指定したデリミタで文字列を配列に分けてくれます。自分で配列を作る必要はありませんが、大域的に受け渡すためには宣言しておきましょう。
この格言集を１０秒毎に循環的に表示させましょう。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);は１０秒毎にdisplayData()を実行するためのJavaScriptコードです。これで循環的に表示されます。