Introduction

AJAX is an acronym for Asynchronous JavaScript and XML. It is a group of inter-related

technologies like JavaScript, DOM, XML, HTML/XHTML, CSS, XMLHttpRequest etc.

AJAX allows you to send and receive data asynchronously without reloading the web page. So it
is fast.

AJAX allows you to send only important information to the server not the entire page. So only
valuable data from the client side is routed to the server side. It makes your application
interactive and faster.

AJAX is a web development technique for creating interactive web applications.

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 sever 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 screen. In the purest sense, the user 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 web server software.

A user can continue to use the application while the client program requests information from
the server in the background.

Intuitive and natural user interaction. Clicking is not required, mouse movement is a sufficient
event trigger.

Data-driven as opposed to page-driven.

AJAX is based on the following 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.
Where it is used?
There are too many web applications running on the web that are using ajax technology
like gmail, facebook,twitter, google map, youtube etc.

Understanding Synchronous vs Asynchronous

Synchronous (Classic Web-Application Model)

A synchronous request blocks the client until operation completes i.e. browser is unresponsive.
In such case, javascript engine of the browser is blocked.

As in the above image, full page is refreshed at request time and user is blocked until request
completes.
Asynchronous (AJAX Web-Application Model)

An asynchronous request doesn’t block the client i.e. browser is responsive. At that time, user
can perform another operations also. In such case, javascript engine of the browser is not
blocked.

As in the above image, full page is not refreshed at request time and user gets response from
the ajax engine.

Let's try to understand asynchronous communication by the image given below.

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.

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 −

 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.
 XML − It is used to exchange data between web server and client.
 The XMLHttpRequest − It is used to perform asynchronous data exchange between a
web browser and a web server.
 HTML and CSS − It is used to provide markup and style to the webpage text.
 DOM − It is used to interact with and alter the webpage layout and content dynamically.
Understanding XMLHttpRequest
An object of XMLHttpRequest is used for asynchronous communication between client and
server.

It performs following operations:

1. Sends data from the client in the background

2. Receives the data from the server
3. Updates the webpage without reloading it.

Properties of XMLHttpRequest object

The common properties of XMLHttpRequest object are as follows:

Property Description

onReadyStateChange It is called whenever readystate attribute changes. It must not be used

with synchronous requests.

readyState represents the state of the request. It ranges from 0 to 4.

0 UNOPENED open() is not called.

1 OPENED open is called but send() is not called.

2 HEADERS_RECEIVED send() is called, and headers and status are

available.

3 LOADING Downloading data; responseText holds the data.

4 DONE The operation is completed fully.

reponseText returns response as text.

responseXML returns response as XML

The onreadystatechange event

When a request to a server is sent, we want to perform some actions based on the response.

The onreadystatechange event is triggered every time the readyState changes.

The readyState property holds the status of the XMLHttpRequest.

When readyState is 4 and status is 200, the response is ready:

Example
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
document.getElementById("demo ajax").innerHTML = xhttp.responseText;
}
};

Methods of XMLHttpRequest object

The important methods of XMLHttpRequest object are as follows:

Method Description

void open(method, URL) opens the request specifying get or post method
and url.

void open(method, URL, async) same as above but specifies asynchronous or

not.

void open(method, URL, async, username, same as above but specifies username and
password) password.

void send() sends get request.

void send(string) send post request.

setRequestHeader(header,value) it adds request headers.

open() method will opens the connection with the server and send will sends our request
object to the server.

the XMLHttpRequest object into one variable called obj then

obj.open(” POST/GET “, ” destination URL “,true/false);

obj.send();

 first parameter having the values POST/GET this is depends on our requirement, my choice
is always POST, because its having security than GET
 Second parameter is the destination, to where we need to send the request. It may be
any file path or url or url patterns [ in java ] or what ever
 Third parameter having the values true/false, actually true means we are
opening Asynchronous data transfer, and false means Synchronous

Finally send() method will send the request object to the server.

Example:

xhttp.open("GET/POST", "demo_ajax.asp", true);

xhttp.send();

Example
xhttp.open("GET", "demo_ajax2.asp?fname=sachin&lname=tendulkar", true);
xhttp.send();
How AJAX works?(AJAX Architecture)
AJAX communicates with the server using XMLHttpRequest object. Let's try to understand the
flow of ajax or how ajax works by the image displayed below.

AJAX Architecture

As in the above example, XMLHttpRequest object plays a important role.

1. User sends a request from the UI and a javascript call goes to XMLHttpRequest object.
2. HTTP Request is sent to the server by XMLHttpRequest object.
3. Server interacts with the database using JSP, PHP, Servlet, ASP.net etc.
4. Data is retrieved.
5. Server sends XML data or JSON data to the XMLHttpRequest callback function.
6. HTML and CSS data is displayed on the browser.