Introduction To AJAX
A Technique or a Way which uses a group of technologies for creating fast and dynamic web pages.
AJAX is combination of three technologies
XML or JSON
Client side scripting language.
Created by MR. Brendan Eich in May, 1995.
Introduced by Microsoft in 1998.
Old versions of IE ( IE5 and IE6) uses ActiveX object.
XML OR JSON ---
XML is a software- and hardware-independent tool for storing and transporting data.
Need of AJAX
In classic web application, there were only static web pages or dynamic pages with lesser functionalities
But as the technology speeds up with time desktop applications were moving to web applications.
At that time it was very costly to build applications in classic web architecture which consists of synchronous behavior as well as time consuming (response is very slow if user makes any request) so this methodology was introduced.
Working of AJAX
HTTP Request is sent to the server by XMLHttpRequest object.
Server interacts with the database using any server side scripting.
Data is retrieved.
Server sends XML data or JSON data to the XMLHttpRequest callback function.
HTML and CSS data is displayed on the browser.
Classic V/S AJAX
Synchronous V/S Asynchronous
HOW TO MAKE AJAX REQUEST
Create an object
if (window. XMLHttpRequest)
// Mozilla, Safari, IE7+ ...
httpRequest = new XMLHttpRequest();
else if (window.ActiveXObject)
// IE 6 and older
httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
Connection to server and request making
Get Request –
httpRequest . open ( 'GET‘, 'http://www.example.org/some.file', true);
httpRequest . send( null );
Post Request –
httpRequest .Open ( "POST", "ajax_test.asp", true);httpRequest. setRequestHeader ( "Content-type", "application/x-www-form-urlencoded");httpRequest . Send ("fname=Henry&lname=Ford");
Handle Response From the Server
For Asynchronous Requests.
httpRequest . onreadystatechange = function ()
if ( httpRequest .readyState == 4 && httpRequest .status == 200)
For Synchronous request
Document . getElementById ("demo").innerHTML = httpRequest .responseText;
Properties of XMLHttpRequest
XMLHttpRequest. readyState ---
Returns an unsigned short, the state of the request.
XMLHttpRequest. Onreadystatechange ---
An Event Handler that is called whenever the readyState attribute changes.
XMLHttpRequest . status
Returns an unsigned short with the status of the response of the request.
XMLHttpRequest . statusText
Returns a DOMString containing the response string returned by the HTTP server. Unlike XMLHTTPRequest.status, this includes the entire text of the response message ("200 OK", for example).
Is an unsigned long representing the number of milliseconds a request can take before automatically being terminated.
Methods of XMLHttpRequest
XMLHttpRequest. Open –
XMLHttpRequest. Send –
Sends the request.
Sets the value of an HTTP request header. You must call setRequestHeader()after open(), but before send().
Benefits of AJAX
Response time is faster so increases performance and speed.
No require to completely reload page again. AJAX is improve the speed and performance. Fetching data from database and storing data into database perform background without reloading page.
Real Life Examples
In Google Mail
First they show you the inbox, then in the background they use a POST request and load all your mail messages ( the mail body ) in as a JSON.
That is how they are able to let you jump instantaneously from your inbox to your mail messages without any delay.