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.dtd">
<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>Untitled Document</title>
</head>
<body>
<div id="content">
<ul>
<li><a href="javascript: void showCD()">CD 1</a></li>
<li><a href="javascript: 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
getCDInfoUsingXML() is the one i need help with
// holds an instance of XMLHttpRequest
var xmlHttp = createXmlHttpRequestObject();
/
*--------------------------------------------------------------------------------
*/
function createXmlHttpRequestObject()
{
// 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.XMLHTTP');}
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("GET", "discography.xml", true);
xmlHttp.onreadystatechange = handleRequestStateChange;
xmlHttp.send(null);
}
// 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 handleRequestStateChange()
{
// when readyState is 4, we are ready to read the server response
if (xmlHttp.readyState == 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.statusText);
}
}
}
/
*--------------------------------------------------------------------------------
*/
function getCDInfo() {
var myDiv = document.getElementById("tracks");
myDiv.innerHTML = '';
var cdTrack = new Array();
cdTrack[0] = 'Forever';
cdTrack[1] = 'Night Sky';
cdTrack[2] = 'Ignacio';
//create the Title of the CD
oH1 = document.createElement('h1');
oH1Text = document.createTextNode('Eternity');
oH1.appendChild(oH1Text);
/*-------------- Create the list of tracks --------------*/
oUL = document.createElement('ul');
for(i=0; i < cdTrack.length; i++) {
oTrack = document.createElement('li');
oTrackTitle = document.createTextNode(cdTrack[i]);
oTrack.appendChild(oTrackTitle);
oUL.appendChild(oTrack);
}
//get the CD Cover
var url = "images/discography/250px/eternity.jpg";
oCDCover = document.createElement('img');
oCDCover.setAttribute("src", url);
myDiv.appendChild(oH1);
myDiv.appendChild(oUL);
myDiv.appendChild(oCDCover)
}
/
*--------------------------------------------------------------------------------
*/
// handles the response received from the server
function getCDInfoUsingXML()
{
// read the message from the server
var xmlResponse = xmlHttp.responseXML;
//catching potential errors with IE, Opera
if(!xmlResponse || !xmlResponse.documentElement)
throw('Invalid XML structure:\n' + xmlHttp.responseText);
//catching potential errors with Firefox
var rootNodeName = xmlResponse.documentElement.nodeName;
if(rootNodeName == 'parseerror')
throw('Invalid XML structure:\n' + xmlHttp.responseText);
// obtain the XML's root element
xmlRoot = xmlResponse.documentElement;
...
//iterate through the arrays and create an HTML structure
for (var i=0; i<arrayCD.length; 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>Forever</title>
<title>Night Sky</title>
<title>Ignacio</title>
</track>
</cd>
</discography>
In my HTML file im calling the AJAX function like this:
<li><a href="javascript: 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
