Web Development Course - AJAX & JSON by RSOLUTIONS

Your Requirement. Our Commitment.

Index No
AJAX - Introduction 01
XMLHttpRequest object 02
AJAX Request 03-04
AJAX – Get or Post 05
AJAX Response 06-08
Response from the web server 09
Callback function 10
JSON - Introduction 11
JSON - Advantages 12
JSON – XML Comparison 13-14
JSON - Syntax 15-16
JSON - Array 17
JSON - Object 18
JSON – Javascript 19
JSON - Parsing 20

AJAX - Introduction
 Stands for Asynchronous JavaScript and XML
 The AJAX enables the asynchronous update of the web pages by exchanging data with the
server behind the scenes
 Set of techniques for creating highly interactive web sites and web applications.
 The standard example of application using AJAX is Google Maps.
01

XMLHttpRequest object
 XMLHttpRequest objects is a means of sending and receiving data from web server.
 Supported by most modern browsers
xmlHttp = new XMLHttpRequest();
 In case of earlier versions of Internet, you must use the following syntax
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
02

AJAX Request
 XMLHttpRequest object supports open() and send() methods to send AJAX request to server.
xmlHttp.open("GET","ajax_info.txt",true);
xmlHttp.send();
03
Method Description
open(method,url,async  Method : the type of request: GET or POST
 url : the location of the file on the server
 Async : true (asynchronous) or false (synchronous)
send(string) Sends the request off to the server.
string: Only used for POST requests

AJAX Request
 GET Requests:
xmlHttp.open("GET","ajax_info.txt",true);
xmlHttp.send();
 Post Requests:
xmlHttp.open("POST","demo.aspx",true);
xmlHttp.send();
 The file on the web server can essentially be any kind of file, such as .txt and .xml.
 Also, the file can even be server scripting files such as .aspx, .php, etc. that perform actions on
the server before sending the response back.
 The async parameter of the open() method can take both the true and false values, it is
recommended that it needs to be set to true.
04

AJAX – Get or Post
 Get() is faster compared to Post()
 Use Post() when your application:
 Does not require a cached file that is needed to update a file or database on the server.
 Demands you to send large amount of data to the server. This is due to the fact that POST
requests does not have any size limitations.
 Requires you to send user input that might contain unknown characters. This is because
POST requests is much more robust and secure as compares to GET requests.
05

AJAX Response
07
xmlHttp = new XMLHttpRequest();
xmlHttp.onreadystatechange=function() {
if (xmlHttp.readyState==4 && xmlHttp.status==200) {
document.getElementById("productName").innerHTML=xmlhttp.responseText;
} }
xmlHttp.open("GET","demo.aspx",true);
xmlHttp.send();

Response from the web server
 Use the responseText property only when the response from the server is not XML.
document.getElementById("prodName").innerHTML=xmlhttp.responseText;
 Use the responseXML property when the response from the server is XML and parse it as a XML
object.
products= xmlHttp.responseXML;
x= products.getElementsByTagName(“movies");
document.getElementById(“movies").innerHTML= x;
08

Callback function
 The callback function can be defined as a function that is set as a parameter to another function.
09
function start() {
var xmlhttp = new XMLHttpRequest();
var contentDiv = document.getElementById(“addContent");
xmlhttp.open("POST", "Demo.xml", true);
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
contentDiv.innerHTML=xmlhttp.responseText;
}
}
xmlhttp.send("FirstName=Nat&LastName=Dunn");
}

AJAX - Response
 AJAX can be used to retrieve plain text, HTML, XML or JSON data.
 Use the responseText to read text and JSON data • Use the responseXML to read XML data
 Let us look at examples to read following data using AJAX:
 Text
 HTML
 JSON
 XML
10

JSON - Introduction
 Stands for JavaScript Object Notation
 It is a format for data transfer
 It is derived from JavaScript
 It is language independent
 It is an alternative to XML
11

JSON - Advantages
 Lightweight text-data interchange format.
 Easy to parse JSON syntax
 Leaner than XML
 Ease in use as it is platform and language independent.
12

JSON – XML Comparison
 Both JSON and XML are data exchange formats, but the XML format is associated with a few
drawbacks as compared to JSON.
 The XML format contains roots in marking-up document text and operates well in that space.
 The JSON, on the other hand, possess roots in the programming language types and structures.
 As a result, JSON offers a natural and easily available mapping mechanism to exchange
structured data.
13

JSON – XML Comparison
 Comparing JSON to XML
14
Characteristic XML JSON
Data Types Does not provide any notion of data
types. One must rely on XML Schema for
adding type information.
Provides scalar data types and the ability to
express structured data through arrays and
objects.
Size Documents tend to be lengthy in size,
especially when an element-centric
approach to formatting is used.
Syntax is very terse and yields formatted text
where most of the space is consumed by the
represented data.
Parsing in JavaScript Requires an XML DOM implementation
and additional application code to map
text back into JavaScript objects.
No additional application code required to
parse text. It uses JavaScript's eval function.

JSON - Syntax
 Include data within name/value pairs.
 Separate the data appropriately by using commas.
 Normally, the JSON data can take any of the following values:
 A number which can either be an integer or floating point.
 A string that must be enclosed within in double quotes.
 A Boolean terminates to either true or false value.
 An array that must be enclosed within square brackets.
 An object that must be enclosed within in curly brackets.
 A null or empty value.
 Enclose the objects within curly braces.
 Enclose the arrays within square brackets.
15

JSON - Syntax
 JSON data consists of name/value pairs
 Field name is enclosed in double quotes
 Field names can contain spaces, -, special characters
16
{
"name" : “Tom Hanks“,
“DOB” : “July 9, 1956”,
“age” : 50,
“isAlive” : true,
“movies” : null
}

JSON - Array
 You must make sure to enclose the JSON arrays within square brackets.
17
{
“movies": [
{ "name":“Edge of Tomorrow" , “Actor":”Tom Cruise”},
{ "name":“How to Train Your Dragon" , “Actor":”Jay Baruchel” }
]
}

JSON - Object
 You must make sure to enclose the JSON objects within curly brackets as shown in the below
example.
18
Var movie = {
"name":“Edge of Tomorrow" ,
“Actor": {
“male” : ”Tom Cruise”,
“female” : “Emily Blunt”
}
}

JSON – Javascript
 The fact that the JSON makes use of the JavaScript syntax, the programmer does not require any
additional software to work with JSON within JavaScript.
19
var actor = {
“DOB” : “July 9, 1956”
}
 Reading JSON values:
actor.name;
 Output:
Output : Tom Hanks

JSON - Parsing
 JSON data is easy to parse in all languages
 Use JavaScript function eval() to convert a JSON text into a JavaScript object.
 Make sure to include the text within parenthesis to avoid a syntax error as shown in the below
code snippet.
var actor = {
“DOB” : “July 9, 1956”
}
var obj = eval ("(" + actor + ")");
 eval() is not a secure way of parsing JSON value. Instead use JSON.parse().
 However JSON.parse() is not supported in the older browsers.
 You can also use jQuery parseJSON() API to parse JSON values.
20

Mob : +91 98440 18630 / 99000 98630
Mail : enquiry@rsolutions-india.com
Url : www.rsolutions-india.com

Web Development Course - AJAX & JSON by RSOLUTIONS

More Related Content

What's hot (20)

Similar to Web Development Course - AJAX & JSON by RSOLUTIONS (20)

More from RSolutions (9)

Recently uploaded (20)

Web Development Course - AJAX & JSON by RSOLUTIONS