AJAX stands for Asynchronous JavaScript and XML.

AJAX is a new technique for creating

better, faster, and more interactive web applications with the help of XML, HTML, CSS, and
Java Script.
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.
Data-driven as opposed to page-driven.
Rich Internet Application Technology
AJAX is the most viable Rich Internet Application (RIA) technology so far. It is getting
tremendous industry momentum and several tool kit and frameworks are emerging. But at the
same time, AJAX has browser incompatibility and it is supported by JavaScript, which is hard to
maintain and debug.

AJAX is Based on Open Standards

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.
TECHNOLOGIES USED IN AJAX
AJAX cannot work independently. It is used in combination with other technologies to create
interactive web pages.
JavaScript
It is loosely typed scripting language. JavaScript function is called when an event occurs in a
page. Glue for the whole AJAX operation.
DOM
API for accessing and manipulating structured documents. Represents the structure of XML and
HTML documents.
CSS
Allows for a clear separation of the presentation style from the content and may be changed
programmatically by JavaScript.
1

XMLHttpRequest
JavaScript object that performs asynchronous interaction with the server.
AJAX IN ACTION
Steps of AJAX Operation
1. A client event occurs.
2. An XMLHttpRequest object is created.
3. The XMLHttpRequest object is configured.
4. The XMLHttpRequest object makes an asynchronous request to the Webserver.
5. The Webserver returns the result containing XML document.
6. The XMLHttpRequest object calls the callback() function and processes the result.
7. The HTML DOM is updated. Let us take these steps one by one.
A Client Event Occurs: A JavaScript function is called as the result of an event
XMLHTTPREQUEST

The XMLHttpRequest object is the key to AJAX. It has been available ever since Internet
Explorer 5.5 was released in July 2000, but was not fully discovered until AJAX and Web 2.0
in 2005 became popular.
XMLHttpRequest (XHR) is an API that can be used by JavaScript, JScript, VBScript, and
other web browser scripting languages to transfer and manipulate XML data to and from a
webserver using HTTP, establishing an independent connection channel between a webpage's
Client-Side and Server-Side.
The data returned from XMLHttpRequest calls will often be provided by back-end databases.
Besides XML, XMLHttpRequest can be used to fetch data in other formats, e.g. JSON or
even plain text.

XMLHttpRequest Methods
abort(): Cancels the current request. getAllResponseHeaders() Returns the complete set of
HTTP headers as a string. getResponseHeader( headerName ): Returns the value of the
specified HTTP header.
open( method, URL ) open( method, URL, async ) open( method, URL, async, userName )
open( method, URL, async, userName, password ) Specifies the method, URL, and other
optional attributes of a request.
send( content ): Sends the request. setRequestHeader( label, value ): Adds a label/value pair
to the HTTP header to be sent.
XMLHttpRequest Properties
onreadystatechange: An event handler for an event that fires at every state change.
readyState: The readyState property defines the current state of the XMLHttpRequest object.
The following table provides a list of the possible values for the readyState property:
State Description: 0 The request is not initialized. 1 The request has been set up. 2 The request
has been sent. 3 The request is in process. 4 The request is completed.
2

readyState = 0 After you have created the XMLHttpRequest object, but before you have called
the open() method.
readyState = 1 After you have called the open() method, but before you have called send().
readyState = 2 After you have called send().
readyState = 3 After the browser has established a communication with the server, but before
the server has completed the response.
readyState = 4 After the request has been completed, and the response data has been completely
received from the server.
responseText Returns the response as a string.
responseXML Returns the response as XML. This property returns an XML document object,
which can be examined and parsed using the W3C DOM node tree methods and properties.
status Returns the status as a number (e.g., 404 for "Not Found" and 200 for "OK").
statusText Returns the status as a string (e.g., "Not Found" or "OK").
SECURITY
AJAXSecurity: Server Side
AJAX-based Web applications use the same server-side security schemes of regular Web
applications.
You specify authentication, authorization, and data protection requirements in your web.xml file
(declarative) or in your program (programmatic).
AJAX-based Web applications are subject to the same security threats as regular Web
applications.
AJAXSecurity: Client Side
JavaScript code is visible to a user/hacker. Hacker can use JavaScript code for inferring serverside weaknesses.
JavaScript code is downloaded from the server and executed ("eval") at the client and can
compromise the client by mal-intended code.
Downloaded JavaScript code is constrained by the sand-box security model and can be relaxed
for signed JavaScript.
CURRENT ISSUES
AJAX is growing very fast and that is the reason that it contains many issues with it. We hope
with the passes of time, they will be resolved and AJAX will become ideal for web applications.
We are listing down a few issues that AJAX currently suffers from.
Complexity is increased
Server-side developers will need to understand that presentation logic will be required in the
HTML client pages as well as in the server-side logic.
Page developers must have JavaScript technology skills.
AJAX-based applications can be difficult to debug, test, and maintain
JavaScript is hard to test - automatic testing is hard.
Weak modularity in JavaScript.
3

 Lack of design patterns or best practice guidelines yet.

