JSON stands for JavaScript Object Notation. It is a widely-used model for transferring variable data as text, and is often used in combination with AJAX to create the basis for highly-interactive, portable, and modular websites (Facebook, Twitter, etc).

If you are familiar with JavaScript objects, then you already know JSON! If you aren't, it is very easy to learn. A JavaScript object is just like an object in ActionScript 3 or an associative array in PHP, just with slightly different syntax.

Here is the basic syntax for JSON. This object contains two strings, an array, and an object:

{
"one": "A Number",
"hello": "world",
"myarray": [
"orange",
"apple",
"banana"
],
"myobject": {
"library": "books",
"bar": "alcohol"
}
}
The above can also be expressed like this:

{
"one": "A Number",
"hello": "world",
"myarray": ["orange", "apple", "banana"],
"myobject": {"library": "books", "bar": "alcohol"}
}
If your arrays and objects are very small then it is a good way to reduce the number of code lines, though most tutorials will use the first syntax.

Here is that object being used in JavaScript:

var myObject = {
"one": "A Number",
"hello": "world",
"myarray": ["orange", "apple", "banana"],
"myobject": {"library": "books", "bar": "alcohol"}
};
alert(myObject.one);
alert(myObject["hello"]);
alert(myObject.myarray[0]);
alert(myObject["myarray"][1]);
Notice that you can call an object attribute using a period or brackets with quotes.

Using It

Now that you have the syntax, how can you use it? Let's say you have a page that uses AJAX to update two different elements. You've sent an http request to an external PHP file from JavaScript, and now that external PHP file is going to send some HTML back to the main page and you need to know what HTML goes to which of the two elements. On your external PHP file, you would create an associative array that might look like this:

$return = array(
'header' => 'Header text.',
'footer' => 'Footer text.'
);
To get the JSON textual representation of that array, you use the json_encode function of PHP, which will give you a text string like this:

{"header":"Header text.","footer":"Footer text."}
With the return information encoded as a textual JSON object, you can send it back to the client-side.

Once on the client-side, there's just one more step, which is to convert the textual data to a JavaScript object. There are a number of ways to do this, but unfortunately since JavaScript is client-side there are some issues with many of them. The most common method is to use the eval function of JavaScript like so:

var myObject = eval('(' + ajax.responseText + ')');
The reason for the extra parentheses is to account for a potential ambiguity with the first curly brace.

You might use the return data like so:

var myObject = eval('(' + ajax.responseText + ')');
document.getElementById('header').innerHTML = myObject.header;
document.getElementById('footer').innerHTML = myObject.footer;
If the source of the response text is a trusted source, then using the eval function can be okay. If not, then eval opens you up to security risks, since it will run anything inputted, including malicious scripts.

For a more robust method of converting a JSON string into a JavaScript object, you can use the built-in JSON.parse method, which checks the validity of the JSON text before running it. However, that method is not supported by some older browsers, and could leave some users with a malfunctioning page. What many people prefer to do is to include a 3rd party JSON parser (more information here), which gives you control over how the JSON is parsed and security.