Ajax and using responseXML
- by Banderdash
Hello,
I have a XML file that looks like this:
<response>
<library name="My Library">
<book id="1" checked-out="1">
<authors>
<author>David Flanagan</author>
</authors>
<title>JavaScript: The Definitive Guide</title>
<isbn-10>0596101996</isbn-10>
</book>
<book id="2" checked-out="1">
<authors>
<author>John Resig</author>
</authors>
<title>Pro JavaScript Techniques (Pro)</title>
<isbn-10>1590597273</isbn-10>
</book>
<book id="3" checked-out="0">
<authors>
<author>Erich Gamma</author>
<author>Richard Helm</author>
<author>Ralph Johnson</author>
<author>John M. Vlissides</author>
</authors>
<title>Design Patterns: Elements of Reusable Object-Oriented Software</title>
<isbn-10>0201633612</isbn-10>
</book>
...
</library>
</response>
I'm using a simple JS script to, on click show all the titles of the books:
<script type="text/javascript">
function loadXMLDoc()
{
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
xmlDoc=xmlhttp.responseXML;
var txt="";
x=xmlDoc.getElementsByTagName("title");
for (i=0;i<x.length;i++)
{
txt=txt + x[i].childNodes[0].nodeValue + "<br />";
}
document.getElementById("checkedIn").innerHTML=txt;
}
}
xmlhttp.open("GET","ajax-response-data.xml",true);
xmlhttp.send();
}
</script>
This works fine, as you can see here: http://clients.pixelbleed.net/ajax-test/
What I'd like to do is have the results post, on page load (not on click) into two separate DIV's depending on checked-out variable in the XML. So <book id="#" checked-out="1"> would post to the checkedIn div, <book id="#" checked-out="0"> posts to a checkedOut div. Also want to display the title and the author--would love any ideas as best method for accomplishing this.
Apologize in advanced for the newbieness of my query.
