This document provides information about JSON (JavaScript Object Notation) including: 1. What JSON is and how it is used to structure and exchange data between web applications. 2. The syntax rules of JSON including how data is separated into name/value pairs within curly braces and square brackets. 3. Examples of JSON syntax including objects, arrays, and accessing JSON data using dot notation. 4. How JSON differs from JavaScript objects and how to convert between the two formats using JSON.parse() and JSON.stringify() methods.

2.  What is JSON? JSON or JavaScript Object Notation is a
format for structuring data. What is it used for? Like XML,
it is one of the way of formatting the data. Such format of
data is used by web applications to communicate with
each other.
 Why JSON?
 The fact that whenever we declare a variable and assign a
value to it, it’s not the variable that holds the value but
rather the variable just holds an address in the memory
where the initialized value is stored. Further explaining,
take for example:
 let age=21; when we use age, it gets replaced with 21, but
that does not mean that age contains 21, rather what it
means is that the variable age contains the address of the
memory location where 21 is stored.

3.  Characteristics of JSON
 It is Human-readable and writable.
 It is light weight text based data interchange format which means, it is simpler to read and
write when compared to XML.
 It is widely used as data storage and communication format on the web.
 Though it is derived from a subset of JavaScript, yet it is Language independent. Thus, the
code for generating and parsing JSON data can be written in any other programming language.
 JSON Syntax Rules JSON syntax is derived from JavaScript object notation syntax:
 Data is in name/value pairs Example:
 { “name”:”Thanos” }
 Types of Values: Array: An associative array of values. Boolean: True or false. Number: An
integer. Object: An associative array of key/value pairs. String: Several plain text characters
which usually form a word.
 Data is separated by commas Example:
 { “name”:”Thanos”, “Occupation”:”Destroying half of humanity” }
 Curly braces hold objects Example:
 let person={ “name”:”Thanos”, “Occupation”:”Destroying half of humanity” }
 Square brackets hold arrays Example:
 let person={ “name”:”Thanos”, “Occupation”:”Destroying half of humanity”, “powers”: [“Can
destroy anything with snap of his fingers”, “Damage resistance”, “Superhuman reflexes”] }

4.  {
 "Avengers": [

 {
 "Name" : "Tony stark",
 "also known as" : "Iron man",
 "Abilities" : [ "Genius", "Billionaire",
 "Playboy", "Philanthropist" ]
 },

 {
 "Name" : "Peter parker",
 "also known as" : "Spider man",
 "Abilities" : [ "Spider web", "Spidy sense" ]
 }
 ]
 }

5.  JSON Syntax
 1. While working with .json file, the syntax will be
like:
 {
 "First_Name" : "value";
 "Last_Name": "value ";
 }
 2. While working with JSON object in .js or .html file,
the syntax will be like:
 var varName ={
 "First_Name" : "value";
 "Last_Name": "value ";
 }

6.  JavaScript JSON Methods
 Let's see the list of JavaScript JSON method
with their description.
 Methods Description
 JSON.parse() This method takes a JSON string
and transforms it into a JavaScript object.
JSON.stringify() This method converts a
JavaScript value (JSON object) to a JSON string
representation.

7.  JavaScript JSON Example
 Let's see an example to convert string in JSON format using
parse() and stringify() method.
 <script>
 //JavaScript to illustrate JSON.parse() method.
 var j = '{"Name":"Krishna","Email": "XYZ", "CN": "12345"}';
 var data = JSON.parse(j);
 document.write("Convert string in JSON format using parse() met
hod<br>");
 document.write(data.Email); //expected output: XYZ

 //JavaScript to illustrate JSON.stringify() method.
 var j = {Name:"Krishna",
 Email: "XYZ", CN : 12345};
 var data = JSON.stringify(j);
 document.write("<br>Convert string in JSON format using stringi
fy() method<br>");
 document.write(data); //expected output: {"Name":"Krishna","Em
ail":"XYZ","CN":12345}
 </script>

8.  Output:
 Convert string in JSON format using parse()
method
 XYZ
 Convert string in JSON format using stringify()
method
{"Name":"Krishna","Email":"XYZ","CN":12345}

9.  JSON Array
 JSON array is written inside square brackets [
]. For example,
 // JSON array [ "apple", "mango", "banana"]
 // JSON array containing objects [ { "name":
"John", "age": 22 }, { "name": "Peter", "age": 20
}. { "name": "Mark", "age": 23 } ]

10.  Accessing JSON Data
 You can access JSON data using the dot notation.
For example,
 // JSON object const data = { "name": "John",
"age": 22, "hobby": { "reading" : true, "gaming" :
false, "sport" : "football" }, "class" : ["JavaScript",
"HTML", "CSS"] }
 // accessing JSON object
 console.log(data.name); // John
console.log(data.hobby);// { gaming: false,
reading: true, sport: "football"}
console.log(data.hobby.sport);
 // football console.log(data.class[1]); // HTML

11.  JavaScript Objects VS JSON
 Though the syntax of JSON is similar to the
JavaScript object, JSON is different from
JavaScript objects.
JSON JavaScript Object
The key in key/value pair
should be in double
quotes.
The key in key/value pair
can be without double
quotes.
JSON cannot contain
functions.
JavaScript objects can
contain functions.
JSON can be created and
used by other
programming languages.
JavaScript objects can only
be used in JavaScript.

12.  Converting JSON to JavaScript Object
 You can convert JSON data to a JavaScript
