AJAX (Asynchronous JavaScript And XML)

technology | agility | transformation

Last Update: December 24, 2008

 Agenda 2

• Conventional web applications

• Why AJAX?
• What is AJAX?
• Advantages of AJAX
• Where AJAX can be used?
• How does AJAX work?
–Steps for developing an AJAX application
• Real-Life examples of AJAX Applications
• AJAX toolkits
• Disadvantages of AJAX
• Demo AJAX example
• AJAX applications used in our LH projects
 Conventional web applications 3

• “Click, Wait and Refresh” user interaction

• Synchronous “request/response” communication model
• Every time a request is made to the server the page contents have to be
reloaded
• A simple workflow of conventional web applications is shown below:
 Why AJAX? 4

• To avoid the “Click, Wait, and Refresh" user interaction model

• To handle asynchronous “request/response” communication
• To allow “partial screen update" which means web pages can request
and display small bits of information from the server without reloading the
entire page
 What is AJAX? 5

• AJAX is a web development technique that combines the following web

standards to provide dynamic interaction between client and server:
– JavaScript
– XML
– HTML
– CSS
• AJAX is not a new programming language, but a technique to create
better, faster, and more user-friendly web applications
• With AJAX, your JavaScript can communicate directly with the server,
using the JavaScript XMLHttpRequest object and can exchange data with a
web server, without reloading the page.
• It was introduced by Jesse James Garrett in year 2005
 Advantages of AJAX 6

• Here are some of the advantages the AJAX has over classic web
development techniques:
– The interface is much more responsive, changes are instantaneous
– Waiting time is reduced
– The data already entered by the user is not lost
– Traffic to and from the server is reduced considerably – because you do
not have to send the entire page content
 Where AJAX can be used? 7

• Real-time server-side input form data validation

– User IDs, serial numbers, postal codes
• Auto-completion
– Names, City names
• Master detail operation
– Based on a user selection, more detailed information can be fetched and
displayed
• Advanced GUI widgets and controls
– Controls such as tree controls, menus, and progress bars
 How does AJAX work? 8

• The keystone of an AJAX application is XMLHTTPRequest object which is

a built-in object provided by the Web browser Scripting languages
• This object provides the following important methods and properties:
– Methods:
 open (HTTP Request Method, URL, asynchronous)
 send (input parameter)
 abort()
– Properties:
 onreadystatechange
 readyState
 status
 responseText
 responseXML
 Steps for developing an AJAX application 9

• Create a XMLHttpRequest object

• Open a XMLHttpRequest request
• Register a callback method to be invoked when the request is complete
• Send a XMLHttpRequest request
• Process the XML response and set the response to HTML page
 Create a XMLHttpRequest object 10

• Steps to create XMLHttpRequest object

– /*Create a new object to talk to the web server*/

var request = null;

function createRequest(){
try {
// Firefox, Opera 8.0+, Safari
request = new XMLHttpRequest();
} catch (trymicrosoft){
// Internet Explorer
try{
request = new ActiveXObject("Msxml2.XMLHTTP");
}catch (othermicrosoft){
try
{
request = new ActiveXObject("Microsoft.XMLHTTP");
}catch (failed){
request = null;
}
}
}
if(request == null){
alert("Your browser does not support AJAX!");
}
}
 Open a XMLHttpRequest request 11

• Steps to Open a request:

– open() method handles initializing the connection and tells the request object
how to connect to the server.

function userId(){
createRequest();
var url = http://hostname:port/ContextPath/servletName?;
/* Initialize an asynchronous connection using GET */
request.open("GET", url, true);
}

• The first parameter, GET indicates how to send data to the server, this can be GET
or POST
• The second parameter, url is the location of the web application, which is a Servlet
in our case.
• The third parameter, true indicates that the request should be asynchronous. This
can be set true/false.
 Register a callback method 12

• Steps to register callback method

– onreadystatechange property is used to for registering any callback method.
– This property tells the browser that when the request’s state changes, the
browser should call the JavaScript method indicated in the request object

function userId(){
createRequest();
var url = http://hostname:port/ContextPath/servletName?;
/* Initialize an asynchronous connection using GET */
request.open("GET", url, true);
/* Assign the call back method to the request’s onreadystatechange property */
request.onreadystatechange = function(){
}
}
 Send a XMLHttpRequest request 13

• Steps to send the request

– send() method is used to send the request to the server
– null indicates nothing, meaning we are not sending any data in the request

function userId(){
createRequest();
var url = http://hostname:port/ContextPath/servletName?;
/* Initialize an asynchronous connection using GET */
request.open("GET", url, true);
/* Assign the call back method to the request’s onreadystatechange property */
request.onreadystatechange = function(){
}
/* Send the request to the server */
request.send(null);
}
 Process the response 14

• Steps to process the response

– responseText, responseXML property is used to retrieve the data sent by the
server
– null indicates nothing, meaning we are not sending any data in the request

function userId(){
createRequest();
var url = http://hostname:port/ContextPath/servletName?;
/* Initialize an asynchronous connection using GET */
request.open("GET", url, true);
/* Assign the call back method to the request’s onreadystatechange property */
request.onreadystatechange = function(){
if(request.readyState == 4){
if (request.status == 200) {
var response = request.responseText;
alert(“Response :: ”+ response);
}
}
}
/* Send the request to the server */
request.send(null);
}
 The readyState Property 15

• The readyState property holds the status of the server's request. Each time the
readyState changes, the onreadystatechange function will be executed
• Here are the possible values for the readyState property:

State Description

0 (Uninitialized) The object has been created, but not initialized (the open method has not been
called)
1 (Open) The object has been created, but the send method has not been called

2 (Sent) The send method has been called. responseText is not available

3 (Receiving) Some data has been received. responseText is not available

4 (Loaded) All the data has been received. responseText is available

 Real-Life examples of AJAX Applications 16

• Google Suggest (http://www.google.com/webhp?complete=1&hl=en)

• Google Map (http://maps.google.com )
• Gmail (http://www.gmail.com )
• Yahoo Maps (http://maps.yahoo.com/)
 AJAX toolkits 17

AJAX toolkit Where to get it

Prototype http://prototype.conio.net
Dojo http://dojotoolkit.org
Script.aculo.us http://script.aculo.us
Rico http://openrico.org
 Disadvantages of AJAX 18

• The biggest concern with AJAX is accessibility. This is because not all
browsers (especially older ones) have complete support for JavaScript or
the XMLHttpRequest object
• As lot of JavaScript coding involves, it is complex to debug
 Questions?

technology | agility | transformation

Contact Sasank