JavaScript Object Notation (JSON)

J ava S cript O bject Notation (JSON) Prepared by: Chandra Maul Sharma Software Engineer Oct -20-2011 BOSS Webtech Private Limited www.bosswebtech.com

What is JSON? JSON is syntax for storing and exchanging text information. Much like XML. JSON is smaller than XML, and faster and easier to parse. JSON stands for J ava S cript O bject N otation JSON is lightweight text-data interchange format JSON is language independent * JSON is "self-describing" and easy to understand

JSON Example { "employees": [ { "firstName":"John" , "lastName":"Doe" }, { "firstName":"Anna" , "lastName":"Smith" }, { "firstName":"Peter" , "lastName":"Jones" } ] }

Why Called JSON The JSON text format is syntactically identical to the code for creating JavaScript objects. Because of this similarity, instead of using a parser, a JavaScript program can use the built-in eval() function and execute JSON data to produce native JavaScript objects.

JSON Example <html> <body> <h2>JSON Object Creation in JavaScript</h2><p> Name: <span id="jname"></span><br /> Age: <span id="jage"></span><br /> Address: <span id="jstreet"></span><br /> Phone: <span id="jphone"></span><br /> </p> <script type="text/javascript"> var JSONObject= { "name":"John Johnson",

"street":"Oslo West 555", "age":33, "phone":"555 1234567"}; document.getElementById("jname").innerHTML=JSONObject.name document.getElementById("jage").innerHTML=JSONObject.age document.getElementById("jstreet").innerHTML=JSONObject.street document.getElementById("jphone").innerHTML=JSONObject.phone </script> </body> </html>

JSON Is Not... JSON is not a document format. JSON is not a markup language. JSON is not a general serialization format. No cyclical/recurring structures. No invisible structures. No functions .

Why Used JSON? For AJAX applications, JSON is faster and easier than XML: Using XML Fetch an XML document Use the XML DOM to loop through the document Extract values and store in variables Using JSON Fetch a JSON string eval() the JSON string

Languages ActionScript C / C++ C# Cold Fusion Delphi E Erlang Java Lisp Perl Objective-C Objective CAML PHP Python Rebol Ruby Scheme Squeak

JSON Syntax Rules JSON syntax is a subset of the JavaScript object notation syntax. Data is in name/value pairs Data is separated by comma Curly brackets holds objects Square brackets holds arrays

JSON Values JSON values can be: A number (integer or floating point) A string (in double quotes) A Boolean (true or false) An array (in square brackets) An object (in curly brackets) null

JSON Objects JSON objects are written inside curly brackets, Objects can contain multiple name/values pairs: Example : { "firstName":"John" , "lastName":"Doe" } This is also simple to understand, and equals to the JavaScript statements: firstName = "John“ lastName = "Doe"

Example Object { "name": "Jack B. Nimble", "at large": true, "grade": "A", "format": { "type": "rect", "width": 1920, "height": 1080, "interlace": false, "framerate": 24 } }

JSON Arrays JSON arrays are written inside square brackets. An array can contain multiple objects: { "employees": [ { "firstName":"John" , "lastName":"Doe" }, { "firstName":"Anna" , "lastName":"Smith" }, { "firstName":"Peter" , "lastName":"Jones" } ] } In the example above, the object "employees" is an array containing three objects. Each object is a record of a person (with a first name and a last name).

Strings Sequence of 0 or more Unicode characters No separate character type A character is represented as a string with a length of 1 Wrapped in " double quotes “ Backslash escapement

Numbers Integer Real Scientific No octal or hex No NaN or Infinity Use null instead Booleans : A ) True B ) False NULL : A value that isn't anything

Arrays vs Objects Use objects when the key names are arbitrary strings. Use arrays when the key names are sequential integers. Don't get confused by the term Associative Array. JSON Files : The file type for JSON files is ".json“ The MIME type for JSON text is "application/json"

Rules A JSON decoder must accept all well-formed JSON text. A JSON decoder may also accept non-JSON text. A JSON encoder must only produce well-formed JSON text. Be conservative in what you do, be liberal in what you accept from others.

JSONRequest A new facility. Two way data interchange between any page and any server. Exempt from the Same Origin Policy. Campaign to make a standard feature of all browsers.

