JSON - JavaScript Object Notation

JSON (To be pronounced jeson or jayson) is a part of the ECMAScript standard since ECMA has defined in 1999 the eval function that parses the format.
It has been popularized with the success of Ajax.
The JSON word appears often when one is speaking about Ajax. We know this is another data format, that can replace XML, and this format is supported by a lot of programmers. But what is exactly JSON, what are the advantages?

Summary

JSON vs. XML

Benefits of JSON:

Benefits of XML:

Unfortunally, both XML and JSON are not suitable to store directly a large amount of data in binary form.

The syntax of JSON

The components of JSON are:

  1. An object: contains other objets or attributes.
  2. A scalar variable: Number, String, Boolean.
  3. An array.
  4. Literal values: null, true, false, string of characters, and numerical values.

Object

It contains a member or a list of members, and each member has the form:

"name" : "value"

The syntax of the object is:

{ member, member, .... }

Array

A collection of values, separated by commas. 
[ value, value, ....]

Values

A value may be: an object, an array, a litteral (string, number, true, false, null).

Nothing more is required to create a JSON file!

Example of JSON file

A simple example, designing a menu:
It is an object made of members that are an attribute and an array that holds other objects, the rows of the menu.

{ 
  "menu": "File", 
  "commands": [ 
      {
          "title": "New", 
          "action":"CreateDoc"
      }, 
      {
          "title": "Open", 
          "action": "OpenDoc"
      }, 
      {
          "title": "Close",
          "action": "CloseDoc"
      }
   ] 
}

The XML equivalent: 

<?xml version="1.0" ?>
<root>
  <menu>File</menu>
  <commands>
     <item>
         <title>New</title>
         <action>CreateDoc</action>
     </item>
     <item>
         <title>Open</title>
         <action>OpenDoc</action>
     </item>
     <item>
         <title>Close</title>
         <action>CloseDoc</action>
     </item>
  </commands>
</root>

How to use the format

The JSON file allows to load data from the server or to send data to it, in this format. For example, storing the content of a form, just filled by an user. This involves three steps: the browser processing, the server processing, and the data exchange between them.

Client side (browser)

This is rather easy, as JSON is a part of the JavaScript definition. The content of a file, or the definition of the data is assigned to a variable, and this variable becomes an object of the program.

Server side

JSON file are used by various programming languages, including PHP and Java thanks to parsers that allow to get the content and that may even convert it into classes and attributes of the language.
The json.org includes a C parser and a list of parsers in other languages.

Data exchange

Loading a file may be accomplished from JavaScript in several ways:
- direct including of the file into the HTML page, as a JavaScript .js external file.
- loading by a JavaScript command.
- using XMLHttpRequest.
The JSON file is parsed by the eval() JavaScript function.

Sending the file to the server may be accomplished by XMLHttpRequest. The file is sent as a text file and processed by the parser of the programming language that uses it.

Example

The XMLHttpRequest code:

var req = new XMLHttpRequest();
req.open("GET", "file.json", true); 
req.onreadystatechange = myCode;   // the handler 
req.send(null);

The JavaScript handler: 

function myCode() 
{ 
   if (req.readyState == 4) 
   { 
        var doc = eval('(' + req.responseText + ')'); 
   }
}
Using the data: 
var menuName = document.getElementById('jsmenu');   // finding a field
menuName.value = doc.menu.value;           // assigning a value to the field
How to access data: 
doc.commands[0].title      // read value of the "title" field in the array
doc.commands[0].action     // read value of the "action" field in the array

Simple demo

This demo loads a json file that hold a menu and displays the content on the page. Details of the code in the archive.

Source code

YAML vs. JSON

Acronym for "YAML Ain't Markup Language" (this is recursive), YAML is another data exchange format with the goal to serialize data to objects of programming languages. It makes use of whitespace indentation to denote structure, along with a large set of special characters: & ! ? - --- [] * etc...
This makes a definition rather obfuscated, unlike that of JSON.
A JSON definition is a valid YAML content (and not conversely), apart the comments /* */ that must be replaced by #.

Resources

© 2006-2014 Xul.fr