AJAX:

AJAX is an acronym for Asynchronous JavaScript and XML. AJAX is a new

technique for creating better, faster and interactive web applications with the help of
JavaScript, DOM, XML, HTML, CSS etc. AJAX allows you to send and receive data
asynchronously without reloading the entire 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 the most viable Rich Internet Application(RIA) technique so far.

Where is it used?
There are too many web applications running on the web that are using AJAX Technology.
Some are:
1. Gmail
2. Face book
3. Twitter
4. Google maps
5. YouTube etc.,

How does it work?

There are two types of requests synchronous as well as asynchronous. Synchronous requests
are the one which follows sequentially i.e if one process is going on and in the same time
another process wants to be executed, it will not be allowed that means the only one process at
a time will be executed. This is not good because in this type most of the time CPU remains
idle such as during I/O operation in the process which are the order of magnitude slower than
the CPU processing the instructions. Thus to make the full utilization of the CPU and other
resources use asynchronous calls. For more information visit this link. Why the word
JavaScript is present here. Actually, the requests are made through the use of JavaScript
functions. Now the term XML which is used to create XMLHttpRequest object.
Thus the summary of the above explanation is that Ajax allows web pages to be updated
asynchronously by exchanging small amounts of data with the server behind the scenes.

For implementing Ajax, only be aware of XMLHttpRequest object. Now, what actually it is. It
is an object used to exchange data with the server behind the scenes. Try to remember the
paradigm of OOP which says that object communicates through calling methods (or in general
sense message passing). The same case applied here as well. Usually, create this object and use
it to call the methods which result in effective communication. All modern browsers support
the XMLHttpRequest object.
AJAX Components
AJAX is not a technology but group of inter-related technologies. AJAX Technologies
includes:
 HTML/XHTML and CSS
 DOM
 XML or JSON (JavaScript Object Notation)
 XMLHttpRequest Object
 JavaScript

Understanding XMLHttpRequest:

The XMLHttpRequest object can be used to exchange data with a server behind the scenes. This means
that it is possible to update parts of a web page, without reloading the whole page.

It is the heart of AJAX technique. An object of XMLHttpRequest is used for asynchronous

communication between client and server.it provides a set of useful methods and properties that are
used to send HTTP Request to and retrieve data from the web 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.

Syntax for creating an XMLHttpRequest object:

Variable name = new XMLHttpRequest ();

Ex.
var req = new XMLHttpRequest();

 Methods of XMLHttpRequest object

 Method Description

new XMLHttpRequest() Creates a new XMLHttpRequest object

abort() Cancels the current request

getAllResponseHeaders() Returns header information

getResponseHeader() Returns specific header information

open(method, url,async,user,psw) Specifies the request

method: the request type GET or POST

url: the file location
async: true (asynchronous) or false (synchronous)
user: optional user name
psw: optional password

send() Sends the request to the server

Used for GET requests

send(string) Sends the request to the server.

Used for POST requests

setRequestHeader() Adds a label/value pair to the header to be sent

Syntax of open() method:

req.open("GET", "abc.txt", true);

req.send();

req stands for the request, it is basically a reference variable.

The GET parameter is as usual one of two types of methods to send the request.
Use POST as well depending upon whether send the data through POST or GET
method.
The second parameter being the name of the file which handles the requests and
processes them. The third parameter is true, it tells that whether the requests are
processed asynchronously or synchronously. It is by default true which means that
requests are asynchronous. The open() method prepares the request before
sending it to the server. The send method is used to send the request to the
server.

Events and handling mechanism: (Ajax Response)

Any action performs on the clicking button, hovering over elements, page loading
etc all are termed as events. Also aware of fact that javascript can detect events.
So bind the code of specific event with its action which can be implemented by
javascript.
These are basically event handlers.
Implementing event handlers which actually hold the events.
 Events handlers are basically functions written in javascript which act on or set
into action when an event is fired by the user.
When sending the request through send method usually get the response from
the server later. But getting of response time is not known. So track it.

Therefore to keep a track of the response onreadystatechange event which is

binding with the event handler(function) which will get executed when a
response comes.

When a request to the server is sending perform actions based on the response.
The onreadystatechange event is triggered every time the readyState changes.
So what actually a ready state is and when will the onreadystate event actually
occur and how many times it will occur between the request and response?

The XMLHttpRequest object has a property called as readyState whose value

changes in the complete request-response journey i.e when a request is
prepared, sent, resolves, processed and when the response comes. That’s why it
is called os onreadystatechange.

Property Description

