Hello,
Im trying to access elements in my XML file using the JavaScript DOM
but i'm not sure how. I use AJAX to access the XML and then use the
responseXML property to access the XML file data.
I want to extract all the tracks from a specific CD.
Right now, im using an array to stock all the data but its just a
question of time before everything blows up because of the size of the
array. Thats why im want to use an XML file (later i will try to learn
mysql or a similar database)
Heres how my html looks like:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt d">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<script type="text/javascript" src="js/ajax.js"></script>
<link href="css/style.css" rel="stylesheet " type="text/css" />
<title>Untitl ed Document</title>
</head>
<body>
<div id="content">
<ul>
<li><a href="javascrip t: void showCD()">CD 1</a></li>
<li><a href="javascrip t: void showCD()">CD 2</a></li>
<li>Como yo te amo</li>
<li>Se nos rompío el amor (Con Malú)</li>
<li>Me ha dicho la luna (Con Chayanne)</li>
</ul>
<div id='tracks'></div>
</div>
</body>
</html>
And my AJAX file, notice that in the function getCDInfo(), i'm using a
JavaScript array instead of the XML file. That's coz i dont know how
to access a specific CD in the XML list. Also the function
getCDInfoUsingX ML() is the one i need help with
// holds an instance of XMLHttpRequest
var xmlHttp = createXmlHttpRe questObject();
/
*--------------------------------------------------------------------------------
*/
function createXmlHttpRe questObject()
{
// will store the reference to the XMLHttpRequest object
var xmlHttp;
// this should work for all browsers except IE
try {xmlHttp = new XMLHttpRequest( );}
catch(e)
{
// this should work for IE
try {xmlHttp = new ActiveXObject(' MSXML2.XMLHTTP' );}
catch(e)
{
// this should work for older IE
try {xmlHttp = new ActiveXObject(' Microsoft.XMLHT TP');}
catch(e) {}
}
}
// return the created object or display an error message
if (!xmlHttp)
alert("Error creating the XMLHttpRequest object.");
else
return xmlHttp;
}
/
*--------------------------------------------------------------------------------
*/
function showCD()
{
// only continue if xmlHttp isn't void
if (xmlHttp)
{
// try to connect to the server
try
{
// initiate reading a file from the server
xmlHttp.open("G ET", "discography.xm l", true);
xmlHttp.onready statechange = handleRequestSt ateChange;
xmlHttp.send(nu ll);
}
// display the error in case of failure
catch (e)
{
alert("Can't connect to server:\n" + e.toString());
}
}
}
/
*--------------------------------------------------------------------------------
*/
// function called everytime the state of the HTTP request changes
function handleRequestSt ateChange()
{
// when readyState is 4, we are ready to read the server response
if (xmlHttp.readyS tate == 4)
{
// continue only if HTTP status is "OK"
if (xmlHttp.status == 200)
{
try
{
// do something with the response from the server
getCDInfo();
}
catch(e)
{
// display error message
alert("Error reading the response: " + e.toString());
}
}
else
{
// display status message
alert("There was a problem retrieving the data:\n" +
xmlHttp.statusT ext);
}
}
}
/
*--------------------------------------------------------------------------------
*/
function getCDInfo() {
var myDiv = document.getEle mentById("track s");
myDiv.innerHTML = '';
var cdTrack = new Array();
cdTrack[0] = 'Forever';
cdTrack[1] = 'Night Sky';
cdTrack[2] = 'Ignacio';
//create the Title of the CD
oH1 = document.create Element('h1');
oH1Text = document.create TextNode('Etern ity');
oH1.appendChild (oH1Text);
/*-------------- Create the list of tracks --------------*/
oUL = document.create Element('ul');
for(i=0; i < cdTrack.length; i++) {
oTrack = document.create Element('li');
oTrackTitle = document.create TextNode(cdTrac k[i]);
oTrack.appendCh ild(oTrackTitle );
oUL.appendChild (oTrack);
}
//get the CD Cover
var url = "images/discography/250px/eternity.jpg";
oCDCover = document.create Element('img');
oCDCover.setAtt ribute("src", url);
myDiv.appendChi ld(oH1);
myDiv.appendChi ld(oUL);
myDiv.appendChi ld(oCDCover)
}
/
*--------------------------------------------------------------------------------
*/
// handles the response received from the server
function getCDInfoUsingX ML()
{
// read the message from the server
var xmlResponse = xmlHttp.respons eXML;
//catching potential errors with IE, Opera
if(!xmlResponse || !xmlResponse.do cumentElement)
throw('Invalid XML structure:\n' + xmlHttp.respons eText);
//catching potential errors with Firefox
var rootNodeName = xmlResponse.doc umentElement.no deName;
if(rootNodeName == 'parseerror')
throw('Invalid XML structure:\n' + xmlHttp.respons eText);
// obtain the XML's root element
xmlRoot = xmlResponse.doc umentElement;
...
//iterate through the arrays and create an HTML structure
for (var i=0; i<arrayCD.lengt h; i++)
{
...
}
...
}
And heres my XML file:
<?xml version="1.0" encoding="UTF-8" standalone="yes "?>
<discography>
<cd id='1'>
<title>Vision </title>
<description>.. .</description>
<track>
<title>track1 </title>
<title>track2 </title>
<title>track3 </title>
</track>
</cd>
<cd id='2'>
<title>Eternity </title>
<description>.. .</description>
<track>
<title>Foreve r</title>
<title>Night Sky</title>
<title>Ignaci o</title>
</track>
</cd>
</discography>
In my HTML file im calling the AJAX function like this:
<li><a href="javascrip t: void showCD()">CD 1</a></li>
Also, it would be better if a pass the CD as a parameter.
I need help coz i've been searching like crazy for weeks on how to
achieve this with no success
Thanks
Marco
