发表新帖
发表新帖

Open XML and display data in div

前端 未结
关注
3 664
醉话见心
醉话见心 2020-12-22 05:17

I am new to xml and found this example that I load in a directory on my computer.

XML file
相关标签:
3条回答
  • 一向
    2020-12-22 05:46

    Edit: Ignore my answer, I didn't notice that you set async to false.

    Your problem is that you're trying to do something with the data before you actually receive it. You have to use the onreadystatechange event to capture the status and data. I'm just going to quote from MDN because they do a much better job of actually explaining it:

    [...] you need to decide what you want to do after you receive the server response to your request. At this stage, you just need to tell the HTTP request object which JavaScript function will handle processing the response. This is done by setting the onreadystatechange property of the object to the name of the JavaScript function that should be called when the state of the request changes [...]

    They have a handy guide located here: https://developer.mozilla.org/en/AJAX/Getting_Started

    0 讨论(0)
  • 时光说笑
    2020-12-22 05:46

    The xml file format was the problem. I found out when I looked for a different demo that worked.

    This HTML worked.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html lang="en-US" xml:lang="en-US" xmlns="http://www.w3.org/1999/xhtml">
<head>

<script type="text/javascript">
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.open("GET","cd_catalog.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML; 

x=xmlDoc.getElementsByTagName("CD");

function displayCD(i)
{
artist=(x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue);
title=(x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue);
year=(x[i].getElementsByTagName("YEAR")[0].childNodes[0].nodeValue);
txt="Artist: " + artist + "<br />Title: " + title + "<br />Year: "+ year;
document.getElementById("showCD").innerHTML=txt;
}
</script>
</head>
<body onload="displayCD(5)">

<div id='showCD'></div>

</body>
</html>

    With this xml.

    <?xml version="1.0" encoding="ISO-8859-1" ?> 
<CATALOG>
<CD>
  <TITLE>Empire Burlesque</TITLE> 
  <ARTIST>Bob Dylan</ARTIST> 
  <COUNTRY>USA</COUNTRY> 
  <COMPANY>Columbia</COMPANY> 
  <PRICE>10.90</PRICE> 
  <YEAR>1985</YEAR> 
  </CD>
<CD>
  <TITLE>Hide your heart</TITLE> 
  <ARTIST>Bonnie Tyler</ARTIST> 
  <COUNTRY>UK</COUNTRY> 
  <COMPANY>CBS Records</COMPANY> 
  <PRICE>9.90</PRICE> 
  <YEAR>1988</YEAR> 
  </CD>
<CD>
  <TITLE>Greatest Hits</TITLE> 
  <ARTIST>Dolly Parton</ARTIST> 
  <COUNTRY>USA</COUNTRY> 
  <COMPANY>RCA</COMPANY> 
  <PRICE>9.90</PRICE> 
  <YEAR>1982</YEAR> 
  </CD>
<CD>
  <TITLE>Still got the blues</TITLE> 
  <ARTIST>Gary Moore</ARTIST> 
  <COUNTRY>UK</COUNTRY> 
  <COMPANY>Virgin records</COMPANY> 
  <PRICE>10.20</PRICE> 
  <YEAR>1990</YEAR> 
  </CD>
<CD>
  <TITLE>Eros</TITLE> 
  <ARTIST>Eros Ramazzotti</ARTIST> 
  <COUNTRY>EU</COUNTRY> 
  <COMPANY>BMG</COMPANY> 
  <PRICE>9.90</PRICE> 
  <YEAR>1997</YEAR> 
  </CD>
<CD>
  <TITLE>One night only</TITLE> 
  <ARTIST>Bee Gees</ARTIST> 
  <COUNTRY>UK</COUNTRY> 
  <COMPANY>Polydor</COMPANY> 
  <PRICE>10.90</PRICE> 
  <YEAR>1998</YEAR> 
  </CD>
<CD>
  <TITLE>Sylvias Mother</TITLE> 
  <ARTIST>Dr.Hook</ARTIST> 
  <COUNTRY>UK</COUNTRY> 
  <COMPANY>CBS</COMPANY> 
  <PRICE>8.10</PRICE> 
  <YEAR>1973</YEAR> 
  </CD>
<CD>
  <TITLE>Maggie May</TITLE> 
  <ARTIST>Rod Stewart</ARTIST> 
  <COUNTRY>UK</COUNTRY> 
  <COMPANY>Pickwick</COMPANY> 
  <PRICE>8.50</PRICE> 
  <YEAR>1990</YEAR> 
  </CD>
<CD>
  <TITLE>Romanza</TITLE> 
  <ARTIST>Andrea Bocelli</ARTIST> 
  <COUNTRY>EU</COUNTRY> 
  <COMPANY>Polydor</COMPANY> 
  <PRICE>10.80</PRICE> 
  <YEAR>1996</YEAR> 
  </CD>
<CD>
  <TITLE>When a man loves a woman</TITLE> 
  <ARTIST>Percy Sledge</ARTIST> 
  <COUNTRY>USA</COUNTRY> 
  <COMPANY>Atlantic</COMPANY> 
  <PRICE>8.70</PRICE> 
  <YEAR>1987</YEAR> 
  </CD>
<CD>
  <TITLE>Black angel</TITLE> 
  <ARTIST>Savage Rose</ARTIST> 
  <COUNTRY>EU</COUNTRY> 
  <COMPANY>Mega</COMPANY> 
  <PRICE>10.90</PRICE> 
  <YEAR>1995</YEAR> 
  </CD>
<CD>
  <TITLE>1999 Grammy Nominees</TITLE> 
  <ARTIST>Many</ARTIST> 
  <COUNTRY>USA</COUNTRY> 
  <COMPANY>Grammy</COMPANY> 
  <PRICE>10.20</PRICE> 
  <YEAR>1999</YEAR> 
  </CD>
<CD>
  <TITLE>For the good times</TITLE> 
  <ARTIST>Kenny Rogers</ARTIST> 
  <COUNTRY>UK</COUNTRY> 
  <COMPANY>Mucik Master</COMPANY> 
  <PRICE>8.70</PRICE> 
  <YEAR>1995</YEAR> 
  </CD>
<CD>
  <TITLE>Big Willie style</TITLE> 
  <ARTIST>Will Smith</ARTIST> 
  <COUNTRY>USA</COUNTRY> 
  <COMPANY>Columbia</COMPANY> 
  <PRICE>9.90</PRICE> 
  <YEAR>1997</YEAR> 
  </CD>
<CD>
  <TITLE>Tupelo Honey</TITLE> 
  <ARTIST>Van Morrison</ARTIST> 
  <COUNTRY>UK</COUNTRY> 
  <COMPANY>Polydor</COMPANY> 
  <PRICE>8.20</PRICE> 
  <YEAR>1971</YEAR> 
  </CD>
<CD>
  <TITLE>Soulsville</TITLE> 
  <ARTIST>Jorn Hoel</ARTIST> 
  <COUNTRY>Norway</COUNTRY> 
  <COMPANY>WEA</COMPANY> 
  <PRICE>7.90</PRICE> 
  <YEAR>1996</YEAR> 
  </CD>
<CD>
  <TITLE>The very best of</TITLE> 
  <ARTIST>Cat Stevens</ARTIST> 
  <COUNTRY>UK</COUNTRY> 
  <COMPANY>Island</COMPANY> 
  <PRICE>8.90</PRICE> 
  <YEAR>1990</YEAR> 
  </CD>
<CD>
  <TITLE>Stop</TITLE> 
  <ARTIST>Sam Brown</ARTIST> 
  <COUNTRY>UK</COUNTRY> 
  <COMPANY>A and M</COMPANY> 
  <PRICE>8.90</PRICE> 
  <YEAR>1988</YEAR> 
  </CD>
<CD>
  <TITLE>Bridge of Spies</TITLE> 
  <ARTIST>T'Pau</ARTIST> 
  <COUNTRY>UK</COUNTRY> 
  <COMPANY>Siren</COMPANY> 
  <PRICE>7.90</PRICE> 
  <YEAR>1987</YEAR> 
  </CD>
<CD>
  <TITLE>Private Dancer</TITLE> 
  <ARTIST>Tina Turner</ARTIST> 
  <COUNTRY>UK</COUNTRY> 
  <COMPANY>Capitol</COMPANY> 
  <PRICE>8.90</PRICE> 
  <YEAR>1983</YEAR> 
  </CD>
<CD>
  <TITLE>Midt om natten</TITLE> 
  <ARTIST>Kim Larsen</ARTIST> 
  <COUNTRY>EU</COUNTRY> 
  <COMPANY>Medley</COMPANY> 
  <PRICE>7.80</PRICE> 
  <YEAR>1983</YEAR> 
  </CD>
<CD>
  <TITLE>Pavarotti Gala Concert</TITLE> 
  <ARTIST>Luciano Pavarotti</ARTIST> 
  <COUNTRY>UK</COUNTRY> 
  <COMPANY>DECCA</COMPANY> 
  <PRICE>9.90</PRICE> 
  <YEAR>1991</YEAR> 
  </CD>
<CD>
  <TITLE>The dock of the bay</TITLE> 
  <ARTIST>Otis Redding</ARTIST> 
  <COUNTRY>USA</COUNTRY> 
  <COMPANY>Atlantic</COMPANY> 
  <PRICE>7.90</PRICE> 
  <YEAR>1987</YEAR> 
  </CD>
<CD>
  <TITLE>Picture book</TITLE> 
  <ARTIST>Simply Red</ARTIST> 
  <COUNTRY>EU</COUNTRY> 
  <COMPANY>Elektra</COMPANY> 
  <PRICE>7.20</PRICE> 
  <YEAR>1985</YEAR> 
  </CD>
<CD>
  <TITLE>Red</TITLE> 
  <ARTIST>The Communards</ARTIST> 
  <COUNTRY>UK</COUNTRY> 
  <COMPANY>London</COMPANY> 
  <PRICE>7.80</PRICE> 
  <YEAR>1987</YEAR> 
  </CD>
<CD>
  <TITLE>Unchain my heart</TITLE> 
  <ARTIST>Joe Cocker</ARTIST> 
  <COUNTRY>USA</COUNTRY> 
  <COMPANY>EMI</COMPANY> 
  <PRICE>8.20</PRICE> 
  <YEAR>1987</YEAR> 
  </CD>
  </CATALOG>

    Thanks again for working so much on this.

    0 讨论(0)
  • 野的像风
    2020-12-22 05:49

    "(...) load in a directory on my computer" It's the problem. It's default impossible due to security reasons. You should do it on a server (it can be local server).

    Some browsers permit it but you have to change configuration (e.g. in Opera opera:config#UserPrefs|AllowFileXMLHttpRequest).

    Edit.

    I checked. After setting in Opera Allow File XMLHttpRequest everything works well. In Firefox 5.0 it works by default for me.

    Edit2.

    I found the solution! :)

    Your code should look like this:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html lang="en-US" xml:lang="en-US" xmlns="http://www.w3.org/1999/xhtml">
<head>

<script type="text/javascript">
xmlhttp = "";
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.open("GET","http://"+location.host+"/cd_catalog.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;

x=xmlDoc.getElementsByTagName("CD");

function displayCD(i)
{
artist=(x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue);
title=(x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue);
year=(x[i].getElementsByTagName("YEAR")[0].childNodes[0].nodeValue);
txt="Artist: " + artist + "<br />Title: " + title + "<br />Year: "+ year;
document.getElementById("showCD").innerHTML=txt;
}
</script>
</head>
<body onload="displayCD(2)">

<div id='showCD'></div>

</body>
</html>
    1. Read my original answer.
    2. Read my comment: I don't know why but in this case you need to pass absolute path (not relative) to make this script working in IE.
    3. You need to put this line xmlhttp = ""; in the beginning to make it working in IE.

    That's all. :)

    0 讨论(0)
 看不清?
提交回复
热议问题