#6 http.responseXML i stedet for responseText giver dig mulighed for getElementsByTagName
#7 Din removeChild fjerner kun 1 gammel div.
Brug derfor fant0mas forslag i #3 som altid fjernet den sidste, og kør den flere gange, hvis der er flere nye nyheder i svaret.
Det næste problem er at få de nye nyheder præsenteret på skærmen.
Svaret fra XMLHttpRequest er et XML-DOM objekt, og kan ikke fremvises direkte (uden at bruge fyfy metoden innerHTML).
Derfor må der skrives en rutine der konvererer til HTML-DOM.
Jeg har lavet en demo som kan ses i brug her
http://tjens.dk/javascript/examples/readXMLnewsDivs/hvor knappen tilfører 5 nye nyheder fra xmlfilen her
http://tjens.dk/javascript/examples/readXMLnewsDivs/nextNews.xmlFuld source:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>TestReadXMLnewsDivs</title>
<script type="text/javascript">
var xmlhttp;
function refreshNews()
{
if (window.XMLHttpRequest) { // code for Mozilla, Safari, ** And Now IE 7 **, etc
xmlhttp=new XMLHttpRequest();
} else if (window.ActiveXObject) { //IE
xmlhttp=new ActiveXObject('Microsoft.XMLHTTP');
}
if (typeof(xmlhttp)=='object') {
xmlhttp.onreadystatechange=FileReady;
xmlhttp.open("GET", "nextNews.xml", true);
xmlhttp.send(null);
}
}
function FileReady() {
if (xmlhttp.readyState==4) {
if (xmlhttp.status==200) {
// alert("File ready: " + xmlhttp.responseText);
updateNewsDiv(xmlhttp.responseXML);
}
else {
alert("Read News ERROR: " + xmlhttp.statusText);
}
}
}
function updateNewsDiv(data)
{
var newDivs = data.getElementsByTagName('div');
var newsContainer = document.getElementById("newscontainer");
for (var i = 0; i < newDivs.length; i++) { // for each new DIV element
OldNewsDivs= newsContainer.getElementsByTagName('div');
newsContainer.removeChild(OldNewsDivs[OldNewsDivs.length-1]);
newsContainer.insertBefore( convertXMLtoDOM(newDivs[i]), OldNewsDivs[0]);
}
}
function convertXMLtoDOM(inputTree) {
// the xml-file input must be converted from XML-DOM (textf ormat) to HTML-DOM (browser format)
var DOMelem = document.createElement(inputTree.nodeName);
for (var i = 0; i < inputTree.childNodes.length; i++) {
switch (inputTree.childNodes[i].nodeType) {
case 1:
DOMelem.appendChild(convertXMLtoDOM(inputTree.childNodes[i] ) );
break;
case 3:
if (inputTree.childNodes[i].nodeValue > ' ') // this if skips whitespace in some browsers
DOMelem.appendChild(document.createTextNode( inputTree.childNodes[i].nodeValue )) ;
break;
}
}
return DOMelem;
}
</script>
</head>
<body>
<p><input type="button" value="Refresh news" onclick="refreshNews(); return false" ></p>
<div id="newscontainer" >
<div>
<h4>Newsheading 19</h4>
<p>19 19 19</p>
</div>
<div>
<h4>Newsheading 18</h4>
<p>18 18 18</p>
</div>
<div>
<h4>Newsheading 17</h4>
<p>17 17 17</p>
</div>
<div>
<h4>Newsheading 16</h4>
<p>16 16 16</p>
</div>
<div>
<h4>Newsheading 15</h4>
<p>15 15 15 </p>
</div>
<div>
<h4>Newsheading 14</h4>
<p>14 14 14</p>
</div>
<div>
<h4>Newsheading 13</h4>
<p>13 13 13</p>
</div>
<div>
<h4>Newsheading 12</h4>
<p>12 12 12</p>
</div>
<div>
<h4>Newsheading 11</h4>
<p>11 11 11</p>
</div>
<div>
<h4>Newsheading 10</h4>
<p>10 10 10</p>
</div>
</div>
</body></html>
Ny bruger
Nybegynder
Opret
Preview
