AJAX (Asynchronous JavaScript and XML):

4.1 Fundamentals of AJAX technology:

4.1.1 Difference between Synchronous and Asynchronous web application
4.1.2 XMLHttpRequest technology
4.2 XMLHttpRequest
4.2.1 Properties :( onReadyStateChange, readyState, responseText,
responseXML)
4.2.2 XMLHttpRequest Methods : (Open(), send(), setRequestHeader())
4.3 Working of AJAX and its architecture

AJAX (Asynchronous JavaScript and XML)

 AJAX is a web development technique for creating interactive web applications. If need to know
basic of JavaScript, HTML, CSS and XML to learn AJAX.
 AJAX is not a programming language, but is a combination of multiple web related technologies
like HTML, XHTML, CSS, JavaScript, DOM, XML, XSLT and XMLHttpRequest object.
 The AJAX model allows web developers to create web applications that are able to dynamically
interact with the user.
 It will also be able to quickly make a background call to web servers to retrieve the required
application data.
 Then update the small portion of the web page without refreshing the whole web page.
 AJAX applications are much more faster and responsive as compared to traditional web
applications. It is used while we have to communicate between client and server while user was
working in the foreground.
 In AJAX applications, the exchange of data between a web browser and the server is
asynchronous means AJAX applications submit requests to the web server without pausing the
execution of the application and can also process the requested data whenever it is returned.
 E.g. Facebook and Instagram uses the AJAX model so whenever we like any post the count of the
like button increase instead of refreshing the whole page.

Why to Learn AJAX?

 Ajax uses XHTML for content, CSS for presentation, along with Document Object Model and
JavaScript for dynamic content display.
 Conventional web applications transmit information to and from the server using synchronous
requests. It means you fill out a form, hit submit, and get directed to a new page with new
information from the server.
 With AJAX, when you hit submit, JavaScript will make a request to the server, interpret the
results, and update the current scree. In this case, the use would never know that anything was
even transmitted to the server.
 XML is commonly used as the format for receiving server data, although any format, including
plain text, can be used.
 AJAX is a web browser technology independent of the web server software.(like php and asp.net,
jsp)
 A user can continue to use the application while the client program requests information from
the server in the background.

AJAX is based on Open Standards

 Browser based presentation using HTML and Cascading Style Sheets (CSS). Data is stored in XML
format and fetched from the server.
 Behind-the-scenes data fetches using XMLHttpRequest objects in the browser. JavaScript to make
everything happen.

Working of AJAX

 Traditional web applications are created by adding loosely web pages through links in a
predefined order. Where the user can move from one page to another page to interact with the
different portions of the applications.
 Also, HTTP requests are used to submit the web server in response to the user action. After
receiving the request the web server fulfills the request by returning a new webpage which, then
displays on the web browser. This process includes lots of pages refreshing and waiting.


 AJAX change this whole working model by sharing the minimum amount of data between the
web browser and server asynchronously. It speedup up the working of the web applications.
 It creates an additional layer known as AJAX engine in between the web application and web
server due to which we can make background server calls using JavaScript and retrieve the
required data, can update the requested portion of a web page without casing full reload of the
page.
 Asynchronous processes reduce the workload of the web server by dividing the work with the
client computer. Due to the reduced workload web servers become more responsive and fast.

AJAX Technologies

 The technologies that are used by AJAX are already implemented in all the Morden browsers. So
the client does not require any extra module to run the AJAX application.
 The technologies used by AJAX are –
o Javascript − It is an important part of AJAX. It allows you to create client-side
functionality. Or we can say that it is used to create AJAX applications.
o XML − It is used to exchange data between web server and client.
o The XMLHttpRequest − It is used to perform asynchronous data exchange between a
web browser and a web server.
 o HTML and CSS − It is used to provide markup and style to the webpage text.
o DOM − It is used to interact with and alter the webpage layout and content dynamically.

Advantages of AJAX

 The following are the advantages of AJAX −

 It creates responsive and interactive web applications.
 It supports the development of patterns and frameworks that decrease the development time.
 It makes the best use of existing technology and feature instead of using some new technology.
 It makes an asynchronous call to the web server which means the client doesn't have to wait for
the data to arrive before starting rendering.

Disadvantages of AJAX

 The following are the disadvantages of AJAX −

 AJAX is fully dependent on Javascript. So if anything happens with javascript in the browser AJAX
will not support.
 The debugging of AJAX applications is difficult.
 Bookmarking of AJAX-enabled pages required pre-planning.
 If one request can fail then it can fail the load of the whole webpage.
 If JavaScript is disabled in your web browser then you are not able to run the AJAX webpage.

