Thursday, April 21, 2011

JSON 101

Since I watched this video from Crockford last month, I think it is time for me to get out of XML world and start to use JSON (JavaScript Object Notation). JSON, lightweight data-interchange format, is very easy to learn and use. From its official website http://www.json.org/, we can quickly understand this format. JSON is a subset of the object literal notation of JavaScript, so it can be parsed trivially using the eval() procedure in JavaScript.

JSON has two structures: object and array. 
  • An object structure is represented as a pair of curly bracket surrounding zero or more name/value pairs (or members). 
  • An array structure is represented as square brackets surrounding zero or more values (or elements).

A JSON text is a serialized object or array.

A JSON value MUST be an object, array, number, or string, or one of three literal names (true, false, null). The literal names MUST be lowercase. No other literal names are allowed.

JSON uses 6 reserved characters:
  • [ left square bracket
  • { left curly bracket
  • ] right square bracket
  • } right curly bracket
  • : colon
  • , comma 

They are used for data structures description:
  • curry brackets for object
  • square brackets for array
  • colons for name/value pair (member)
  • commas for separate member or array element

JSON value (string data type) also need escape quotation mark, reverse solidus and other control characters.
  • "    quotation mark  U+0022
  • \    reverse solidus U+005C
  • /    solidus         U+002F
  • b    backspace       U+0008
  • f    form feed       U+000C
  • n    line feed       U+000A
  • r    carriage return U+000D
  • t    tab             U+0009

JSON text encoding SHALL be in Unicode.  The default encoding is UTF-8.

JSON text media type is application/json, which is defined in RFC 4627

JSON Supports: ActionScript, C, C#, ColdFusion, E, Java, JavaScript, ML, Objective CAML, Perl, PHP, Python, Rebol, Ruby, and Lua. 

JSON v.s. XML

Same:
  • Both are hierarchical. (i.e. You can have values within values.)
  • Both can be parsed and used by lots of programming languages

Difference:
  • JSON uses JavaScript syntax is the biggest advantage. It makes it extremely easy to work with on the client side. XML uses DOM and XSLT which is a bit complex.
  • JSON is that it is lightweight, half size than XML due to its opening and closing tags. However, if you were to represent the XML with attributes rather than elements, the difference would be much less.
  • JSON is not so human readable, so we need formatter; XML is widely supported and many supported tools.
  • JSON is not "XPathable" (JavaScript objects and arrays have no comparable built-in capability), XML has that. There are some JSON related projects like jsonpath.js/JPath.js to enhance this.
  • JSON you can't use reserved words from javascript, XML can use.

JSON Formatter & Validator

http://jsonformatter.curiousconcept.com/
http://www.jsonlint.com/
http://www.jsonlint.com/?reformat=compress

JSON.parse and JSON.stringify
JSON.parse(strJSON) - converts a JSON string into a JavaScript object.
JSON.stringify(objJSON) - converts a JavaScript object into a JSON string.
https://github.com/douglascrockford/JSON-js supports this.

JSON is a subset of Javascript
Example 1:
var name = jsonobj.name;
    This is the equivalent of: >>>>
var name = jsonobj["name"];   //Associative Array - an array who's index is a string than a number

Example 2:
var Beatles = ["Paul","John","George","Ringo"];
    This is the equivalent of: >>>>
var Beatles = new Array("Paul","John","George","Ringo");

Example 3:
var Beatles = {
 "Country" : "England",
 "YearFormed" : 1959,
 "Style" : "Rock'n'Roll"
}
    This is the equivalent of: >>>>
var Beatles = new Object();
Beatles.Country = "England";
Beatles.YearFormed = 1959;
Beatles.Style = "Rock'n'Roll";

1 comment:

  1. http://www.learn-ajax-tutorial.com/Json.cfm provides a very good introduction to JSON. Above post references a lot to this tutorial.

    ReplyDelete