Using JSON

The JavaScript Object Notation (JSON) is a core feature of the language. It provides a concise mechanism for creating arrays and object graphs. In order to understand JSON, we need to know how JavaScript arrays work, so let’s cover the basics of them first.

JavaScript has a built-in Array class that can be instantiated using the new keyword:

myLibrary.books=new Array();

Arrays can have values assigned to them by number, much like a conventional C or Java array:

myLibrary.books[4]=somePredefinedBook;

Or they can be associated with a key value, like a Java Map or Python Dictionary, or, indeed, any JavaScript Object:

myLibrary.books["BestSeller"]=somePredefinedBook;

This syntax is good for fine-tuning, but building a large array or object in the first place can be tedious. The shorthand for creating a numerically indexed array is to use square braces, with the entries being written as a comma-separated list of values, thus:

myLibrary.books=[predefinedBook1,predefinedBook2,predefinedBook3];

And to build a JavaScript Object, we use curly braces, with each value written as a key:value pair:

myLibrary.books={

bestSeller : predefinedBook1,

cookbook : predefinedBook2,

spaceFiller : predefinedBook3

};

In both notations, extra white space is ignored, allowing us to pretty-print for clarity. Keys can also have spaces in them, and can be quoted in the JSON notation, for example:

“Best Seller” : predefinedBook1,

We can nest JSON notations to create one-line definitions of complex object hierarchies (albeit rather a long line):

var myLibrary={

location : "my house",

keywords : [ "root vegetables", "turnip", "tedium" ],

books: [

{

title : "Turnip Cultivation through the Ages",

authors : [

{ name: "Jim Brown", age: 9 },

{ name: "Dick Turnip", age: 312 }

],

publicationDate : "long ago"

},

{

title : "Turnip Cultivation through the Ages, vol. 2",

authors : [

{ name: "Jim Brown", age: 35 }

],

publicationDate : new Date(1605,11,05)

}

]

};

Sharp-eyed readers will have noted that we populated the publication date for the second book using a JavaScript Date object. In assigning the value we can use any JavaScript code, in fact, even a function that we defined ourselves:

function gunpowderPlot(){

return new Date(1605,11,05);

}

var volNum=2;

var turnipVol2={

title : "Turnip Cultivation through the Ages, vol. "+volNum,

authors : [

{ name: "Jim Brown", age: 35 }

],

publicationDate : gunpowderPlot()

}

We can also define member functions for our JSON-invoked objects, which can be invoked later by the object:

var turnipVol2={

title : "Turnip Cultivation through the Ages, vol. "+volNum,

authors : [

{ name: "Jim Brown", age: 35 }

],

publicationDate : gunpowderPlot()

},

summarize:function(len){

if (!len){ len=7; }

var summary=this.title+" by " + this.authors[0].name +" and his cronies is very boring. Z";

for (var i=0;i< len;i++){

summary+="z";

}

alert(summary);

}

};

...

turnipVol2.summarize(6);

The summarize() function has all the features of a standard JavaScript function, such as parameters and a context object identified by the keyword this. Indeed, once the object is created, it is just another JavaScript object, and we can mix and match the JavaScript and JSON notations as we please. We can use JavaScript to fine-tune an object declared in JSON:

var numbers={ one:1, two:2, three:3 };

numbers.five=5;

We initially define an object using JSON syntax and then add to it using plain JavaScript. Equally, we can extend our JavaScript-created objects using JSON:

var cookbook=new Object();

cookbook.pageCount=321;

cookbook.author={

firstName: "Harry",

secondName: "Christmas",

birthdate: new Date(1900,2,29),

interests: ["cheese","whistling","history of lighthouse keeping"]

};

With the built-in JavaScript Object and Array classes and the JSON notation, we can build object hierarchies as complicated as we like, and we could get by with nothing else. JavaScript also offers a means for creating objects that provides a comforting resemblance to class definitions for OO programmers, so let’s look at this next and see what it can offer us.

JavaScript Object Notation.

According to Douglas Corckford’s website, JSON is a lightweight data-interchange format. It is easy for humans to read and write… JSON is a text format that is completely language independent but uses conventions that are familiar to programmers of the C-family of languages, including C, C++, C#, Java, JavaScript, Perl, Python, and many others.”

Object Notation can be expressed in the following format:

