CS8651 IP Unit 2 pdf regulation -2017 anna university

this is an internet programming paper that is relevant to the app development paper anna university regulation 2021

1. Mr. K. Chairmadurai,
Assistant Professor/ CSE
Adhiparasakthi Engineering College,
Melmaruvathur.

2. Syllabus :

JSON
-Introduction
– Syntax
– Function Files
– Http Request
–SQL

3. JSON - JavaScript Object Notation
•JSON stands for JavaScript Object Notation
•JSON is a text-based and lightweight format for data transactions.
•JSON is easy to read and write.
•JSON is language independent.
•JSON supports array, object, string, number and values.
•JSON is plain text written in JavaScript object notation
•JSON is used to send data between computers
•JSON objects are used for transferring data between server and client
•The file type for JSON files is ".json"
•The MIME type for JSON text is "application/json"

4. Why use JSON?
•Standard Structure: JSON objects are having a standard structure
that makes developers job easy to read and write code, because they
know what to expect from JSON.
•Light weight: When working with AJAX, it is important to load the
data quickly and asynchronously without requesting the page re-
load. Since JSON is light weighted, it becomes easier to get and load
the requested data quickly.
•Scalable: JSON is language independent, which means it can work
well with most of the modern programming language. Let’s say if we
need to change the server side language, in that case it would be
easier for us to go ahead with that change as JSON structure is same
for all the languages.

5. History of JSON
•Douglas Crockford specified the JSON format in the early 2000s.
•The official website was launched in 2002.
•In December 2005, Yahoo! starts offering some of its web services in
JSON.
•In later 2006, Google started offering JSON in its Gdata web protocol.
•JSON became an ECMA international standard in 2013.
•The most updated JSON format standard was published in 2017.
•Today, JSON is one of the most widely used data-interchange
format in web, and supported by most of the Web APIs (like twitter
api) to fetch public data and creating applications out of them.

6. JSON Syntax
•Rules
–Data is in key/value pairs
–JSON Objects should start and end with braces “{ }”.
–Key fields are included in the double quotes.
–Values are represented by putting “:” colon between them
and the keys.
–JSON key-value pairs are separated by a comma “,”.
–Values can be of any data type like String, Integer, Boolean
etc.
–Numerical data has no quotes.
–Arrays are enclosed in square brackets []
–Objects are enclosed in curly brackets {}
–The output is a text string

7. JSON - Example

Try to create a sample JSON describing an “Car” with your own set
of Keys and Values.
JSON with an Array

8. JSON Data Types
•In JSON, values must be one
of the following data types:
–a string
–a number
–an object (JSON object)
–an array
–a boolean
–null
•JSON values cannot be one
of the following data types:
–a function
–a date
–undefined

{"name":"John"}
{"age":30}
{
"employee":{"name":"John", "age":30, "city":
"New York"}
}
{
"employees":["John", "Anna", "Peter"]
}
{"sale":true}
{"middlename":null}

10. JSON Data Types

11. JSON - Example

12. JSON data structure types and
how to read them

•JSON objects
•JSON objects in array
•Nesting of JSON objects

13. JSON objects

14. JSON objects in array

15. Nesting of JSON objects

16. How to read data from json file and
convert it into a JavaScript object?
•A common use of JSON is to exchange data
to/from a web server.
•When receiving data from a web server, the
data is always a string.
•Parse the data with JSON.parse(), and the
data becomes a JavaScript object.

17. How to convert JavaScript object to
JSON text?
• common use of JSON is to exchange data
to/from a web server.
•When sending data to a web server, the data
has to be a string.
•Convert a JavaScript object into a string
with JSON.stringify().

18. JSON And JavaScript
•There are two functions that are used for
converting data from JavaScript to JSON and
from JSON to JavaScript.
• They are:
–JSON.stringify(JavaScript object)
–JSON.parse(JSON string)

22. JSON XML

23. JSON XML

26. JSON Function Files
•A common use of JSON is to read data from a
web server, and display the data in a web
page.
•in 4 easy steps, how to read JSON data, using
function files.

