Parse XML with jQuery

Posted on March 16, 2010 by Ashley

I recently ran through the technique of parsing JSON with jQuery and thought i’d pick this up and show you how to parse XML. It’s pretty much the same although the big difference with using XML is that this won’t work for xml files that don’t sit outside of your domain as we’re making a standard AJAX request and you can’t make cross domain ajax request unless you’re using JSONP, more of which can be found here.

The XML

Here’s our XML code, and for the purpose of the demo i’ve saved it as books.xml. You can see that we have an XML node called ‘book’ these help to structure the xml file elements. You will see that each book has a title, description and date. You could for instance add an image tag or anything for that matter.

<?xml version="1.0" encoding="utf-8" ?>
<RecentBooks>
  <Book>
    <Title>My Cool Book Title</Title>
    <Description>The my cool book is possibly the best cool book in that any developer could use to be a great web designer.</Description>
    <Date>12/1/2010</Date>
  </Book>
  <Book>
    <Title>Another PHP book</Title>
    <Description>Learn everything about PHP with 'Another PHP book,' your ultimate guide to the ins and outs of PHP.</Description>
    <Date>4/1/2010</Date>
  </Book>
  <Book>
    <Title>jQuery Techniques</Title>
    <Description>jQuery techniques runs you through real life examples of jQuery from beginner to expert</Description>
    <Date>6/2/2010</Date>
  </Book>
  <Book>
    <Title>MySQL Database Book</Title>
    <Description>Brush up your knowledge with the best MySQL database book on the market.</Description>
    <Date>14/2/2010</Date>
  </Book>
</RecentBooks>

The JavaScript

The first thing we need to do in order to parse our XML file is to make an AJAX request to get the XML file, The XML file has to sit on the same domain as the JavaScript below because we can’t do cross domain AJAX requests.

IMPORTANT. Because of the nature of JavaScript you can’t make a cross domain AJAX request, this can only be achieved by using JSONP

Once we have the XML file we need to parse it and get the data that we need. The way we do this is by using the .find() function. By using this we can specify each book node and loop through them to get the data. We then append the data in to the .main div.

$(document).ready(function () {
    $.ajax({
        type: "GET",
        url: "books.xml",
        dataType: "xml",
        success: xmlParser
    });
});

function xmlParser(xml) {

    $('#load').fadeOut();

    $(xml).find("Book").each(function () {

        $(".main").append('<div class="book"><div class="title">' + $(this).find("Title").text() + '</div><div class="description">' + $(this).find("Description").text() + '</div><div class="date">Published ' + $(this).find("Date").text() + '</div></div>');
        $(".book").fadeIn(1000);

    });

}

The HTML

The contents of the XML file will be injected into the .main div. Once the XML data is parsed the loading gif is faded out.


<div class="main">
<div align="center" class="loader"><img src="loader.gif" id="load" width="16" height="11" align="absmiddle"/></div>
</div>

<div class="clear"></div>