Javascript - xml要素を循環して順に表示

ニュースの記事のようなテキストの段落を表示し、定期的に変更するアプリケーションを作成しようとしています。他の人がストーリーを追加したり、古い物語などを削除できるように、xmlファイルからデータを取得したい。 xmlファイルのデータで1つのhtmlフィールドを埋め込むようにJavaScriptを取得しようとしている。その後、所定の時間が経過した後、4秒間、次のデータに変更されます。Javascript - xml要素を循環して順に表示

HMTL：

<head> 
    <script src="script.js"></script> 
</head> 
<body> 
    <div id="text"></div> 
</body>

XML：

<document> 
    <text>one</text> 
    <text>two</text> 
    <text>three</text> 
</document>

はJavaScript：

var timer = setInterval(addText,4000); 

var xhttp = new XMLHttpRequest(); 
xhttp.onreadystaechange = function() { 
    if(this.readyState == 4 && this.status == 200) { 
     addText(this); 
    } 
}; 

function addText(xml) { 
    var xmlDoc = xml.responseXML; 
    var count = 0; 
    var max = xmlDoc.GetElementsByTagName("text"); 
    document.getElementById("text").innerHTML = 
    xmlDoc.getElementByTagName("text")[count].childNodes[0].nodeValue; 
    if (count < max.length) { 
     count++; 
    } else { 
     count = 0; 
    } 
} 

xhttp.open("GET", "XMLFile.xml",true); 
xhttp.send();

電流を以下は、私がやろうとしていたものの非常に粗製のバージョンであります私が経験している問題は、最初のxmlフィールドが正常に設定されているが、エラーが発生するということです"Unable to get property 'responseXML' of undefined or null reference"。

理想的には、関数が発生するたびにxmlドキュメントが開かれるようにしたいのですが、余分なデータがxmlファイルに追加された場合、アプリケーションを再起動する必要はありません。可能です）

出典

2016-09-13 MoultoB

'xhttp'を独自の関数に入れ、その関数を' setInterval'のターゲットとして設定したいと思うでしょう。今、最初の行が実行されてから4秒後に 'addText'が' xml'引数なしで呼び出されます。 –

それは私が得ていたエラーを取り除いているので、それに感謝します。しかし、私の「カウント」は増加していません。 if文を 'if（count MoultoB

addTextをonreadystatechangeハンドラの範囲に置くことができます。このようなもの。

var xhttp = new XMLHttpRequest(); 
xhttp.onreadystatechange = function() { 
    if(this.readyState == 4 && this.status == 200) { 
     var xmlDoc = this.responseXML; 
     var count = 0; 
     var xText = xmlDoc.getElementsByTagName("text"); 
     var max = xText.length; 
     var docText = document.getElementById("text"); 
     function addText() { 
     //docText, xText and count are available from parent scope 
      docText.innerHTML = 
      xText[(count++) % max].childNodes[0].nodeValue; 
     } 
     var timer = setInterval(addText,4000); 
    } 
}; 

xhttp.open("GET", "XMLFile.xml",true); 
xhttp.send();

出典

2016-09-13 15:30:17

これは完全に動作します - ありがとう！ – MoultoB

これを復活させて申し訳ありませんが、JavaScriptは毎回 'xml'ファイルを再度開くようにしていますか？たとえば、余分な2つの ''フィールドを追加すると、ウィンドウを更新することなく表示されます。 – MoultoB

サーバー側またはクライアント側に「余分なテキストを追加する」という意味ですか？サーバの場合、 'setInterval'の前に' clearInterval（timer） 'を追加し、コード全体を' function'にラップして、他のコードから関数を呼び出すことができます。クライアントの場合、 'xmlDoc、xText、max'をglobalとし、それらを使用します。ウィンドウのリロードは必要ありません。 –

Javascript - xml要素を循環して順に表示

答えて

関連する問題