Toolkits/Frameworks are not mature yet
Most of them are in beta phase.
No standardization of the XMLHttpRequest yet
Future version of IE will address this.
No support of XMLHttpRequest in old browsers
Iframe will help.
JavaScript technology dependency and incompatibility
Must be enabled for applications to function.
Still some browser incompatibilities exist.
JavaScript code is visible to a hacker
Poorly designed JavaScript code can invite security problems.
What is AJAX? AJAX stands for Asynchronous Javascript And XML AJAX is not a
programming language AJAX is a way of using existing standards (JavaScript and
XML) to make more interactive web applications AJAX was popularized in 2005 by
Google (with Google suggest)
An AJAX Application Recall the standard HTTP transaction 1. Client opens
connection to server
2. Client sends request to server 3. Server sends reply to client 4. Client and
server close connection
After Step 4, the client renders the document and this may include running some
JavaScript In an AJAX application, the JavaScript code then communicates with the
server behind the scenes Communication with the server takes place
asynchronously, and transparently to the user Data is exchanged with the server
without the need for a page reload This is accomplished through a special kind of
HTTP request
Setting up an AJAX Transaction Create an XMLHTTPRequest object Set up the
request's onreadystatechange function Open the request Send the request
Creating an XMLHTTPRequest Object function sendRequest() var xmlHttp =
GetXmlHttpObject(); if (!xmlHttp) { return false; } xmlHttp.onreadystatechange =
function() { if (xmlHttp.readyState == 4) { alert("Request complete"); } } var
requestURI = "http://myserver.org/somepage.txt"; xmlHttp.open("GET" , requestURI,
true); xmlHttp.send(null); }
Setting
onreadystatechange
function
sendRequest()
var
xmlHttp
=
GetXmlHttpObject(); if (!xmlHttp) { return false; } xmlHttp.onreadystatechange =
function() { if (xmlHttp.readyState == 4) { alert("Request complete"); } } var
requestURI = "http://myserver.org/somepage.txt"; xmlHttp.open("GET" , requestURI,
true); xmlHttp.send(null); }
Why Respond with XML? We can look at the XML text within a response using
the responseText property Even better, we can use the responseXML property to
access the XML Best, responseXML.documentElement contains the document tree
for the XML This is a document tree in the DOM model that we've seen before (just
like document)

Ex:

<!DOCTYPE html>
4

<html>
<body>
<p id="demo">Let AJAX change this
text.</p>
<button type="button"
onclick="loadDoc()">Change
Content</button>
<script>
function loadDoc() {
var xhttp;
if (window.XMLHttpRequest) {
// code for modern browsers
xhttp = new XMLHttpRequest();
}

xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status
== 200) {
document.getElementById("demo").innerH
TML = xhttp.responseText;
}
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
}
</script></body></html>
ajax_info.txt:Welcome

What is AJAX ?

AJAX is Asynchronous JavaScript And XML.

The XmlHttpRequest is an actual object which works behind the scene.

Ajax implementation uses JavaScript functions to call methods from a webservice,

webpage request in response to get response.

Response data is parsed using DOM.

Asynchronous data retrieval using XmlHttpRequest

Advantages of AJAX

Reduce the traffic travels between the client and the server.

Response time is faster so increases performance and speed.

You can use JSON (JavaScript Object Notation) which is alternative to XML. JSON is
key value pair and works like an array.

You can use Firefox browser with an add-on called as Firebug to debug all Ajax calls.

Ready Open source JavaScript libraries available for use JQuery, Prototype,
Scriptaculous, etc..

AJAX communicates over HTTP Protocol.

Disadvantages of AJAX

It can increase design and development time

More complex than building classic web application

Security is less in AJAX application as all files are downloaded at client side.

Search Engine like Google cannot index AJAX pages.

JavaScript disabled browsers cannot use the application.

Due to security constraints, you can only use it to access information from the host that
served the initial page. If you need to display information from another server, it is not
possible within the AJAX.