As many clever sods across the world no doubt know, AJAX stands for Asynchronous Javascript and XML. However, there is an alternative to using XML with AJAX, there is JSON which is an acronym that stands for JavaScript Object Notation. It is a method of writing JavaScript objects which is particularly useful for transmitting or receiving data to/from remote sources. Although JSON was essentially created for AJAX, it is widely considered language dependent because it outlines a set of rules for semantically correct communications.
In a nutshell, JSON provides you with formatted code for interpreting using Javascript. PHP also has two innate JSON functions as of version 5:
json_encode and
json_decode.
If we had an array like the one below containing various fruits - excuse the addition of the dragon fruit, but I've just got my paws on one after a couple of weeks of wanting to try one, then we could quite easily convert it to JSON.
PHP Code:
$aFruits = array ( 'Juicy' => 'Grapes',
'Colourful' => 'Dragon Fruit');
We can convert the array to JSON using the
json_encode function like so:
PHP Code:
$szJsonEncoded = json_encode($aFruits);
If I were to echo out the contents of
$szJsonEncoded it would leave me with a very nicely formatted JSON string:
Quote:
|
{"Juicy":"Grapes","Colourful":"Dragon Fruit"}
|
If were to then put our string directly in to Javascript it would convert it to an array. We could then easily access the items inside the array. Although JSON is intended to be used with AJAX, we are going to bypass that part to prevent confusion. Here is our Javascript code:
PHP Code:
var szJson = '({"Juicy":"Grapes","Colourful":"Dragon Fruit"})';
var szData = eval(szJson);
Note: One common problem with JSON is receiving the Javascript error "invalid label", this is typically due to the fact that you have omitted the parenthesis from the JSON string. Instead of {...} it must be ({...})
It is important to remember that the JSON source should be trusted. Using
eval can be quite dangerous and thus you should ensure that the JSON is correct. Prototype offers a lot of functions for checking the integrity of the JSON string. Once we have run
eval on our JSON string, we can access it as you would a normal array in Javascript. Thus:
PHP Code:
alert(szData['Juicy']);
Would pop-up an alert box with the word
Grape in it. Where as
Colourful would contain
Dragon Fruit.
Furthermore, PHP also offers the function
json_decode to decode JSON strings. The function has the ability to return it as an object or an associate array. By default it will return an object which is rather useful!
Continuing on from our earlier fruit array, we can decode the JSON string using the following function call:
PHP Code:
$pJsonDecoded = json_decode($szJsonEncoded);
$pJsonDecoded would now be an object containing the properties of our fruit array. These can be accessed like so:
PHP Code:
echo 'Fruit 1 is ' . $pJsonDecoded->Juicy . '<br />';
echo 'Fruit 2 is ' . $pJsonDecoded->Colourful;
This would, as you'd expect, echo out the following code in to our browser:
Quote:
Fruit 1 is Grapes
Fruit 2 is Dragon Fruit
|
If we wanted to go down the path of an associate array, then making the second argument
true for
json_decode would do just that! Like so:
PHP Code:
$aJsonDecoded = json_decode($szJsonEncoded, true);
We can therefore begin treating
$aJsonDecoded as a proper associate array, and I'm confident everybody knows how to go about that:
PHP Code:
echo 'Fruit 1 is ' . $pJsonDecoded['Juicy'] . '<br />';
echo 'Fruit 2 is ' . $pJsonDecoded['Colourful'];
There are naturally one or two things to remember with JSON. First of all, look in to the security of JSON because you do not want to open yourself up to CSRF
(Cross Site Request Forgeries) attacks of any kind. This is crucial! Secondly, JSON makes AJAX so utterly simple that I'm sure you wish you'd been using it for many years previous. I know I am!