Just as you can store data in XML and access it without a browser refresh using AJAX you can also do the same with a format called JSON. JSON is simply short for JavaScript Object Notation, ie JSON is JavaScript. This means objects (information) is stored in a native JavaScript format.
This article will address pros and cons and potential pitfalls of using these formats and why I eventually moved from XML to JSON for LocalHero.
Why use JSON
As JSON data is Javavscript it has a number of differences to XML. Firstly its does not need to be parsed to create variable or function, as soon as the file is loaded the information or function exists. If your JSON file contains numeric data (e.g. {“lat”:43.65654} rather than {“lat”:”43.65654″}) then you won’t need to use parseFloat() and parseInt() to convert the data and unlike XML, JSON files can contain < and >.
On the downside: the JSON data format has a more complicated structure, so it’s more difficult to create and maintain the data file or to write server-side code that will generate JSON files. Moreover its even less forgiving with format errors than XML and probably not as easily human readable.
The other major issue is one of trust. As JSON is javavScript you should trust the source before you use it. otherwisethe browser could be hijacked. The bottom line is treat JSON files obtained from a third party source with as much care as you would with third-part Javascript files. A JSON file can include calls to any accessible Javascript function.
The main advantage
If it was just a question of the above factors in my opinion XML would be be preferred over JSON, although there would not be much in it.
But JSON has one major advantage over XML. Because JSON is JavaScript it is not restricted by the cross domain request restriction of the XMLHttpRequest object. Using JSON data feeds you can create AJAX web applications that dynamically access data from a site not on the same domain.
How does it achieve this
This is done using JSON and a little bit of DOM manipulation.
If you look in the head part of a HTML you may see some <script> tags referencing a source file from a site from another domain. You probably also know that JavaScript can change the structure of a html document dynamically (the DOM).
If you put the two together get your javascript to dynamically add a new script referencing your JSON to the <head> section of the html document you get cross domain AJAX using JSON.
I show you a specific example of how I implment this on LocalHero next.
Potential Pitfalls of JSON Approach
- Be aware that Javascript input/output is asynchronous, so that the browser can get on with doing other things like fetching images if the input/output request takes a while to complete.
If you’re used to programming languages that wait for i/o to complete, you might tend to put code that uses the data read from the file after the “GDownloadUrl()” statement. That would be wrong because code placed there would get executed immediately rather than waiting for the data to arrive. Any code that acts on the retrieved data should be placed inside the call back function.
- If you’re using an application or script to create your JSON file, watch out for the data types. If the numeric data is being served as strings, then you will need to use parseInt() and parseFloat() in your Javascript, just like you would do when using XML.