AJAX Fundamental Concepts and Interview Questions Zone
AJAX 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 not a programming language.
How AJax Work
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 you can see 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 you can see in the above image, full page is not refreshed at request time and user gets response from the ajax engine.
AJAX Technologies
As describe earlier, ajax is not a technology but group of inter-related technologies. AJAX technologies includes:
HTML/XHTML and CSS
DOM
XML or JSON
XMLHttpRequest
JavaScript
HTML/XHTML and CSS
These technologies are used for displaying content and style. It is mainly used for presentation.
DOM
It is used for dynamic display and interaction with data.
XML or JSON
For carrying data to and from server. JSON (Javascript Object Notation) is like XML but short and faster than XML.
XMLHttpRequest
For asynchronous communication between client and server.
JavaScript
It is used to bring above technologies together. Independently, it is used mainly for client-side validation.
Understanding XMLHttpRequest
An object of XMLHttpRequest is used for asynchronous communication between client and server.
It performs following operations:
Sends data from the client in the background
Receives the data from the server
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
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, password)
Same as above but specifies username and password.
void send()
Sends get request.
void send(string)
Send post request.
setRequestHeader(header,value)
It adds request headers.
How AJAX works?
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.
As you can see in the above example, XMLHttpRequest object plays a important role.
User sends a request from the UI and a javascript call goes to XMLHttpRequest object.
HTTP Request is sent to the server by XMLHttpRequest object.
Server interacts with the database using JSP, PHP, Servlet, ASP.net etc.
Data is retrieved.
Server sends XML data or JSON data to the XMLHttpRequest callback function.