var obj = {
// string
a : 'sampleValue',
// array
b : [obj1,obj2,'three',4,obj5],
// function
c : function() {
var bang = this.a;
}
}

JSON is built on two structures:

• A collection of name/value pairs. In various languages, this is realized as an object, record, struct, dictionary, hash table, keyed list, or associative array.
• An ordered list of values. In most languages, this is realized as an array, vector, list, or sequence.

Reasons for JSON

• JSON is easy. No really. It’s so easy, it’ll make you sick.
• If you’re familiar with writing classes in PHP, then you’ll most definitely be comfortable with writing JavaScript in Object Notation
• JSON is nothing more than name : value pairs assigned within an object.
• JSON is easy to understand because if written well, it’s a self-documenting structure.
• JSON is fast!
• JSON organizes the ugly mess of procedural programming. Imagine having more than one init function.
• You can impress your friends with JSON because it’s pretty looking
• Your co-workers will love you for writing in JSON because it will most likely not conflict with their scripts that are being called within the same web documents.

JSON is like XML because:

1. They are both ’self-describing’ meaning that values are named, and thus ‘human readable’
2. Both are hierarchical. (i.e. You can have values within values.)
3. Both can be parsed and used by lots of programming languages
4. Both can be passed around using AJAX (i.e. httpWebRequest)

JSON is UNlike XML because:

1. XML uses angle brackets, with a tag name at the start and end of an element: JSON uses squiggly brackets with the name only at the beginning of the element.
2. JSON is less verbose so it’s definitely quicker for humans to write, and probably quicker for us to read.
3. JSON can be parsed trivially using the eval() procedure in JavaScript
4. JSON includes arrays {where each element doesn’t have a name of its own}
5. In XML you can use any name you want for an element, in JSON you can’t use reserved words from javascript

But Why? What’s good about it?

When you’re writing ajax stuff, if you use JSON, then you avoid hand-writing xml. This is quicker. Also, with ajax services support JSON output, you can bypass difficulties of cross-domain ajax calls.

Again, when you’re writing ajax stuff, which looks easier? the XML approach or the JSON approach:
The XML approach:

1. bring back an XML document
2. loop through it, extracting values from it
3. do something with those values, etc,

versus the JSON approach:

1. bring back a JSON string.
2. ‘eval’ the JSON

Example of using JSON in AJAX to transmit data

The example is about to submit a form to a PHP page using AJAX. To keep the example simple, no data is sent (through POST) to the PHP page. Rather, data is just retrieved from the PHP page. The JSMX javascript library is very lightweight (code-wise) and sends and retrieves our data for us. The PHP page (that we make our requests to) simply prints out the data it wants to send back in a ready-to-use javascript object format.

<img src=”http://simpletutorials.com/tutorials/javascript/simple_ajax/ajax_diagram.jpg” alt=”" />

< ?php

require_once "json/JSON.php";
$json = new Services_JSON();

//convert php object to json

$value = array('first' => 'Steven', 'last' => 'Spielberg', 'address' => '1234 Unlisted Drive');

$output = $json->encode($value);

print($output);

?>

The JSON-PHP module can convert a PHP array of key value pairs to this JSON object.

{"first":"Steven","last":"Spielberg","address":"1234 Unlisted Drive"}

HTML page

<html>
<head>

<script src="ajax.js"></script>

<script>

/**Ajax Request (Submits the form below through AJAX
*               and then calls the ajax_response function)
*/
function ajax_request() {
var submitTo = 'ajax_request.php';
//location.href = submitTo; //uncomment if you need for debugging

http('POST', submitTo, ajax_response, document.form1);
}

/**Ajax Response (Called when ajax data has been retrieved)
*
* @param   object  data   Javascript (JSON) data object received
*                         through ajax call
*/
function ajax_response(data) {
for(var key in data) {
document.form1[key].value = data[key];
}
}

</script>

</head>
<body>

<input type="button" onclick="ajax_request()" value="Do AJAX"/><br /><br />

<form name="form1">
First <input type="text" name="first"/><br />
Last  <input type="text" name="last"/><br />
Address <input type="text" name="address"/><br />

</form>

</body>
</html>

This tutorial demonstrates how to perform AJAX functionality simply and effectively, using the AJAX JSMX library, coupled with the JSON-PHP  library.