JSON vs. XML: What Should You Use?

Lots of people have asked me this question: which is better when loading data via an ajax request? JSON is my favorite. I’m going to try and explain the benefits of JSON over XML.

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.

jQuery 101: Adding jQuery to Your Website

Everyone has to start somewhere. So lets get you setup to begin learning jQuery. The first thing you will need to do is get jQuery setup and running on your site. Now let’s get started.

The traditional jQuery Setup

1. Download the files

Make a trip over to the jQuery site and download the latest version or follow this link to the download page. You will want to grab the minified version of the code to save on bandwidth.

2. Add the script to your site

In the root folder of your site make a new folder called js. Then add the freshly downloaded jQuery script file to this folder. With the files in place you will need to add the script to your pages.

Open up one of you pages on your site and make you way to the head section of the page. Now copy the script tag below and paste in the head area of your files.


Once your script tag is in place you are ready to start using jQuery.

Using hosted files from Google

Google offers a great service. They host several of the most popular javascript library’s. This works well for sites that want to save on bandwidth or always have to latest code. Google offers several different ways to link to the script files. We are just going to use the direct link method. For more on the options of linking to these files check out the Google AJAX Libraries API.

1. Choose your version

There are a few options you have for choosing what version of jQuery you would like to link to. You can link to the main version of 1. This will keep your code updated to any subversions of 1. You could link to 1.3 this would keep your site running on the latest subversion of 1.3. Lastly you can link directly to the version you want to use.

Link to current subversion of version 1

http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js

Link to current subversion of version 1.3

http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js

Link to current version 1.3.2

http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js

Link to older version 1.3.1

http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js

2. Add the script to your site

I recommend you link to the current version that you know works with all of your code. So below is the script tag that you can place in the head section of your site. The script tag loads the current version as of this posting jQuery 1.3.2.


This will get you started on your path to learning jQuery. Look for more jQuery basics to come and also check out some of the resources listed below.

Adding Twitter to Your Web Site with JavaScript

Today at work we needed to pull our Twitter feed into our site. Not wanting to have to deal with the Twitter feed in back-end code, we decided to try out some already-written JavaScript setups for doing what we needed.

After testing out a few different ones, we finally settled on twitter.js written by Remy Sharp.

Twitter.js seems to have the most flexibility and had the options we were looking for. It also seems to load a lot more consistently than the others (although I think that is more of a network issue at work). Below is a list of all the ones we tried–they were all great. If you are looking to add your Tweets to you web site, below are some great places to start.

  • Twitter.js by Remy Sharp. Features a simple, clean setup that is easy to use and has a lot of options that can be set.
  • Tweet! by seaofclouds. This is a Jquery plugin and seemed to work very well. It didn’t do exactly what we were looking for, but since this is a Jquery plugin, it was hard to pass up.
  • addTweets This is great if you just lwant to add Tweets to you site with no work. You enter your Twitter info and addTweets generates all the code for you. You have up to 10 Tweets on your page with just a copy and a paste.