Understanding JSON
Introduction
The JavaScript Object Notation, or JSON, is a lightweight format syntax for representing data used for exchanging data between client and server. JSON's elegance comes from the fact that it's a subset of the JavaScript language itself. Some of its features are as below
- JSON represents the data in a collection of name value pair.
- Its is a universal data structure
- And supported by all the modern brosers.
Lets take an example and discuss the syntax of JSON data.
[
{
"EmpName" : “Najmul",
"Country" : “India",
"skill" : [
"JAVA",
"ORACLE"
],
"Project" : "AsianPost"
},
{
"Name" : “Hoda",
"Country" : “US",
"Skills" : [
“SQL",
“ASP",
“JSON",
“CRM"
],
"Project" : "LTR"
}
]
Above you can see how an employee object be expressed in JSON notation.
Now we will understand how a JSON data can be parsed, received from server.
Using JSON with AJAX for getting data asynchronously from server.
if(navigator.appName == "Microsoft Internet Explorer")
{
var xhttp = new ActiveXObject("Msxml2.XMLHTTP");
}
else
{
var xhttp = new XMLHttpRequest();
}
xhttp.open("GET", url, true);
xhttp.send(null);
var Json = eval( xhttp.responseText )
var str='';
for (var i=0; i< Json.length ; i++)
{
str = str + Json[i].EmpName + ' - ' + Json[i].Company +'
' ;
}
document.write(str);
Using JSON with JQuery for asynchronous call
$.ajax({
type: "POST",
url: "Services/Employee.asmx/GetEmployee",
data:"{}"
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(EmployeeJSON) {
EmployeeList= EmployeeJSON.d;
if (EmployeeList.length > 0)
{
var str ='';
for (var i in EmployeeList)
{
str = str + EmployeeList[i].EmpName + ' - ' + EmployeeList[i].Company +'
' ;
}
document.write(str);
}
else
{
alert("No records found");
}
},
error: function(XMLHttpRequest, textStatus, errorThrown)
{
alert(textStatus);
}
});
Above you can see above how simple is to parse JSON abjects.
Most of the developers relates JSON with XML. So we will discuss here similarities and dissimilarities between these two.
Similarities between JSON and XML
1) Both represent data structure and used for exchanging information over different platform and browsers.
2) Both are self describing
3) Both can be parsed and used by many programming languages.
4) Widely used with AJAX
5) The above JSON object can be represented same way as in XML
<Root>
<Employee>
<Name>Najmul</Name>
<Country>India</Country>
<Skills>
<Skill>JAVA</Skill>
<Skill>ORACLE</Skill>
<Skills>
<Project>AsainPost</Project>
</Employee>
<Employee>
<Name>Hoda</Name>
<Country>US</Country>
<Skillls>
<Skill>SQL</Skill>
<Skill>ASP</Skill>
<Skill>JSON</Skill>
<Skill>CRM</Skill>
</Skills>
<Project>LTR</Project>
</Employee>
</Root>
Dissimilarities
1) XML uses angle brackets, with a tag name at the start and end of an element:
JSON uses squiggly brackets ex. (), {}, [] with the name only at the beginning of the element.
2) In XML you can use any name you want for an element, in JSON you can't use reserved words from javascript
3) JSON is light weight than XML
Hope this will help in understading JSON.
Please also read my next article "Understading JSON serialization and deserialization in asp.net".
Happy Reading.....