JSONRequest function done ( requestNr , value , exception ) { ... } var request = JSONRequest.post( url , data , done ); var request = JSONRequest.get( url , done ); No messing with headers. No cookies. No implied authentication .

Arguments against JSON JSON Doesn't Have Namespaces. JSON Has No Validator. JSON Is Not Extensible. JSON Is Not XML.

JSON is Not Extensible It does not need to be. It can represent any non-recurrent data structure as is. JSON is flexible. New fields can be added to existing structures without obsoleting existing programs.

JSON and PHP json_encode : <?php $arr = array('a' => 1, 'b' => 2, 'c' => 3, 'd' => 4, 'e' => 5); echo json_encode($arr); ?> The above example will output: {"a":1,"b":2,"c":3,"d":4,"e":5}

Json_decode : <?php $json = '{"a":1,"b":2,"c":3,"d":4,"e":5}'; var_dump(json_decode($json)); var_dump(json_decode($json, true)); ?> The above example will output: object(stdClass)#1 (5) { ["a"] => int(1) ["b"] => int(2) ["c"] => int(3) ["d"] => int(4) ["e"] => int(5) } array(5) { ["a"] => int(1) ["b"] => int(2) ["c"] => int(3) ["d"] => int(4) ["e"] => int(5) }

Creating JavaScript Objects < html > < head > < script src="http://www.json.org/json2.js"></ script >< script >// JavaScript source code will be here </ head > < body > < form name="personal" action="" method="POST"> Name < input type="text" name="firstname">< br > Email < input type="text" name="email">< br > Hobby < input type="checkbox" name="hobby" value="sport"> Sport < input type="checkbox" name="hobby" value="reading"> Reading < input type="checkbox" name="hobby" value="music"> Music < input type="button" name="valid" value="Validate" onclick="validate()"> </ form > </ body ></ html >

function validate() { var p = document.forms['personal']; var JSONObject = new Object; JSONObject.firstname = p['firstname'].value; JSONObject.email = p['email'].value; JSONObject.hobby = new Array; for ( var i=0; i<3; i++) { JSONObject.hobby[i] = new Object; JSONObject.hobby[i].hobbyName = p['hobby'][i].value; JSONObject.hobby[i].isHobby = p['hobby'][i].checked; } JSONstring = JSON.stringify(JSONObject); runAjax(JSONstring); }

JSON object to PHP with AJAX var request; function runAjax(JSONstring) { request = getHTTPObject(); request.onreadystatechange = sendData; request.open("GET", "parser.php?json="+JSONstring, true); request.send(null);} // function is executed when var request state changes function sendData() { // if request object received response if(request.readyState == 4) { // parser.php response var JSONtext = request.responseText; // convert received string to JavaScript object var JSONobject = JSON.parse(JSONtext); // notice how variables are used var msg = "Number of errors: "+JSONobject.errorsNum+ "\n- "+JSONobject.error[0]+ "\n- "+JSONobject.error[1]; alert(msg); }}

JSON To PHP <?php // decode JSON string to PHP object $decoded = json_decode($_GET['json']); // do something with data here // create response object $json = array(); $json['errorsNum'] = 2; $json['error'] = array(); $json['error'][] = 'Wrong email!';$json['error'][] = 'Wrong hobby!'; // encode array $json to JSON string $encoded = json_encode($json); // send response back to index.html// and end script execution die($encoded); ?>

OUTPUT stdClass Object ( [firstname] => fgfg [email] => [hobby] => Array ( [0] => stdClass Object ( [hobbyName] => sport [isHobby] => 1 ) [1] => stdClass Object ( [hobbyName] => reading [isHobby] => ) [2] => stdClass Object ( [hobbyName] => music [isHobby] => ) ))

BOSS Webtech is a process oriented design house specializing in web design, web development, backend web programming, mobile application development and other web and mobile related design and support services. Recently launched BizPlus – Mobile based survey software. Check it more here http://bizplusonline.com/ More products here http://www.bosswebtech.com/products/products.html Contact BOSS Webtech Call 831-998-9121 at US EST/CST/MST/PST Zone or email [email_address] About BOSS Webtech

JavaScript Object Notation (JSON)

More Related Content

What's hot

Viewers also liked

Similar to JavaScript Object Notation (JSON)

More from BOSS Webtech

Recently uploaded

JavaScript Object Notation (JSON)