JSON - JavaScript Object Notation

11views

written 5.6 years ago by

teamques10 ★ 68k

JSON

JSON or JavaScript Object Notation is a lightweight text-based open standard designed for human-readable data interchange.
The JSON format was originally specified by Douglas Crockford and is described in RFC 4627. The official Internet media type for JSON is application/JSON.
The JSON filename extension is .json.
JSON or JavaScript Object Notation is a lightweight text-based open standard designed for human-readable data interchange.
Conventions used by JSON are known to programmers, which include C, C++, Java, Python, Perl, etc.

JSON stands for JavaScript Object Notation.

The format was specified by Douglas Crockford.
It was designed for human-readable data interchange.
It has been extended from the JavaScript scripting language.
The filename extension is .json.
JSON Internet Media type is application/JSON.
The Uniform Type Identifier is public.json.

Uses of JSON

It is used while writing JavaScript-based applications that include browser extensions and websites.
JSON format is used for serializing and transmitting structured data over the network connection.
It is primarily used to transmit data between a server and web applications.
Web services and APIs use JSON format to provide public data.
It can be used with modern programming languages.

Characteristics of JSON

JSON is easy to read and write.
It is a lightweight text-based interchange format.
JSON is language independent.

The following example shows how to use JSON to store information related to books based on their topic and edition.

{
"book": [

      {
"id":"01",
"language": "Java",
"edition": "third",
"author": "Herbert Schildt"
      },

      {
"id":"07",
"language": "C++",
"edition": "second",
"author": "E.Balagurusamy"
      }
   ]
}

After understanding the above program, we will try another example. Let's save the below code as json.htm −

 Live Demo
<html>
<head>
<title>JSON example</title>
<script language = "javascript">
         var object1 = { "language" : "Java", "author"  : "herbert schildt" };
         document.write("<h1>JSON with JavaScript example</h1>");
         document.write("<br>");
         document.write("<h3>Language = " + object1.language+"</h3>");  
         document.write("<h3>Author = " + object1.author+"</h3>");   

         var object2 = { "language" : "C++", "author"  : "E-Balagurusamy" };
         document.write("<br>");
         document.write("<h3>Language = " + object2.language+"</h3>");  
         document.write("<h3>Author = " + object2.author+"</h3>");   

         document.write("<hr />");
         document.write(object2.language + " programming language can be studied " + "from book written by " + object2.author);
         document.write("<hr />");
</script>
</head>

<body>
</body>
</html>

OUTPUT

enter image description here

<html>
<head>
<meta content = "text/html; charset = ISO-8859-1" http-equiv = "content-type">

<script type = "application/javascript">
         function loadJSON() {
            var data_file = "https://www.tutorialspoint.com/json/data.json";
            var http_request = new XMLHttpRequest();
            try{
               // Opera 8.0+, Firefox, Chrome, Safari
               http_request = new XMLHttpRequest();
            }catch (e) {
               // Internet Explorer Browsers
               try{
                  http_request = new ActiveXObject("Msxml2.XMLHTTP");

               }catch (e) {

                  try{
                     http_request = new ActiveXObject("Microsoft.XMLHTTP");
                  }catch (e) {
                     // Something went wrong
                     alert("Your browser broke!");
                     return false;
                  }

               }
            }

            http_request.onreadystatechange = function() {

               if (http_request.readyState == 4  ) {
                  // Javascript function JSON.parse to parse JSON data
                  var jsonObj = JSON.parse(http_request.responseText);

                  // jsonObj variable now contains the data structure and can
                  // be accessed as jsonObj.name and jsonObj.country.
                  document.getElementById("Name").innerHTML = jsonObj.name;
                  document.getElementById("Country").innerHTML = jsonObj.country;
               }
            }

            http_request.open("GET", data_file, true);
            http_request.send();
         }
    </script>
    <title>tutorialspoint.com JSON</title>
</head>
    <body>
<h1>Cricketer Details</h1>

<table class = "src">
<tr><th>Name</th><th>Country</th></tr>
<tr><td><div id = "Name">Sachin</div></td>
<td><div id = "Country">India</div></td></tr>
</table>

<div class = "central">
<button type = "button" onclick = "loadJSON()">Update Details </button>
</div>
        </body>
        </html>

Given below is the input file data.json, having data in JSON format which will be uploaded asynchronously when we click the Update Detail button.

This file is being keptin https://www.tutorialspoint.com/json/

{"name": "Brett", "country": "Australia"}

The above HTML code will generate the following screen, where you can check AJAX in action −

Cricketer Details

Name	Country
Sachin	India

enter image description here

When you click on the Update Detail button, you should get a result something as follows. You can try JSON with AJAX yourself, provided your browser supports Javascript.

Cricketer Details

Name	Country
Brett	Australia

ADD COMMENT EDIT