27. 1: Create an array of objects.
•Use an array literal to
declare an array of objects.
•Give each object two
properties: display and url.
•Name the array myArray:

myArray
var myArray = [
{
"display": "JavaScript Tutorial",
"url": "https://www.w3schools.com/js/def
ault.asp"
},
{
"display": "HTML Tutorial",
"url": "https://www.w3schools.com/html/d
efault.asp"
},
{
"display": "CSS Tutorial",
"url": "https://www.w3schools.com/css/de
fault.asp"
}
]

28. 2: Create a JavaScript function to
display the array.
•Create a function myFunction() that loops the array objects,
and display the content as HTML links:

myFunction()
function myFunction(arr) {
var out = "";
var i;
for(i = 0; i < arr.length; i++)
{
out += '<a href="' + arr[i].url + '">' +
arr[i].display + '</a><br>';
}
document.getElementById("id01").innerHTML = out;
}
Call myFunction() with myArray as argument: myFunction(myArray);

30. 3: Use an array literal as the argument
(instead of the array variable):
•Call myFunction()
with an
array literal as
argument:

Calling myFunction()
myFunction([
{
"display": "JavaScript Tutorial",
"url": "https://www.w3schools.com/js/default.asp"
},
{
"display": "HTML Tutorial",
"url": "https://www.w3schools.com/html/default.as
p"
},
{
"display": "CSS Tutorial",
"url": "https://www.w3schools.com/css/default.asp
"
}
]);

31. 4: Put the function in an external js file
•Put the function in a file
named myTutorials.js:

myTutorials.js
myFunction([
{
"display": "JavaScript Tutorial",
"url": "https://www.w3schools.com/
js/default.asp"
},
{
"display": "HTML Tutorial",
"url": "https://www.w3schools.com/
html/default.asp"
},
{
"display": "CSS Tutorial",
"url": "https://www.w3schools.com/
css/default.asp"
}
]);
Add the external script to your
page (instead of the function
call):
Add External Script
<script src="myTutorials.js">
</script>

32. JSON Function Files

33. JSON Http Request
•A common use of JSON is to read data from a
web server, and display the data in a web
page.
•in 4 easy steps, how to read JSON data, using
XMLHttp.

34. 1: Create an array of objects.
•Use an array literal to
declare an array of objects.
•Give each object two
properties: display and url.
•Name the array myArray:

myArray
var myArray = [
{
"display": "JavaScript Tutorial",
"url": "https://www.w3schools.com/js/def
ault.asp"
},
{
"display": "HTML Tutorial",
"url": "https://www.w3schools.com/html/d
efault.asp"
},
{
"display": "CSS Tutorial",
"url": "https://www.w3schools.com/css/de
fault.asp"
}
]

35. 2: Create a JavaScript function to
display the array.
•Create a function myFunction() that loops the array objects,
and display the content as HTML links:

myFunction()
function myFunction(arr) {
var out = "";
var i;
for(i = 0; i < arr.length; i++)
{
out += '<a href="' + arr[i].url + '">' +
arr[i].display + '</a><br>';
}
document.getElementById("id01").innerHTML = out;
}
Call myFunction() with myArray as argument: myFunction(myArray);

37. 3: Create a text file
•Put the array literal in a
file
named myTutorials.txt:

myTutorials.txt
[
{
"display": "JavaScript Tutorial",
"url": "https://www.w3schools.com/
js/default.asp"
},
{
"display": "HTML Tutorial",
"url": "https://www.w3schools.com/
html/default.asp"
},
{
"display": "CSS Tutorial",
"url": "https://www.w3schools.com/
css/default.asp"
}
]

38. 4: Read the text file with an
XMLHttpRequest
•Write an XMLHttpRequest to read the text file, and use myFunction() to display
the array:

XMLHttpRequest
var xmlhttp = new XMLHttpRequest();
var url = "myTutorials.txt";

xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var myArr = JSON.parse(this.responseText);
myFunction(myArr);
}
};

xmlhttp.open("GET", url, true);
xmlhttp.send();

39. JSON Http Request