User Id :    Password :      New Member   Forgot Password
 
Understanding JSON
Description 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.   No. of Views     3570
  Rating     5
Author Najmul Hoda   Posted On     10 Sep 2011
Tags Java Script,LINQ    

Sample Code   Download Code

 

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.....


 

About Author

About Author He is a .Net developer having 4+ years of experience. He loves writting technical article for .Net developers. Najmul Hoda
No Photo
 
Country India
Company BirlaSoft
Home Page www.dotnetlogix.com

Rate this article

Rating options from poor, fair, good, very good to excelent.  
 

Comments

     
Write your comment here.  
Comment
Verification Code   
  
    
 
Section sponsored by