AJAX

Asynchronous JavaScript and XML. The term AJAX was developed by Jesse J. Garrett in 2005.
 Used for creating interactive web applications or rich Internet applications.
 Update pages “on the fly”.
 Retrieve data from the server asynchronously in the background.
 Is not a programming language
 Is a server technology.

Technologies used
 XHTML and CSS for presentation
 DOM for dynamic display of and interaction with data
 XML and XSLT or JSON etc for interchange and manipulation of data
 XMLHttpRequest object or IFrames etc for asynchronous communication
 JavaScript or VBScript etc to bring these technologies together

How does it work:

 User triggers an HTML event, such as onClick or onMouseOver.
 JavaScript sends HTTP request to server.
 Server supplies a file (XML, HTML or text) as normal.
 JavaScript in the current page selects part of the file for display.
 JavaScript statement displays the selected part.

Traditional Web Applications

Figure presents the typical interactions between the client and the server in a tradi-tional web
application, such as one that uses a user registration form. First, the user fills in the form’s fields, then
submits the form (Fig. 15.1, Step 1). The browser generates a re-quest to the server, which receives the
request and processes it (Step 2). The server generates and sends a response containing the exact page
that the browser will render (Step 3), which causes the browser to load the new page (Step 4) and
temporarily makes the browser win-dow blank. Note that the clientwaits for the server to respond
and reloads the entire page with the data from the response (Step 4). While such a synchronous
request is being pro-
 cessed on the server, the user cannot interact with the client web page. Frequent long pe-riods of
waiting, due perhaps to Internet congestion, have led some users to refer to the World Wide Web
as the “World Wide Wait.” If the user interacts with and submits an-other form, the process
begins again (Steps 5–8).
This model was originally designed for a web of hypertext documents—what
some people call the “brochure web.” As the web evolved into a full-scale applications platform,
the model shown in Fig. yielded “choppy” application performance. Every full-page refresh
required users to re-establish their understanding of the full-page contents. Users began to
demand a model that would yield the responsive feel of desktop applications.

Ajax Web Applications

Ajax applications add a layer between the client and the server to manage communication
between the two. When the user interacts with the page, the client creates an
XMLHttpRequest object to manage a request (Step 1). The XMLHttpRequest object sends
the request to the server (Step 2) and awaits the response. The requests are asynchronous, so the
user can continue interacting with the application on the client-side while the server processes
the earlier request concurrently. Other user interactions could result in addition-al requests to the
server (Steps 3 and 4). Once the server responds to the original request (Step 5), the
XMLHttpRequest object that issued the request calls a client-side function to process the data
returned by the server. This function—known as a callback function— uses partial page
updates (Step 6) to display the data in the existing web page without re-loading the entire page.
At the same time, the server may be responding to the second re-quest (Step 7) and the client-
side may be starting to do another partial page update (Step 8). The callback function updates
only a designated part of the page. Such partial pages up-dates help make web applications more
responsive, making them feel more like desktop applications. The web application does not load
a new page while the user interacts with it.
Rich Internet Applications
 The term “Rich Internet Applications” was coined by Macromedia in 2002.)
 A combination of desktop and web applications
 Easy to install on the client (just needs browser).
 Client engine; “fat” client.
 Operating system neutral.
 Asynchronous communication (reload without refresh).
 Reduced server-client communication.
 Might even work off-line.

Examples
 Google Maps: adjacent maps are “pre-fetched”.
 Microsoft Silverlight: programmable plugin for graphics, audio, video.
 Curl: web programming language uses Curl runtime environment plugin (not to be
confused with cURL).
 Adobe Flex: based on Flash and J2EE.
 JavaFX (Sun Microsystems).
 Google Web Toolkit: produces AJAX applications from Java code.
 Browser-based “operating systems” (EyeOS, G.ho.st,, etc).

A Simple Example:

<!DOCTYPE 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", "ajax_info.txt", true);
xhttp.send();
}
</script>

</body>
 </html>

ajax_info.txt

AJAX is used for creating interactive web applications or rich Internet applications.

The XMLHttpRequest Object

The XMLHttpRequest object is used to exchange data with a server behind the scenes.

The XMLHttpRequest object:

 Update a web page without reloading the page

 Request data from a server after the page has loaded
 Receive data from a server after the page has loaded
 Send data to a server in the background

XMLHttpRequest Object Methods

Method Description

abort() Cancels the current request

getAllResponseHeaders() Returns header information

getResponseHeader() Returns specific header information

open(method,url,async,uname,pswd) Specifies the type of request, the URL, if the request should
be handled asynchronously or not, and other optional
attributes of a request

method: the type of request: GET or POST

url: the location of the file on the server
async: true (asynchronous) or false (synchronous)
send(string) send(string) Sends the request off to the server.

string: Only used for POST requests

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

XMLHttpRequest Object Properties

Property Description

onreadystatechange Stores a function (or the name of a function) to be called automatically

each time the readyState property changes

readyState Holds the status of the XMLHttpRequest. Changes from 0 to 4:

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

responseText Returns the response data as a string

responseXML Returns the response data as XML data

status Returns the status-number (e.g. "404" for "Not Found" or "200" for
"OK")

statusText Returns the status-text (e.g. "Not Found" or "OK")

Example: using callback Function
<!DOCTYPE html>
<html>
<body>
<div id="demo">
<h1>The XMLHttpRequest Object</h1>
<button type="button"
onclick="loadDoc('ajax_info.txt', myFunction)">Change Content
</button>
</div>
<script>
function loadDoc(url, cFunction) {
var xhttp;
xhttp=new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
cFunction(this);
}
};
xhttp.open("GET", url, true);
xhttp.send();
}
function myFunction(xhttp) {
document.getElementById("demo").innerHTML =
xhttp.responseText;
}
</script>
</body>
</html>

Example:
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>Title</th><th>Artist</th></tr>";
var x = xmlDoc.getElementsByTagName("CD");
for (i = 0; i <x.length; i++) {
table += "<tr><td>" +
x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue +
"</td><td>" +
x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue +
"</td></tr>";
}
document.getElementById("demo").innerHTML = table;
}

cd_catalog.xml
<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>
</CATALOG>