Wednesday, May 9, 2007

Using JSON in AJAX based applications

Who the hell is Json ?
Ajax is a very popular way to create dynamic web2.0 style web pages. It is a method of making asynchronous Javascript calls from web pages to web servers, allowing web pages that refresh different parts of the page with server data without loading the whole page every time. Ajax is used for many different tasks from news reels to rating widgets and much more. The Ajax interface is simple and open. Send an Http request with parameters info, and receive a call-back with the Http response. You can send anything both ways, but when you need to move large chunks of complex data you are on your own. You have to define the data structures, take care of any errors that happen, and so on.

Json stands for JavaScript Object Notation. Json is a protocol (like Xml is) for defining data passed through Ajax requests and responses. Json does not have to be used only with Ajax, it can be used to define javascript objects out of any data received to the browser. But Json is at it's best with Ajax, which demands some standard protocol for moving data through it.

Json is supported on many platforms, like other open standards, and I will share my experience using it with Asp.Net and Visual Studio.

Who likes Json ?
Json is good for any Ajax situation that uses more then one or two parameters. The sites that make the most out of it are those built Object Oriented. Json is a simple way to maintain in Javascript Client code the same Object structure that you use on the server for getting the data and using your business-objects. If you keep to the same objects structure even through your Xhtml code and Css files, you will get a very flexible and stable site.

Implementing Json
Because Json is a client-server protocol there are two sides to the implementation :)
For server side i use Newtonsoft Json.NET. It is a Dll file and Xml file that reside in your bin directory of the site, and allows you (after creating the proper reference) to write this kind of code in your server pages:

Product product = new Product();
product.Name = "Apple";
product.Expiry = new DateTime(2008, 12, 28);
product.Price = 3.99M;
product.Sizes = new string[] { "Small", "Medium", "Large" };
string output = JavaScriptConvert.SerializeObject(product);
//  "Name": "Apple",
//  "Expiry": new Date(1230422400000),
//  "Price": 3.99,
//  "Sizes": [
//    "Small",
//    "Medium",
//    "Large"
//  ]
Product deserializedProduct =
(Product)JavaScriptConvert.DeserializeObject(output, typeof(Product));

This code is a sample of how to convert any custom object that you use in your site to a string in Json format. This string is passed back to the client inside the Ajax response. The last line of code shows how to reverse the process, and convert Json strings that are received from the client into server objects.

On the client side things look much the same, to the surprise of many Javascript programmers, me included.
In order to parse the Json strings into Javascript objects on the client I use the json.js file from It includes a Json parser. The client side code for reading a Json string will be:

var myObject = myJSONtext.parseJSON(filter);
Then you can use myObject to access all his properties as they were on the server. Json supports any structure that includes objects with pairs of name-value properties inside them, and arrays of these objects, in any depth of nesting.
When you are done juggling these objects on the client you can send them back to the server, maybe with updated data or even send totally different objects. anyway, the code will look like this:

var myJSONText = myObject.toJSONString();

This is pretty much the basics of json, but there is much more, so expect more on Json soon.

If you are using Json in your work please reply and tell me how is it working for you, and what you are using it for.

Benny is inlove with Json :)

blog comments powered by Disqus