Use jQuery expressions and AJAX to browse an XML file
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 to access the JavaScript file directly.
Posted by Brian
February 2nd, 2007
Leave a Comment
Comments are moderated. No profanity. Only <a>...</a>, <blockquote>...</blockquote>, and <code>...</code> are allowed.
Seperate paragraphs by pressing the "Enter" key twice, or press it once to break to a new line.
20 Comments
#01, Mar 06 2007
spa
I’ve been looking for an example of loading external xml w/jquery. Thanks!
#02, Mar 06 2007
Brian
Hi Spa, glad that I could help! I’ve got another jQuery tutorial coming soon :)
#03, Mar 12 2007
Christian
As said, great article. Looking forward to the next article.
#04, Mar 13 2007
Ghazal
Good stuff.THKS.
#05, May 04 2007
framemaker developer
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. :)
#06, Jun 05 2007
Alex
When I try this locally I get an Access is Denied error?? This is only in IE.
#07, Jun 06 2007
Brian
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
#08, Aug 10 2007
Benoit
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
#09, Aug 11 2007
Brian
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, Aug 13 2007
rex
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, Aug 15 2007
Brian
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, Sep 17 2007
Scott
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, Sep 18 2007
ScottDavis
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, Sep 20 2007
Brian
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, Sep 30 2007
Johann
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, Oct 11 2007
andy
$(”book”,xmlDataSet).length
does not work under IE 6. Is there an work around to this? Thanks.
#17, Oct 12 2007
Brian
Hi andy,
I do not think jQuery works in any version of IE less than 6.
#18, Feb 13 2008
Bubbila
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, Jun 15 2008
Use jQuery expressions and AJAX to browse an XML file...with a hen
[…]
#20, Jul 18 2008
tejas
Thnx pal, this is what I have been searching for. wonderful!!!!