Using JSON to Exchange Data

Javascript Object Notation (JSON) is a fancy name for a simple idea: A web page can download data stored as javascript variables. It’s caused a buzz in the tech world because JSON is much easier to load, read and manipulate compared to XML. Also, parsing large XML files can be a large performance hit – JSON gives you an object, packaged up and ready to go!

Remember the Script Tag?

In javascript you can import any script using notation like this:

<script src="http://www.mysite.com/myscript.js"></script>

The browser will pull down the script and run it inside the current page. This is how embeddable widgets like Adsense and InstaCalc work.

The neat thing is that any variables and functions defined inside the script are available to the page. If myscript.js includes a function showMeTheMoney(), your page can call it (and, presumably, get shown the money).

This is all fine and dandy, and been known for a while. A cool use is to provide dynamic data to a page with encoded Javascript variables. If the variables were “objects” and we passed them using their special “notation”, we could call the system JavaScript Object Notation. (Technically, JSON just covers the “object” part; executable functions are dynamic javascript).

Javascript has a nice notation where you can define objects using "key":"value" pairs. You can define arrays and functions this way too, so your objects are more like a class, in fact.

So why is this useful again?

So far, passing scripts around is old news. But an idea comes along: what if you load a dynamically generated script, which has data inside of it? Now you can access the data as javascript variables. Here’s what I mean:

See what’s happening here? We load the javascript (which could be updated every hour by the server), and access the Weather object it defines. Presumably, Weather.today is a string containing today’s weather. Realistically, we could have Weather[zipcode] or whatever format the site defines.

Cool, huh?

But Why Not XML?

Ah — some programmers will say “Verily, can you not download an XML file, and then process and parse it into Javascript variables?”

Sure, just like you can run a marathon or floss your teeth. Many want to, some try to, not everybody does.

XML is fine for certain things, but it can be quite cumbersome. JSON is great because you can include data in an easy, painless process. There’s no parsing step – you are getting your variables “for free” by just including the javascript file.

Also, JSON lets the site include functions, which may be used to process the data or handle other tasks.

A Few Details (As Always)

There are various ways to use JSON (see links for source of code sample):

Include a script tag directly (as above). This means the code inside the script is run immediately as the browser encounters it.

Note: The first two methods can load files from any domain; an AJAX request can normally only access files on the same domain. For a cross-domain AJAX request, you may need to use a “callback=?” parameter, like this:

This tells jQuery to create a temporary callback function to process the data, and tells the endpoint to wrap the JSON response in that callback function (example using jsoncallback=test).

Security, Security, Security

I’m not an expert in Web Security, but I know enough to realize it’s tricky and that there will be things I miss. Even the big boys like Google can get caught in bugs sometimes.

The safest approach is to only store public data with JSON. If you store private data in JSON (or XML for that matter), there are techniques where malicious sites can impersonate logged-on users. Yes, there are complicated workarounds for the security problems (like double-submitting cookies). But if you’re starting out (like me), start off using JSON for public info you don’t mind having disclosed (like weather reports).

Callbacks

The JSON data may not be a raw object; it could be an object passed to a callback function, such as:

specialFunction( {"name" : "Bob", "email": "bob@example.com"} );

In this case, the script will run a function called specialFunction that you’ve defined, passing it an anonymous object with a “name” and “email” property. Your specialFunction can then do wild things with this information.

This technique is the same at heart – this is how Google originally passed your Gmail contacts. Sometimes you can specify the name of your callback function in the URL you use to access the JSON data – it depends on the data provider.

Clean up your data. You have the raw JSON data as an object, but you may wish to wrap it in a function call. You can use a quick perl script to wrap myFunction( ) around the data above so your file does a callback when executed.

Tada! Now you have JSON data ready to access using one of the techniques above (see the currency JSON data). Inside InstaCalc, I have a static reference to the file:

<script src="http://instacalc.com/data/currencies.json"><script>

Because the bank has some namespace information, I access variables like this inside the callback function: data["frbny:DataSet"];. Of course, the details of how you access your JSON data will change given the format of your XML and the exact stylesheet you used. Play around. If you look at the raw JSON file you can see the field names you need to use.

Bonus round: Updating the JSON. If your data changes often (like currency data does), you can put the above steps into a script and run it on a schedule. The next time your webpage is loaded, it will get the new JSON data.

Parting Thoughts

JSON is a really easy way to exchange data – just think of it as including extra javascript files in your program. Read more at json.org, learn it, and love it. Good luck.

Good tips. I recently had a case to need to proxy an XML file (to get around browser security) and decided I might as well convert to JSON in the process.
There is a very good generic schema on google code.http://code.google.com/p/xml2json-xslt/
Don’t use the download though. There are versions of the schema with bug fixes in the issues.

Even-though in JavaScript it is unnecessary to quote object variable names, it is part of the language spec of JSON to ALWAYS do so, so in order to be compatible with all of the JSON parsers of the various languages, it is a better idea to go ahead and quote all object variable names in JSON data.

@anonymous: Good points, it does depend on the data set. But in general JSON tends to be leaner as there’s less punctuation, no need for closing tags, etc. Also, it’s faster in javascript contexts since you don’t need to convert the XML to a javascript object (JSON can just be sent in directly).

Normally, some teachers want to analyse the term paper titles creative writing ability of their students, however not all good students can to write correctly because of lack of knowledge or other reasons. Hence, a comparison essay service should help to create the literature term paper very fast.

In other news, good article. Oh, and to the guy who says he’s been doing something similar for 10 years and hopes you remember a name or whatever he was talking about, man, what drugs are you on and what are you talking about?