object using the built-
in JSON.parse() function. For example,
 // json object
 const jsonData = '{ "name": "John", "age": 22
}';
 // converting to JavaScript object
 const obj = JSON.parse(jsonData);
 // accessing the data console.log(obj.name);
// John

13.  Converting JavaScript Object to JSON
 You can also convert JavaScript objects to
JSON format using the JavaScript built-
in JSON.stringify() function. For example,
 // JavaScript object
 const jsonData = { "name": "John", "age": 22 };
// converting to JSON
 const obj = JSON.stringify(jsonData);
 // accessing the data console.log(obj);
 // "{"name":"John","age":22}"

14.  What is AJAX?
 AJAX = Asynchronous JavaScript And XML.
 AJAX is not a programming language.
 AJAX just uses a combination of:
 A browser built-in XMLHttpRequest object (to request data
from a web server)
 JavaScript and HTML DOM (to display or use the data)
 AJAX is a misleading name. AJAX applications might use
XML to transport data, but it is equally common to
transport data as plain text or JSON text.
 AJAX allows web pages to be updated asynchronously by
exchanging data with a web server behind the scenes. This
means that it is possible to update parts of a web page,
without reloading the whole page.

16.  1. An event occurs in a web page (the page is loaded,
a button is clicked)
 2. An XMLHttpRequest object is created by JavaScript
 3. The XMLHttpRequest object sends a request to a
web server
 4. The server processes the request
 5. The server sends a response back to the web page
 6. The response is read by JavaScript
 7. Proper action (like page update) is performed by
JavaScript


17.  AJAX Example Explained
 HTML Page
 <!DOCTYPE html>
<html>
<body>
<div id="demo">
<h2>Let AJAX change this text</h2>
<button type="button" onclick="loadDoc()">Change Content</button>
</div>
</body>
</html>
 The HTML page contains a <div> section and a <button>.
 The <div> section is used to display information from a server.
 The <button> calls a function (if it is clicked).
 The function requests data from a web server and displays it:
 Function loadDoc()
 function loadDoc() {
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {
document.getElementById("demo").innerHTML = this.responseText;
}
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
}

18.  The XMLHttpRequest Object
 All modern browsers support the XMLHttpRequest object.
 The XMLHttpRequest object can be used to exchange data with a web server
behind the scenes. This means that it is possible to update parts of a web page,
without reloading the whole page.
 Create an XMLHttpRequest Object
 All modern browsers (Chrome, Firefox, IE, Edge, Safari, Opera) have a built-
in XMLHttpRequest object.
 Syntax for creating an XMLHttpRequest object:
 variable = new XMLHttpRequest();
 Define a Callback Function
 A callback function is a function passed as a parameter to another function.
 In this case, the callback function should contain the code to execute when the
response is ready.
 xhttp.onload = function() {
 // What to do when the response is ready
}
 Send a Request
 To send a request to a server, you can use the open() and send() methods of
the XMLHttpRequest object:
 xhttp.open("GET", "ajax_info.txt");
xhttp.send();

19.  <!DOCTYPE html>
 <html>
 <body>
 <h2>The XMLHttpRequest Object</h2>
 <div id="demo">
 <p>Let AJAX change this text.</p>
 <button type="button" onclick="loadDoc()">Change Content</button>
 </div>
 <script>
 function loadDoc() {
 const xhttp = new XMLHttpRequest();
 xhttp.onload = function() {
 document.getElementById("demo").innerHTML = this.responseText;
 }
 xhttp.open("GET", "ajax_info.txt");
 xhttp.send();
 }
 </script>
 </body>
 </html>

20.  The jQuery load() method is a simple, but powerful AJAX
method.
 The load() method loads data from a server and puts the
returned data into the selected element.
 Syntax:
 $(selector).load(URL,data,callback);
 The required URL parameter specifies the URL you wish to
load.
 The optional data parameter specifies a set of querystring
key/value pairs to send along with the request.
 The optional callback parameter is the name of a function
to be executed after the load() method is completed.
 Here is the content of our example file: "demo_test.txt":
 <h2>jQuery and AJAX is FUN!!!</h2>
<p id="p1">This is some text in a paragraph.</p>

21.  <!DOCTYPE html>
 <html>
 <head>
 <script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"
></script>
 <script>
 $(document).ready(function(){
 $("button").click(function(){
 $("#div1").load("demo_test.txt");
 });
 });
 </script>
 </head>
 <body>
 <div id="div1"><h2>Let jQuery AJAX Change This Text</h2></div>
 <button>Get External Content</button>
 </body>
 </html>

22.  jQuery $.get() Method
 The $.get() method requests data from the
server with an HTTP GET request.
 Syntax:
 $.get(URL,callback);
 The required URL parameter specifies the URL
you wish to request.
 The optional callback parameter is the name
of a function to be executed if the request
succeeds.

23.  <!DOCTYPE html>
 <html>
 <head>
 <script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script
>
 <script>
 $(document).ready(function(){
 $("button").click(function(){
 $.get("demo_test.asp", function(data, status){
 alert("Data: " + data + "nStatus: " + status);
 });
 });
 });
 </script>
 </head>
 <body>
 <button>Send an HTTP GET request to a page and get the result back</button>
 </body>
 </html>

24.  jQuery $.post() Method
 The $.post() method requests data from the
server using an HTTP POST request.
 Syntax:
 $.post(URL,data,callback);
 The required URL parameter specifies the URL
you wish to request.
 The optional data parameter specifies some data
to send along with the request.
 The optional callback parameter is the name of a
function to be executed if the request succeeds.