JavaScript Object Notation
The successor to
XML in the browser, JSON aspires to be nothing more than a simple and elegant
data format for the exchange of information between the browser and server; and
in doing this simple task it will usher in the next version of the World Wide
Web itself.
Creating A New Object
The old way to
create a new object was to use the new keyword.
var myJSON = new Object();
This method has
been deprecated now in favor of simply defining an empty object with squigly
braces…
var myJSON = {};
Objects as Data
<?xml
version="1.0"?>
<myFirstJSON>
<firstName>John</firstName>
<lastName>Doe</lastName>
<age>23</age>
</myFirstJSON>
We could represent the xml in the following
JSON Format.
var
myFirstJSON = { "firstName" : "John",
"lastName" : "Doe",
"age" : 23 };
We could access it using the Object Name
document.writeln(myFirstJSON.firstName); // Outputs
John
document.writeln(myFirstJSON.lastName); // Outputs
Doe
document.writeln(myFirstJSON.age);
// Outputs 23
In XML you have to use parser to retrieve the
data and it takes more processing time.
This object
has 3 properties or name/value pairs. The name is a string -- in our example,
firstName, lastName, and age. The value can be any Javascript
object (and remember everything in Javascript is an object so the value can be
a string, number, array, function, even other Objects) -- In this example our
values are John, Doe, and 23. John and Doe are strings but age is a number and
as you can see this is not a problem.
var employees = {
"accounting" : [ // accounting is an array in employees.
{ "firstName" :
"John", // First element
"lastName" :
"Doe", //Instead of XPATH employees.accounting[0].lastName
"age"
: 23 },
{ "firstName" :
"Mary", // Second Element
"lastName" :
"Smith", //Instead
of XPATH employees.accounting[1].lastName
"age"
: 32 }
], // End "accounting" array.
"sales"
: [ // Sales is another array in employees.
{ "firstName" :
"Sally", // First Element
"lastName" :
"Green", //Instead
of XPATH employees.sales[0].lastName
"age"
: 27 },
{ "firstName" :
"Jim", // Second Element
"lastName" :
"Galley",
//Instead of XPATH employees.sales[1].lastName
"age"
: 41 }
] // End "sales" Array.
} // End Employees
In XML
Representation
<employees>
<accounting>
<firstName>John</firstName>
<lastName>Doe</lastName> <!-- Xpath //employees/accounting[0]/lastName -->
<age>23</age>
</accounting>
<accounting>
<firstName>Mary</firstName>
<lastName>Smith</lastName> <!-- Xpath
//employees/accounting[1]/lastName -->
<age>32</age>
</accounting>
<sales>
<firstName>Sally</firstName>
<lastName>Green</lastName> <!-- Xpath
//employees/sales[0]/lastName -->
<age>27</age>
</sales>
<sales>
<firstName>Jim</firstName>
<lastName>Gallery</lastName> <!-- Xpath
//employees/sales[1]/lastName -->
<age>41</age>
</sales>
</employees>
Accessing Data In JSON
var
myObject = { 'color' : 'blue',
'animal' : {'dog' : 'friendly' } //Instead of
XPATH myObject.animal.dog
};
<myObject>
<color>blue</color>
<animal>
<dog>friendly</dog> <!-- //XPath //myObject/color/animal/dog
-->
</animal>
</myObject>
Receiving JSON via AJAX
var
JSONFile = "someVar = { 'color' : 'blue' }"; //
example of what is received from the server.
eval(JSONFile); //
Execute the javascript code contained in JSONFile.
document.writeln(someVar.color); //
Outputs 'blue'
JSON Via Callback
function
processData(incommingJSON) {
document.writeln(incommingJSON.color); // Outputs
'blue'
}
// example of what is received from
the server...
var JSONFile = "processData( {
'color' : 'blue' } )";
eval(JSONFile);
Retrieving JSON Data via Ajax
function processData(JSONData) {
alert(JSONData.color);
}
var ajaxRequest = new ajaxObject('http://www.somedomain.com/getdata.php');
ajaxRequest.callback = function
(responseText) {
eval(responseText);
}
ajaxRequest.update();
// In this example we assume the server sends back the
following data file
// (which the ajax
//
// processData( { "color" : "green" }
)
Howto Send JSON Data To The Server
var
toServer = employees.toJSONString();
document.writeln(toServer);
Outputs:
{"accounting":[{"firstName":"John","lastName":"Doe","age":23},{"firstName":"Mary","lastName":"Smith","age":32}],"sales":[{"firstName":"Sally","lastName":"Green","age":27},{"firstName":"Jim","lastName":"Galley","age":41}]}
JSON
Security
http://www.fortify.com/landing/downloadLanding.jsp?path=%2Fpublic%2FJavaScript_Hijacking.pdf
JSON Best Practices
Never Trust The
Browser
Keep Data Clean
(Don't embed functions in your JSON data)
Avoid Third Party
JSON
Authenticate on
the server side all JSON data requests (make sure they're on your site)
Use SSL (Browser
Encryption) for sensitive data.
The future of JSON
In 2008 most browsers will be able to parse JSON
and to convert any variable into JSON. There is also an upcoming standard (also
from Douglas Crockford) which will enable a browser to securely request a
JSONfile from outside the current domain. When both of these technologies have
been implemented, we will be entering the world of Web 3.0 where any browser
can request any JSON published data anywhere in the world and manipulate it to
its own ends without the need to involve any proxy servers.