onreadystatechange Defines a function to be called when the readyState

property changes

readyState Holds the status of the XMLHttpRequest.

0: request not initialized
1: server connection established
2: request received
3: processing request
4: request finished and response is ready

status 200: "OK"

403: "Forbidden"
404: "Page not found"
 statusText Returns the status-text (e.g. "OK" or "Not Found")

Advantages:
1. Speed is enhanced as there is no need to reload the page again.
2. AJAX make asynchronous calls to a web server, this means client
browsers avoid waiting for all the data to arrive before starting of
rendering.
3. Form validation can be done successfully through it.
4. Bandwidth utilization – It saves memory when the data is fetched from
the same page.
5. More interactive.
Disadvantages:
1. Ajax is dependent on Javascript. If there is some Javascript problem with
the browser or in the OS, Ajax will not support.
2. Ajax can be problematic in Search engines as it uses Javascript for most
of its parts.
3. Source code written in AJAX is easily human readable. There will be some
security issues in Ajax.
4. Debugging is difficult.
5. Problem with browser back button when using AJAX enabled pages.

Example 1: load the data of a text file

txtajax.html

<html>
<body>

<div id="demo">
<h1>The XMLHttpRequest Object</h1>
<button type="button" onclick="loadDoc()">Change Content</button>
</div>

<script>
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML =
this.responseText;
}
};
xhttp.open("GET", "abc.txt", true);
xhttp.send();
}
</script>
</body>
</html>

abc.txt

<h1> Tata Consultancy Services (TCS) </h1>

<p> TCS is an Indian multinational technology company specializing in information
technology services and consulting. </p>
<p> TCS has over 601,000 of the world’s best-trained consultants in 54 countries. </p>

Example 2: load the data of a xml file

firstAjax.html

<html>
<style>
table,th,td {
border : 1px solid black;
border-collapse: collapse;
}
th,td {
padding: 5px;
}
</style>
<body>

<h1>The XMLHttpRequest Object</h1>

<button type="button" onclick="loadDoc()">Get my CD collection</button>

<br><br>
<table id="demo"></table>

<script>
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myFunction(this);
}
};
xhttp.open("GET", "cd_catalog.xml", true);
xhttp.send();
}
function myFunction(xml) {
var i;
var xmlDoc = xml.responseXML;
var table="<tr><th>Artist</th><th>Title</th></tr>";
var x = xmlDoc.getElementsByTagName("CD");
for (i = 0; i <x.length; i++) {
 table += "<tr><td>" +
x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue +
"</td><td>" +
x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue +
"</td></tr>";
}
document.getElementById("demo").innerHTML = table;
}
</script>

</body>
</html>

