UI Tips
JSON
JavaScript Object Notation
By Andrew Flick and Anthony Lombardo
Passing information back and forth through the use of asynchronous callbacks has been the hype of the industry for quite a while now. The term AJAX and the practical examples of Google Maps has generated so much enthusiasm that even this column has delved into it a multitude of times. As developers experiment more with this technology, they find the need to make the information passed to and from the server increasingly more light-weight. Enter JavaScript Object Notation, or JSON, a text format for the serialization of structured data. This article will look at what JSON is, how it interacts with JavaScript, and some thoughts on the competition between JSON and XML.
Definition of JSON
JSON is a data interchange format. JSON is growing in popularity as a means for passing data instead of using XML. One of the reasons given for this is the simplicity of parsing JSON by utilizing the built-in eval procedure:
myObject = eval('(' + json_data + ')');
NOTE: The problem with this argument is security; the eval function does not care if this is JSON-specific information or malicious code. So, you should only use this if the source of the data can be trusted. However, when security is a concern you can use the open-source JSON parser, which will only recognize JSON text by way of regular expressions.
So what exactly does JSON look like? JSON consists of objects that begin and end with curly-braces ({}). Objects can contain members that consist of strings and values. The strings and values are separated by a colon and the different members are separated by a comma. Also, you can define an array of objects that are separated by commas. Values used can be a string, number, object, array, or literals, such as true, false, and null. Lastly, the definition of a string is anything surrounded by double quotes and can contain Unicode characters or the common backslash escapes. This definition is demonstrated here, and can be found at http://www.JSON.org:
object
{ }
{ members }
members
string: value
members, string : value
array
[ ]
[elements]
elements
value
elements, value
value
string
number
object
array
true
false
null
JSON in Code
So, taking this definition of what a JSON object looks like, the following code demonstrates the definition of an object, known as links, that contains an array of links defined by uri s and titles:
{"links": [
{"uri":"http://www.infragistics.com", "title": "Infragistics"},
{"uri":"http://www.aspnetpro.com", "title": "ASP.NET PRO"},
{"uri":"http://www.microsoft.com", "title": "Microsoft"}
]
};
JSON Working with JavaScript
Now that we ve seen a definition of a JSON object, let s take that one step further by utilizing it in JavaScript. JSON is a subset of the object literal notation of JavaScript. Essentially, being a subset of JavaScript enables JSON to be used within the language. Let s demonstrate this by taking the previously defined object and assigning it to a var in JavaScript, and then show how to access the different members:
var myLinks =
{"links": [
{"uri":"http://www.infragistics.com", "title": "Infragistics"},
{"uri":"http://www.aspnetpro.com", "title": "ASP.NET PRO"},
{"uri":"http://www.microsoft.com", "title": "Microsoft"}
]
};
myLinks.links[0].title //"Infragistics"
JSON vs. XML
As we were doing research on JSON, it seems that there is a little bit of an argument for using it instead of using XML. We d like to say that before this gets out of hand, there is a place for JSON and there is a place for XML. If you re needing to pass around something that is going to have an XSLT applied to it for UI generation, go with XML. But if you want something lightweight for just passing around data, go with JSON. That said, the JSON camp does make one valid argument, in that JSON is a lot more readable.
Conclusion
In conclusion, JSON is an emerging and great way for passing structured data across the Web. When deciding whether to use XML vs. JSON, make sure you understand the technical requirement and then pick whichever makes most sense for the choice at hand. For more in-depth information on JSON, check out the Web site http://www.json.org. Also, to see a practical example of JSON in Web services, check out Yahoo s Developer Network site.
Andrew Flick is Product Manager - NetAdvantage Windows Forms Technologies & TestAdvantage for Infragistics, Inc. Prior to joining Infragistics, Andrew played an avid role in presenting on emerging .NET technologies throughout the Midwest to a variety of User Groups as well as numerous Student Groups. As an active member of the INETA Academic Committee, Andrew has authored content on building successful User Groups, as well as numerous white papers on building an effective community. A Microsoft MVP, Andrew joined Infragistics in July of 2004 as a Technology Evangelist, where he was responsible for the creation of reference applications and authoring .NET technology articles for industry leading publications, as well as the world wide delivery of Infragistics Technology demonstrations. Andrew currently serves as Infragistics Product Manager for NetAdvantage Windows Forms Technologies & TestAdvantage. As product manager, he spearheads the product management and strategies of Infragistics Windows Forms Product Lines from establishing the direction through delivery. Working directly with the Director of Development, he sets the direction, plans, and manages product development. Contact Andrew at mailto:[email protected].
Anthony Lombardo is Product Manager of NetAdvantage - ASP.NET Technologies for Infragistics, Inc., and is responsible for spearheading product management and strategies for Infragistics ASP.NET product line, working directly with the Director of Engineering to set the direction, plan, and manage product development. Prior to joining Infragistics, Anthony served as a Network Administrator for North Brunswick Board of Education and worked for Rutgers University in their technical support division. Since beginning his career with Infragistics in 2000, Anthony has been involved with every aspect of the development cycle, including playing a key role in the creation of the Presentation Layer Framework for ASP.NET, assisting in the creation and implementation of Infragistics Visual Studio 2005 project plan, and determining the product feature set for NetAdvantage 2005 for Visual Studio 2005. Contact Anthony at mailto:[email protected].
