Think2Loud » XML

JSON vs. XML: What Should You Use?

Jared — Sun, 27 Dec 2009 21:02:54 +0000

From the start, JSON is already has a leg up on XML for one reason: it’s faster. To read XML you need to parse it, read the nodes, attributes, and child nodes in the XML document, and then use the data that you’ve found.

In jQuery the easiest way to do that is to use the built-in ajax functions to call the XML and use the each function to loop through all the nodes. The each function is nice, but is much much slower than a for loop. Just imagine what happens when we have an XML document with multiple levels of nested nodes you need to get at. You end up with multiple nested $.each functions and without much trying, you end up with a script that crawls. With JSON it’s easy to get at the data since its already native javascript. No parsers or proxies necessary–all you need to do is loop through the data, fast and simple. That’s one point for JSON.

There are aspects of XML that people point to as reasons to use it. First, XML is both human and machine readable. It is nice to see what data is being returned just by viewing the source, but that problem is solved by having good documentation, including an example of the JSON that will be returned. Also, being a front-end developer, I spend a lot of my time reading javascript anyway. I find it just as easy to read as XML, it’s just different.

Another good reason to use XML is that it’s widely available. Lots of websites offer APIs to get at their public (and sometimes private) data, and I usually find the returned format of these APIs are often either XML or JSON. However since XML has been around longer than JSON, there is simply more XML out there.

Sometimes you might find yourself in a situation where you don’t have JSON as an option. So do you submit to the API gods and slow down your site and just use the XML? Why do that when you can write the API yourself! This is where some server side skills come in handy. It’s super easy to load an XML document via PHP and print out the data in whatever format you need it to be in.

So in conclusion, you should be using JSON every chance you get.

JSON vs. XML: What Should You Use?

Using jQuery and XML to Populate a Drop-Down Box

Josh — Tue, 10 Mar 2009 00:30:41 +0000

Source Demo Reading XML with jQuery Source

You’ll now have an index.html file that looks like this:


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<link rel="stylesheet" type="text/css" media="all" href="style.css" />
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
	<title>Using jQuery and XML to populate a drop-down box demo</title>
        <script>
     	$(document).ready(function(){
			$.ajax({
				type: "GET",
				url: "sites.xml",
				dataType: "xml",
				success: function(xml) {
 
				}
			});
		});
     </script>
</head>
<body>
<div id="page-wrap">
    	
</div>
</body>
</html>

Next you’ll need a simple XML file to load.

Here is the one that I used : dropdown.xml

 version="1.0" encoding="iso-8859-1"?>
>
	>
    	>first set>
 		>
 			>option a>
 			>option b>
 		>
 	>
   	>
    	>second set>
 		>
 			>option 1>
 			>option 2>
 		>
 	>
 	>
    	>third set>
 		>
 			>option 1a>
 			>option 2b>
 		>
 	>
 >

Now that you’ve created your XML, add a form with a select box to the HTML page. I simply replaced everything within the body tag from our index.html from the previous article.

<form>
      <select id="mySelect">
              <option>loading</option>
      </select>
</form>

Once the XML is ready, jump back into the index.html file. You’ll need to update the jQuery Ajax call to get the new XML document. To do this, simply change the url to your new document.

old:

$.ajax({
        type: "GET",
	url: "sites.xml",
	dataType: "xml",
	success: function(xml) {
 
	}
});

new:

$.ajax({
        type: "GET",
	url: "dropdown.xml",
	dataType: "xml",
	success: function(xml) {
 
	}
});

With the Ajax call in place, you need to tell it what to do when it loads the XML in the success function. Start by getting the select tag with jQuery and storing it in a variable for later use. The select tag you are looking for has an id of mySelect.

var select = $('#mySelect');

Next, loop through all of the menuitem nodes in the XML with a jQuery each function.

$(xml).find('menuitem').each(function(){
});

Inside the each function, you will get the title of your menuitem. Create an option tag as a header for the menuitem, and then create another jQuery each function to get all the possible values that go with the current menuitem.

The first thing you’ll want to do within the each function for the menuitem is get the title and append it to your select.

var title = $(this).find('title').text();
select.append("+title+"");

There is a empty option tag in the code to get a space above the header, that way the drop down will be easier for the user to read. Add a class of ddheader to the option tag so in browser like firefox you can make the header bold.

With the header now inserted into the select, you’ll now need to create the options that will be under that header. To do this, use another jQuery each function, looking for all the value nodes that are in the menuitem node. Within this each you will get the text in the value node and then append it to the select tag as an option with a class of ddindent. The ddindent class is used to push these items to the right a bit so they are easy to follow.

$(this).find('value').each(function(){
	var value = $(this).text();
	select.append("+value+"");
});

That is just about everything, there’s only one more thing. At the end of the success function, change the option tag you hard coded in the index.html file that said “loading” to now say “please make a selection.” Make sure that it’s selected to start with by giving it the selected attribute. Because the option tag is the first child of the select tag, you can use the children function with the optional parameter of “:first”. This will return only the first child of the select tag.

select.children(":first").text("please make a selection").attr("selected",true);

You should now have a functional drop-down box loaded with XML via jQuery.

Source Demo Reading XML with jQuery Source

Using jQuery and XML to Populate a Drop-Down Box

Reading XML with jQuery

Jared — Sat, 06 Sep 2008 17:00:00 +0000

The first step is making sure you have jQuery included on your page.

<script src="jquery.js" type="text/javascript">script>

Second, you should check the XML file you are going to read and make sure it’s free of errors. If you are unfamiliar with XML synatax, check out the W3School’s rules on XML syntax. The file I’m using for this example is just a listing of some Web sites I enjoy.

Finally, you just need to tell jQuery to read the file and print out the contents. Start by adding the document.ready function to the page.

$(document).ready(function(){
 
});

Within the document.ready we start a jQuery ajax request to read the XML file. The ajax request takes four parameters: file type, url, dataType, and success. You’ll see below how these are set to read a file. The important thing to notice is the success parameter. We set it to a function that takes the data the request gets from the XML file.

$.ajax({
        type: "GET",
	url: "sites.xml",
	dataType: "xml",
	success: function(xml) {
 
	}
});

This is where the fun part comes in. Now that we are reading the XML, we need to find the data written within it and do something with it. We start by reading the returned data and using the find method to get all the nodes that match the text we supply (in this case, “site”), and then use the each function to loop through what the find function give to us.

$(xml).find('site').each(function(){
 
});

All that’s left is to get the data from that node and print it out. Do this by using the attr function, and the find function to get the text and any attributes on the nodes.

var id = $(this).attr('id');
var title = $(this).find('title').text();
var url = $(this).find('url').text();
$('+id+'">
').html('+url+'">'+title+'').appendTo('#page-wrap');

Your final code should look something like this:

$(document).ready(function(){
	$.ajax({
		type: "GET",
		url: "sites.xml",
		dataType: "xml",
		success: function(xml) {
			$(xml).find('site').each(function(){
				var id = $(this).attr('id');
				var title = $(this).find('title').text();
				var url = $(this).find('url').text();
				$('+id+'">
').html('+url+'">'+title+'').appendTo('#page-wrap');
				$(this).find('desc').each(function(){
					var brief = $(this).find('brief').text();
					var long = $(this).find('long').text();
					$('
').html(brief).appendTo('#link_'+id);
					$('
').html(long).appendTo('#link_'+id);
				});
			});
		}
	});
});

That’s all it takes to read XML with jQuery. Feel free to check out the demo and download the source code.

Reading XML with jQuery