Around mid 2007 I found myself working on a number of applications that required asyncronous calls to be made from client to server, without completely re-loading the page. Luckily for me some one else was having the same requirements and they took the liberty to create an API called XMLHttpRequest. It was exactly what I needed; a method running in the background to send information to the server via HTTP/HTTPS, process the data, and send a response back to the client. Since I was (basically) an XML guru at the time, XML became my choice tool for handling the data. I really didn't focus too much on optimizing the transport of the XML, since my applications weren't very demanding, but it was something I knew I would eventually have to address.
There are a couple problems I found with XML as a transport format.
The first problem was File Size.
XML files carry a relatively large size due to its overhead, and the way the information is structured. Take the example of data below.
This is just a (very) brief snippet of xml generated from Google Calendar's API (which is now deprecated in favor of a better data transport). As you can see there are a number of Schemas that are required for you to be able to traverse this document. Some programming languages have tools built in to handle the interpretation of schemas; Some languages--like my language of choice PHP--require additional libraries to be installed, and then you will need to study the XML structure in order to line up the schemas with the data within the file. It all is quite tedious for the experienced developer, and most moderate developers wouldn't even know where to begin.
The second problem I had with XML was with Javascript Parsing of XML data.
Without a decent library, parsing XML in javascript is quite tedious.I consistently found myself digging up the reference docs each time I needed to implement an XHR and parse XML.
Feeling the need to find an alternative before I drove myself down a path of XML ALL CAPS RAGE, I began studying the javascript language more in depth. One of the neatest things I found out about JavaScript was that JavaScript objects are also associative arrays. HUGE.
This means that /* someObject.methodName */ is the same as /* someObject["methodName"] */. This minor feature provides a wide array of data manipulation. In fact, Javascript is a very object-oriented language.
JSON
JSON, or JavaScript Object Notation, is a light-weight data-interchange format. It is a suitable replacement for XML (in most cases) due to its smaller size, and natural interpretation within JavaScript. As I mentioned above, JavaScript objects have a natural feature of also being Associative Arrays.
Example: (Test this code here)
{ cols: [{id: 'username', label: 'User Name', type: 'string'}, {id: 'date', label: 'Date Sent', type: 'date'}, {id: 'message', label: 'Message', type: 'date'}], rows: [{c:[{v: 'Mike'}, {v: new Date(2008, 1, 28)},{v: "Last Message"}]}, {c:[{v: 'Bob'}, {v: new Date(2007, 5, 1)},{v: "I see you Alice"}]}, {c:[{v: 'Alice'}, {v: new Date(2006, 7, 16)},{v: "Cool!"}]}, {c:[{v: 'Frank'}, {v: new Date(2007, 11, 28)},{v: "Welcome!"}]}, {c:[{v: 'Floyd'}, {v: new Date(2005, 3, 13)},{v: "Dance with me!"}]}, {c:[{v: 'Fritz'}, {v: new Date(2011, 6, 1)},{v: "Good Game!"}]} ] }
The example above is a sample JSON file. If I declare the above string as a variable, I have access to the data in a number of different ways.
Example: (Test this code here)
$(function(){ var data= { cols: [{id: 'username', label: 'User Name', type: 'string'}, {id: 'date', label: 'Date Sent', type: 'date'}, {id: 'message', label: 'User Message', type: 'date'}], rows: [{c:[{v: 'Mike'}, {v: new Date(2008, 1, 28), f:'February 28, 2008'},{v: "Last Message"}]}, {c:[{v: 'Bob'}, {v: new Date(2007, 5, 1)},{v: "I see you Alice"}]}, {c:[{v: 'Alice'}, {v: new Date(2006, 7, 16)},{v: "Cool!"}]}, {c:[{v: 'Frank'}, {v: new Date(2007, 11, 28)},{v: "Welcome!"}]}, {c:[{v: 'Floyd'}, {v: new Date(2005, 3, 13)},{v: "Dance with me!"}]}, {c:[{v: 'Fritz'}, {v: new Date(2011, 6, 1)},{v: "Good Game!"}]} ] }; var messageLabel = data.cols[2].label; // Returns "User Message" var mLabel = data["cols"][2].label; // Same as above
As you can see, we do not need to call any library functions in order to begin accessing the data. The data is already in object form ready for manipulation. The example above uses the json format outlined in the Google Visualization API documentation.
JSONP
JSON is quite powerful, but JSONP (or JSON with Padding) turns JSON into a very good choice for data transport. JSONP is a way of getting around the same domain origin problem in JavaScript. This is particularly useful when developing mobile applications. Read more about it over at IBM's developerWorks.
Learn more about JSON, JSONP, and XML at the resources below!
- Cross Domain Communication with JSONP - http://www.ibm.com/developerworks/library/wa-aj-jsonp1/
- Google Chart Tools - http://code.google.com/apis/chart/interactive/docs/datatables_dataviews.html
- Parsing XML in JavaScript - http://www.hiteshagrawal.com/javascript/javascript-parsing-xml-in-javascript
- JavaScript Objects as Associative Arrays - http://www.quirksmode.org/js/associative.html