AJAX - XMLHttpRequest

 In AJAX, XMLHttpRequest is used to exchange data to or from the web server in the background
while the user/client working in the foreground and then update the part of the web page with
the received data without reloading the whole page.
 We can also say that XMLHttpRequest (XHR) can be used by various web browser scripting
languages like JavaScript, JScript, VBScript, etc., to exchange XML data to or from the web server
with the help of HTTP.
 Apart from XML, XMLHttpRequest can also fetch data in various formats like JSON, etc. It creates
an asynchronous connection between the client side and the server side.
 Syntax
variableName = new XMLHttpRequest()

 Where using a new keyword along with XMLHttpRequest() constructor we can be able to create
a new XMLHttpRequest object. This object must be created before calling the open() function to
initialise it before calling send() function to send the request to the web server.

XMLHttpRequest Object Methods

 Sad

Sr.No. Method Name & Description

new XMLHttpRequest()
1
It is used to create an XMLHttpRequest() object

getAllResponseHeaders()
2
It is used to get the header information
 getResponseHeader()
3
It is used to get the specific header information

open(method, url, async, user, psw)

It is used to initialise the request parameters.
Here,
method: request type GET or POST or Other types
4
url: file location
async: for the asynchronous set to true or for synchronous set to false
user: for optional user name
psw: for optional password

send()
5 It is used to send requests to the web server. It is generally used for GET
requests.

send(string)
6 It is used to send requests to the server. It is generally used for POST
requests.

setRequestHeader()
7
It is used to add key/value pair to the header

XMLHttpRequest Object Properties

Sr.No
Property Name & Description
.

onreadystatechange
1
Set the callback function which handles request state changes.

readyState
It is used to hold the status of XMLHttpRequest. It has the following values
−
0. It represents the request is not initialise
2
1. It represents the server connection established
2. It represents the request received
3. It represents the request is in processing
4. It represents the request finished and the response is ready

responseText
3
It is used to return the response data as a string

responseXML
4
It is used to return the response data as XML data

5 Status
It is used to return the status number of a request. For example −
  200: for OK
 403: for Forbidden
 404: for Not Found

StatusText
6
It is used to return the status text. For example, OK, Not Found, etc.
Usage of XMLHttpRequest

 After understanding the basic syntax, methods, and properties of XMLHttpRequest now we learn
how to use XMLHttpRequest in real life. So to use XMLHttpRequest in your program first we need
to follow the following major steps –
 Step 1 − Create an object of XMLHttpRequest

var variableName = new XMLHttpRequest()

 Step 2 − After creating XMLHttpRequest an object, we now have to define a callback function
which will trigger after getting a response from the web server.

XMLHttpRequestObjectName.onreadystatechange = function(){
// Callback function body
}
XMLHttpRequestObjectName.open(method, url, async)
XMLHttpRequestObjectName.send()

 Step 3 − Now we use open() and send() functions to send a request to the web server.

e.g

 we are going to fetch data from the server.

 To fetch the data from the server we will click on the "Click Me" button. So when we click on the
"Click Me" button, the displayDoc() function is called.
 Inside the displayDoc() function, we create an XMLHttpRequest object.
 Then we create a call-back function to handle the server response.
 Then we call the open() method of the XHR object to initialise the request with HTTP GET
method and the server URL which is "https://jsonplaceholder.typicode.com/todos". Then we call
send() function to send the request.
 So when the server responds to the request, the "onreadystatechange" property calls the
callback function with the current state of XMLHttpRequest object.
 If the "ready state" property is set to 4(that means the request is completed) and the "status"
property is set to 200(that means the successful response), then the response data is extracted
from the "responseText" property and display the HTML document with the help of "innerHTML"
property of the sample element.
 If we error is found during the request then the else statement present in the callback function
will execute. So this is how we can fetch data from the server.

<!DOCTYPE html>
<html>
<body>
<script>
function displayDoc() {
// Creating XMLHttpRequest object
 var myObj = new XMLHttpRequest();

// Creating a callback function

myObj.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("sample").innerHTML =
this.responseText;
}else{
console.log("Error Found")
}
};
// Open the given file
myObj.open("GET",
"https://jsonplaceholder.typicode.com/todos", true);

// Sending the request to the server

myObj.send();
}
</script>
<div id="sample">
<h2>Getting Data</h2>
<p>Please click on the button to fetch data</p>
<button type="button" onclick="displayDoc()">Click Me</button>
</div>
</body>
</html>

 sasdd