d’bug » Blog Archive » Use jQuery expressions and AJAX to browse an XML file

Use jQuery expressions and AJAX to browse an XML file

Posted by Brian
Posted on February 2nd, 2007
View 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: ajax, jquery, xml

A day late and a dollar short... comments are closed.

01 | March 6th, 2007 at 2:40 pm

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

Comment by:

spa

02 | March 6th, 2007 at 7:26 pm

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

Comment by:

Brian

03 | March 12th, 2007 at 8:53 am

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

Comment by:

Christian

04 | March 13th, 2007 at 1:52 am

Good stuff.THKS.

Comment by:

Ghazal

05 | May 4th, 2007 at 9:26 pm

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. :)

Comment by:

framemaker developer

06 | June 5th, 2007 at 2:03 pm

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

Comment by:

Alex

07 | June 6th, 2007 at 4:25 pm

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

Comment by:

Brian

08 | August 10th, 2007 at 3:44 am

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

Comment by:

Benoit

09 | August 11th, 2007 at 2:51 pm

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

Comment by:

Brian

10 | August 13th, 2007 at 4:03 pm

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.

Comment by:

rex

11 | August 15th, 2007 at 3:24 am

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.

Comment by:

Brian

12 | September 17th, 2007 at 1:09 pm

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.

Comment by:

Scott

13 | September 18th, 2007 at 4:49 pm

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

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?

Comment by:

ScottDavis

14 | September 20th, 2007 at 3:29 am

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.

Comment by:

Brian