This document provides an overview of Ajax including its history from 1990-2006, common uses like real-time validation and autocompletion, required technologies like XMLHttpRequest and JavaScript, how Ajax works by making asynchronous HTTP requests in the background, and some drawbacks like inability to use the back button.

2. History
 1990 – Applets
 1999 – ActiveX Control in IE5
 2004 – Ajax (gMail & gMaps)
 2006 - W3C Spec

3. When Ajax Needed
 Real-time form data validation
 Autocompletion
 Load on demand
 Sophisticated user interface controls and effects
 Refreshing data and server push
 Partial submit
 Page as an application

4. Technologies
 HTML and CSS for presentation
 The Document Object Model (DOM) for dynamic display
of and interaction with data
 XML for the interchange of data
 The XMLHttpRequest object for asynchronous
communication
 JavaScript to bring these technologies together

5. How Ajax Works

6. The Anatomy of an Ajax Interaction
1. A client event occurs.
2. An XMLHttpRequest object is
created and configured.
3. The XMLHttpRequest object
makes a call.
4. The request is processed by the
ValidateServlet.
5. The ValidateServlet returns an
XML document containing the
result.
6. The XMLHttpRequest object calls the
callback() function and processes the
result.
7. The HTML DOM is updated.

7. Creating XMLHttpRequest Object
var oReq = new XMLHttpRequest;
function getXMLHttpRequest() {
if (window.XMLHttpRequest) {
return new window.XMLHttpRequest;
}
else {
try {
return new ActiveXObject("MSXML2.XMLHTTP.3.0");
}
catch (ex) {
return null;
}
}
}

8. Attributes
readyState The readyState code changes value
from 0 to 4 during a request cycle:
0: not initialized.
1: connection established.
2: request received.
3: processing.
4: finished and response is ready.
status 200: "OK"
404: Page not found.
onreadystatechange callback method assigned via this
attribute
responseText holds the response data as a string of
characters.
responseXml holds the response data as XML data.

9. Methods
open(mode, url, boolean) mode: type of request: GET or POST
url: the location of the file
boolean: true (asynchronous) or false
(synchronous).
send("string") null for a GET command (in native
mode; null not passed with ActiveX
Example

10. Drawbacks
 Cannot use back button on browser
Example
 Dynamic web page updates also make it difficult
to bookmark and return to a particular state of the
application.
 The asynchronous callback-style of programming
required can lead to complex code that is hard to
maintain, debug and test