Introduction to JSON & AJAX

Introduction to JSON & AJAX
www.collaborationtech.co.in
Bengaluru INDIA
Presentation By
Ramananda M.S Rao

JSON
Content
What is JSON ?
Where JSON is used ?
JSON Data Types and Values
Object
Arrays
Reading JSON data structure
Where JSON is used ?
Data Interchange
JSON vs. XML
JSON in AJAX
XMLHttpRequest
AJAX
POST and GET calls in AJAX
Ajax Methods and Properties
AJAX client Server Interactions
Benefits of Ajax
Current Issues of AJAX
JSONHttpRequest
JSON Limitations
About Us

Introduction to JSON
What is JSON?
JSON stands for JavaScript Object Notation. JSON objects are used for
transferring data between server and client.
JSON is a subset of JavaScript. ( ECMA-262 ).
Language Independent, means it can work well with most of the modern
programming language
Text-based, human readable data exchange format
Light-weight. Easier to get and load the requested data quickly.
Easy to parse.
JSON has no version and No revisions to the JSON grammar.
JSON is very stable
Character Encoding is Strictly UNICODE. Default: UTF-8. Also UTF-16 and
UTF-32 are allowed.
official Internet media type for JSON is application/json.
JSON Is Not XML.
JSON is a simple, common representation of data.

JSON DATA TYPES AND VALUES
JSON DATA TYPES AND VALUES
Strings
Numbers
Booleans
Objects
Arrays
null

Object and Arrays
Object
 Objects are unordered containers of key/value pairs
 Objects are wrapped in { }
 , separates key/value pairs
 : separates keys and values
 Keys are strings
 Values are JSON values - struct,record,hashtable,object
Array
 Arrays are ordered sequences of values
 Arrays are wrapped in []
 , separates values
 An implementation can start array indexing at 0 or 1.

JSON data:
JSON data: It basically has key-value pairs.
var chaitanya = {
"firstName" : "Chaitanya",
"lastName" : "Singh",
"age" : "28"
};
We can access the information out of a JSON object like this:
document.writeln("The name is: " +chaitanya.firstName);
document.writeln("his age is: " + chaitanya.age);
document.writeln("his last name is: "+ chaitanya.lastName);

JSON data:
object with one member
{
"course-name": "6.470“
}
object with two members (separated by a comma)
{
"course 6 470"
course-name": "6.470",
"units": 6
}
array with 3 elements ["foo", "bar", 12345]
object with an array as a value
{
"course-name": "6.470",
"times": ["12-4","12-4", "12-4"]
}

JSON data:
objects with objects and arrays
{
John : {
"label":"John",
"data":[[1880,0.081536],[1881,0.08098],[1882,0.078308]]
},
"James": {
"label":"James",
"data":[[1880,0.050053],[1881,0.05025],[1882,0.048278]]
}
}
var a = {
"John":
{
"label":"John",
"data":[[1880,0.081536],[1881,0.08098],[1882,0.078308]]
},
"James":
{
"label":"James",
"data":[[1880,0.050053],[1881,0.05025],[1882,0.048278]]
}
}

Parsing JSON
To get the value 1880 marked with red color:
o We can use a.John.data[0][0]
JSON.stringify(): Takes a JavaScript object and produces a JSON string from it.
JSON.parse(): Takes a JSON string and parses it to a JavaScript object.
Parsing JSON in JavaScript
Start with a basic JSON string:
var json = '{ "person" : { "age" : 20, "name" : "Jack" } }';
Right now, all JavaScript sees here is a string. It doesn’t know it’s actually JSON. You can
pass it through to JSON.parse() to convert it into a JavaScript object:
var parsed = JSON.parse(json);
console.log(parsed);
This gives you:
{ person: { age: 20, name: 'Jack' } }
It is now a regular JavaScript object and you can access properties, just as you’d expect,
using either notation:
console.log(parsed.person);
console.log(parsed.person["age"]);

Parsing JSON
You can do the opposite and turn an object into a string:
var json = {
person: {
age: 20,
name: "Jack"
}
}
console.log(JSON.stringify(json));
This gives you a string containing the following:
{"person":{"age":20,"name":"Jack"}}

Reading JSON data structure
Simple JSON Example
<!DOCTYPE html>
<html>
<body>
<h2>JSON Object Creation in JavaScript</h2>
<p id="demo"></p>
<script>
var text = '{"name":"John Johnson","street":"Oslo West 16","phone":"555 1234567"}';
var obj = JSON.parse(text);
document.getElementById("demo").innerHTML = obj.name + "<br>" + obj.street + "<br>" +
obj.phone;
</script>
</body>
</html>

AJAX
AJAX, or Asynchronous JavaScript and XML.
 Describes a Web development technique for creating interactive
Web applications using a combination of HTML (or XHTML) and
Cascading Style Sheets for presenting information; Document
Object Model (DOM).
 JavaScript, to dynamically display and interact with the information
presented; and the XMLHttpRequest object to interchange and
manipulate data asynchronously with the Web server.
 It allows for asynchronous communication, Instead of freezing up
until the completeness, the browser can communicate with server
and continue as normal.

GET places arguments in the query string, but POST doesn’t.
No noticeable difference in AJAX - AJAX request does not appear
in the address bar.
GET call in AJAX still has the size limitation on the amount of
data that can be passed.
General principle:
GET method: it is used to retrieve data to display in the page
and the data is not expected to be changed on the server.
POST method: it is used to update information on the server

Abort() : Aborts the request if it has already been sent.
getAllResponseHeaders() : Returns all the response headers as a string..
getResponseHeader("headerLabel") : Returns the text of a specified
header.
open("method", "URL"[,asyncFlag[, "userName"[,"password"]]]) :
Initializes a request. This method is to be used from JavaScript code;
to initialize a request from native code, use openRequest() instead.
send(content) :Sends the request. If the request is asynchronous (which is
thedefault), this method returns as soon as the request is sent. If the
( ) request is synchronous, this method doesn't return until the response
has arrived.
setRequestHeader("label", "value") : Sets the value of an HTTP request
header

Example
<!DOCTYPE html>
<head><title>Ajax Test</title>
<script type="text/javascript">
var xmlHttp = new XMLHttpRequest();
xmlHttp.open("GET", "hello.txt", true);
xmlHttp.addEventListener("load", ajaxCallback, false);
xmlHttp.send(null);
function ajaxCallback(event){
alert( "Your file contains the text: " + event.target.responseText );
}
</script>
</head>
<body>
</body>
</html>

Follow us on Social
Facebook: https://www.facebook.com/collaborationtechnologies/
Twitter : https://twitter.com/collaboration09
Google Plus : https://plus.google.com/100704494006819853579
LinkedIn : https://www.linkedin.com/in/ramananda-rao-a2012545
Instagram : https://instagram.com/collaborationtechnologies
YouTube :
https://www.youtube.com/channel/UCm9nK56LRbWSqcYWbzs8CUg
Skype : facebook:ramananda.rao.7
WhatsApp : +91 9886272445
THANK YOU

Introduction to JSON & AJAX

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to Introduction to JSON & AJAX (20)

More from Collaboration Technologies (16)

Recently uploaded (20)

Introduction to JSON & AJAX