« Using a batch file to set environment variables for Java

The Accessible jQuery News Slider »

Use jQuery expressions and AJAX to browse an XML file

February 2nd, 2007 by Brian | 20 Comments »

One of the disadvantages to getting an XML file with asynchronous JavaScript has been the limited ability to traverse the nodes, effortlessly displaying a refined result set in HTML. Although Internet Explorer 5+, Firefox 1+, Safari 1.3+ and Opera 9+ do provide basic properties and methods for accomplishing minor tasks, the process for browsing the XML is cumbersome.

Most developers prefer hitting a server-side script, passing it querystring parameters, and then sending back the results as plain text. Each time the user modifies the result set, another call to the server is executed, and the user must wait for the HTML contents to load. There is now an improved method with jQuery AJAX and jQuery custom expressions that does not require this server-side scripting, which is wonderful for smaller sets of results.

If you have never used jQuery, then I suggest you go to www.jquery.com, and brush up on the basics. Specifically, read up on selectors and traversing the DOM. Even though the documentation does not explicitly record this fact, DOM manipulation with jQuery can refer to either HTML nodes or XML nodes. The learning curve is not as steep since the implementations are similar.

Instead of walking through the code here, I have provided an example. The JavaScript file associated with the example has several comments and detailed instructions. For the purpose of this demonstration, my XML contains only ten results, yet, I have loaded much larger XML files into memory without suffering performance from the jQuery selectors.

Click here for the example.

Click here to access the JavaScript file directly.

Tags: , ,

Posted in: JavaScript

This entry was posted on Friday, February 2nd, 2007 at 5:25 pm and is filed under JavaScript.

You can follow any responses to this entry through the RSS 2.0 feed.

Both comments and pings are currently closed.

20 Responses to “Use jQuery expressions and AJAX to browse an XML file”

  1. spa says:

    I’ve been looking for an example of loading external xml w/jquery. Thanks!

  2. Brian says:

    Hi Spa, glad that I could help! I’ve got another jQuery tutorial coming soon :)

  3. Christian says:

    As said, great article. Looking forward to the next article.

  4. Ghazal says:

    Good stuff.THKS.

  5. This is brilliant! You could parse an RSS file with this and do just about any cool effects-y thing with the content.

    jquery’s endlessly amazing. :)

  6. Alex says:

    When I try this locally I get an Access is Denied error?? This is only in IE.

  7. Brian says:

    Alex, you cannot make an asynchronous request in IE locally. It is a security issue that the browser will not resolve. You will have to run the code in Tomcat or another Web server.

    Brian

  8. Benoit says:

    Hello,

    Good example !

    But, is it possible to get the tag name ?

    With your code :

    $(”title:lt(” + parseInt(curPos + itemsPerPage) + “)”,xmlDataSet).filter(”:gt(” + parseInt(curPos – 1) + “)”).each(function(i) {
    strToAppend += “<strong>” + $(this).text() + “</strong>”;

    you can get the contains of :

    but how to get the tagname “title” ?

    Thanks

    Benoit

  9. Brian says:

    Hey Benoit,

    I think I understand your question. If you wanted the tag name, then I’m pretty sure you could do $(this).nodeName instead of $(this).text().

    Brian

  10. rex says:

    Hi, i somewhat edited your code for it to go to the next page after setTimeout like so:

    timeOut=setTimeout(’curItems += itemsPerPage;readThenShowXML();’, 10000);

    Problem is when it goes to the last page and goes back to the top… it repeats the 1st page twice. The code for the last page is this:

    timeOut=setTimeout(’curItems += itemsPerPage;readThenShowXML();curItems=-2;’, 10000);

    do you know what’s wrong with it? I tried setting curItems to zero again but it goes to the 2nd page after the last page, then repeats it twice too.

    Sorry for this loooonngg.. comment ^_^ Thanks.

  11. Brian says:

    Hi Rex,

    Without seeing the entire codebase, the only thing I can come up with is that you need to clear your first timeOut before setting your next timeout. It is probably more complicated than that, but I hope that is a step in the right direction.

  12. Scott says:

    Yeah, this has been one of the best tutorials I’ve seen since I started tinkering with this. One thing I can’t seem to find anything on is how to get information out of an attribute in the xml. Say if you had and you wanted to be able to pull out that information and have it sit next to the title on the page.

  13. ScottDavis says:

    var selectedSection is set earlier, for example selectedSection=”PB”.
    XML structure is like this:

    PB

    I want to limit to only those tiles where VO selection = selectedSection.

    This code is not working:
    $(”Tiles/Tile”,xmlDataSet).find(’VOsection’, selectedSection)
    .each(function(){
    alert(”here is VOsection: “+$(”VOsection”, this).text());

    should I use GREP or contains?

  14. Brian says:

    Hi Scott,

    Try using something like the following instead:

    $(”/Tiles/Tile”,xmlDataSet).each(function(){
    if ($(this).attr(”VOSelected”) == selectedSection) {
    // do something
    }
    });

    Sorry for the late reply. I’m not sure I completely understood the question. Let me know if you have any further issues.

  15. Johann says:

    Thats just perfect, exactly what I needed – and I like the way you commented the code instead of writing a loong article!
    Thanks, mate!

  16. andy says:

    $(”book”,xmlDataSet).length
    does not work under IE 6. Is there an work around to this? Thanks.

  17. Brian says:

    Hi andy,

    I do not think jQuery works in any version of IE less than 6.

  18. Bubbila says:

    Sweet comprehensive tutorial, it took a bit of time to get to grips with but it was just what I have been looking for! Well Pleased…

  19. tejas says:

    Thnx pal, this is what I have been searching for. wonderful!!!!