cd_catalog.xml
<?xml version="1.0" encoding="UTF-8"?>
<CATALOG>
<CD>
<TITLE>Empire Burlesque</TITLE>
<ARTIST>Bob Dylan</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>Columbia</COMPANY>
<PRICE>10.90</PRICE>
<YEAR>1985</YEAR>
</CD>
<CD>
<TITLE>Hide your heart</TITLE>
<ARTIST>Bonnie Tyler</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>CBS Records</COMPANY>
<PRICE>9.90</PRICE>
<YEAR>1988</YEAR>
</CD>
<CD>
<TITLE>Greatest Hits</TITLE>
<ARTIST>Dolly Parton</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>RCA</COMPANY>
<PRICE>9.90</PRICE>
<YEAR>1982</YEAR>
</CD>
<CD>
<TITLE>Still got the blues</TITLE>
<ARTIST>Gary Moore</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>Virgin records</COMPANY>
<PRICE>10.20</PRICE>
<YEAR>1990</YEAR>
</CD>
<CD>
<TITLE>Eros</TITLE>
<ARTIST>Eros Ramazzotti</ARTIST>
<COUNTRY>EU</COUNTRY>
<COMPANY>BMG</COMPANY>
<PRICE>9.90</PRICE>
<YEAR>1997</YEAR>
</CD>
<CD>
<TITLE>One night only</TITLE>
<ARTIST>Bee Gees</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>Polydor</COMPANY>
<PRICE>10.90</PRICE>
<YEAR>1998</YEAR>
</CD>
<CD>
<TITLE>Sylvias Mother</TITLE>
<ARTIST>Dr.Hook</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>CBS</COMPANY>
<PRICE>8.10</PRICE>
<YEAR>1973</YEAR>
</CD>
<CD>
<TITLE>Maggie May</TITLE>
<ARTIST>Rod Stewart</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>Pickwick</COMPANY>
<PRICE>8.50</PRICE>
<YEAR>1990</YEAR>
</CD>
<CD>
<TITLE>Romanza</TITLE>
<ARTIST>Andrea Bocelli</ARTIST>
<COUNTRY>EU</COUNTRY>
<COMPANY>Polydor</COMPANY>
<PRICE>10.80</PRICE>
<YEAR>1996</YEAR>
</CD>
<CD>
<TITLE>When a man loves a woman</TITLE>
<ARTIST>Percy Sledge</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>Atlantic</COMPANY>
<PRICE>8.70</PRICE>
<YEAR>1987</YEAR>
</CD>
<CD>
<TITLE>Black angel</TITLE>
<ARTIST>Savage Rose</ARTIST>
<COUNTRY>EU</COUNTRY>
<COMPANY>Mega</COMPANY>
<PRICE>10.90</PRICE>
<YEAR>1995</YEAR>
</CD>
<CD>
<TITLE>1999 Grammy Nominees</TITLE>
<ARTIST>Many</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>Grammy</COMPANY>
<PRICE>10.20</PRICE>
<YEAR>1999</YEAR>
</CD>
<CD>
<TITLE>For the good times</TITLE>
<ARTIST>Kenny Rogers</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>Mucik Master</COMPANY>
<PRICE>8.70</PRICE>
<YEAR>1995</YEAR>
</CD>
<CD>
<TITLE>Big Willie style</TITLE>
<ARTIST>Will Smith</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>Columbia</COMPANY>
<PRICE>9.90</PRICE>
<YEAR>1997</YEAR>
</CD>
<CD>
<TITLE>Tupelo Honey</TITLE>
<ARTIST>Van Morrison</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>Polydor</COMPANY>
<PRICE>8.20</PRICE>
<YEAR>1971</YEAR>
</CD>
<CD>
<TITLE>Soulsville</TITLE>
<ARTIST>Jorn Hoel</ARTIST>
<COUNTRY>Norway</COUNTRY>
<COMPANY>WEA</COMPANY>
<PRICE>7.90</PRICE>
<YEAR>1996</YEAR>
</CD>
<CD>
<TITLE>The very best of</TITLE>
<ARTIST>Cat Stevens</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>Island</COMPANY>
<PRICE>8.90</PRICE>
<YEAR>1990</YEAR>
</CD>
<CD>
<TITLE>Stop</TITLE>
<ARTIST>Sam Brown</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>A and M</COMPANY>
<PRICE>8.90</PRICE>
<YEAR>1988</YEAR>
</CD>
<CD>
<TITLE>Bridge of Spies</TITLE>
<ARTIST>T'Pau</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>Siren</COMPANY>
<PRICE>7.90</PRICE>
<YEAR>1987</YEAR>
</CD>
<CD>
<TITLE>Private Dancer</TITLE>
<ARTIST>Tina Turner</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>Capitol</COMPANY>
<PRICE>8.90</PRICE>
<YEAR>1983</YEAR>
</CD>
<CD>
<TITLE>Midt om natten</TITLE>
<ARTIST>Kim Larsen</ARTIST>
<COUNTRY>EU</COUNTRY>
<COMPANY>Medley</COMPANY>
<PRICE>7.80</PRICE>
<YEAR>1983</YEAR>
</CD>
<CD>
<TITLE>Pavarotti Gala Concert</TITLE>
<ARTIST>Luciano Pavarotti</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>DECCA</COMPANY>
<PRICE>9.90</PRICE>
<YEAR>1991</YEAR>
</CD>
<CD>
<TITLE>The dock of the bay</TITLE>
<ARTIST>Otis Redding</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>Stax Records</COMPANY>
<PRICE>7.90</PRICE>
<YEAR>1968</YEAR>
</CD>
<CD>
<TITLE>Picture book</TITLE>
<ARTIST>Simply Red</ARTIST>
<COUNTRY>EU</COUNTRY>
<COMPANY>Elektra</COMPANY>
<PRICE>7.20</PRICE>
<YEAR>1985</YEAR>
</CD>
<CD>
<TITLE>Red</TITLE>
<ARTIST>The Communards</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>London</COMPANY>
<PRICE>7.80</PRICE>
<YEAR>1987</YEAR>
</CD>
<CD>
<TITLE>Unchain my heart</TITLE>
<ARTIST>Joe Cocker</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>EMI</COMPANY>
<PRICE>8.20</PRICE>
<YEAR>1987</YEAR>
</CD>
</CATALOG>