JSON Serialization

1. JSON Serialization

2. What is JSON? • Lightweight data interexchange format • Compared to XML • Simple • Easy for humans to read and write • Easy for machines to parse • Text format • Language independent • Supported by more than 30 languages

3. Why use JSON for AJAX? • Lighter than XML • Typed objects, while XML is not • JSON types include: object, array, string, number, boolean • XML data is always string • Native for JavaScript • The JSON serialization is actually the syntax of declaring associative array in JavaScript

4. Why use JSON for AJAX? • JSON is supported by more than 20 languages • ASP • Action Script • Java • Perl • PHP • Python • Easy to read/write at server side

5. JSON • Objects (associative arrays) are in curly brackets { and } • Object contents is collection of comma separated name:value pairs • In other languages this syntax is for object, record, structure, dictionary, hash table, keyed list, associative array, etc • Value can be number, true/false, quoted string, another object or an array • Arrays are comma separated list of values in [ and ]

6. Example JSON Object {id:15, name:"Dimitar", age:23, hobbies: ["development", "music", "beer"], address: { city: "Sofia", loc: "Drujba 2", googleMapsURL: null }, oldAddresses: [ {city: "Ruse", loc: "Zgorigrad", googleMapsURL: null}, {city: "Sofia", loc: "Studentski Grad", googleMapsURL: "google.com/maps?fgdf…"}] }

7. Example Usage in JS • Members are retrieved using dot operators or subscript operators var me = {id:10, name:"Dimitar", hobbies["web", "music"]}; alert (me.id); // alerts 10 alert (me.hobbies[0]); // alerts "web" // hobbies is array, so it has all properties // and methods available for arrays me.hobbies[0].push("beer"); alert (me.hobbies.length);

8. JavaScript Eval Function • eval (string) • Invokes the JavaScript parser and executes the string as part of the code • We can use this for text, containing JSON objects, returned via AJAX, because JSON serialization is valid JavaScript object declaration var a = "students"; eval ("var message = 'Hi, " + a + "!';"); alert (message); // alerts "Hi, students!"

9. Eval and Security • eval can execute any JavaScript code, even malicious one • eval should be used when source of data is trusted • When source is not trusted it is better to use a JSON parser • JSON parser will recognize only JSON serialized objects • JSON parsers are faster • JSON parser can be obtained from http://json.org/json.js

10. JSON & AJAX Example • The search function – will fire when the form is submitted function search() { document.getElementById('result').innerHTML = 'Checking...'; if (typeof XMLHttpRequest != "undefined") req = new XMLHttpRequest (); else req = new AcitveXObject ("Microsoft.XMLHTTP"); req.open("GET", "get_profile.php?username=" + encodeURIComponent(document.getElementById('username').value), true); req.onreadystatechange = search_callback; req.send(null); return false; }

11. JSON & AJAX Example • Handling the results: function search_callback () { if (req.readyState == 4 && req.status == 200) { var text = req.responseText; var jsonObj = null; eval ("jsonObj="+text); if (!jsonObj.error) { document.getElementById('result').innerHTML = "Name: " + jsonObj.name + "<br />Age: " + jsonObj.age + "<br />Sex: " + jsonObj.sex; } else document.getElementById('result').innerHTML = jsonObj.error; } }

12. JSON & AJAX Example • The page body: <form method="post" action="" onsubmit="return search()"> <input type="text" id="username" /> <input type="submit" value="Submit" /> <div id="result"></div> </form>