AJAX

Asynchronous JavaScript and

XML …
Introduction

• AJAX is not a new programming

language, but a new way to use existing
standards.

• With AJAX you can create better, faster,

and more user-friendly web applications.

• AJAX is based on JavaScript and HTTP

requests.
Introduction
• With AJAX, your JavaScript can communicate
directly with the server, using the JavaScript
XMLHttpRequest object. With this object, your
JavaScript can trade data with a web server,
without reloading the page.

• AJAX uses asynchronous data transfer (HTTP

requests) between the browser and the web
server, allowing web pages to request small bits
of information from the server instead of whole
pages.
Standards
• AJAX is based on the following web standards:
– JavaScript
– XML
– HTML
– CSS

• The web standards used in AJAX are well

defined, and supported by all major browsers.
AJAX applications are browser and platform
independent.
The XMLHttpRequest Object

• By using the XMLHttpRequest object, a

web developer can update a page with
data from the server after the page has
loaded!

• AJAX was made popular in 2005 by

Google (with Google Suggest).
AJAX - Browser Support
• Different browsers use different methods
to create the XMLHttpRequest object.
• var xmlHttp;

• // Firefox, Opera 8.0+, Safari

xmlHttp = new XMLHttpRequest();

• // Internet Explorer
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
(or)
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
// a function returning request object
function getXMLHttpRequestObject ( ) {
var xmlHttp = null;
try{
xmlHttp = new XMLHttpRequest();
}catch (e){
try{
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
}catch (e){
try{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}catch (e){
alert (“Your browser does not support AJAX”);
}
}
}
return xmlHttp;
}
More About the XMLHttpRequest Object

• The properties
– onreadystatechange
– readyState
– status
– responseText
– responseXML
More About the XMLHttpRequest Object

• The onreadystatechange Property

– The onreadystatechange property stores the
function that will process the response from a
server

xmlHttp.onreadystatechange = function() {
//We are going to write some code here
}
More About the XMLHttpRequest Object

• The readyState Property

• Here are 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 complete
More About the XMLHttpRequest Object

• The readyState property holds the status of the

server's response.
• Each time the readyState changes, the
onreadystatechange function will be executed.

• xmlHttp.onreadystatechange = function() {
if(xmlHttp.readyState == 4) {
document.myForm.time.value =
xmlHttp.responseText;
}
The container created in current
} web page to hold response
text/xml
More About the XMLHttpRequest Object

• The status Property

• Returns the HTTP status code as a
number
– 404 for "Not Found“
– 200 for "OK“
– 408 for "Request Timeout“
– 401 for “Unauthorized”
– 500 for “Internal Server Error”
– etc.
More About the XMLHttpRequest Object
xmlHttp.onreadystatechange = function() {
if(xmlHttp.readyState == 4) {
// if response is ok
If (xmlHttp.status == 200) {
document.myForm.time.value =
xmlHttp.responseText;
}
//if response not found
If (xmlHttp.status == 404) {
alert (“The resource not found”);
}
}
}
AJAX - Sending a Request to the Server
• To send off a request to the server, we use the
open() and the send() method.
• The open() method takes three arguments.
– defines which method to use when sending the
request (GET or POST).
– The second argument specifies the URL of the
server-side script.
– The third argument specifies that the request should
be handled asynchronously.
• The send(null) method sends the request off to
the server.
AJAX - Sending a Request to the Server
• function getAsynchResponse ( ) {
var xmlHttp;
xmlHttp = getXMLHttpRequestObject ( );
if(xmlHttp == null){
return;
}
var url = “/app/ TimeResponse.jsp”;
xmlHttp.onreadystatechange = function;
xmlHttp.open ("GET", url, true);
xmlHttp.send (null);
}
AJAX – Request handler in server

• TimeResponse.jsp

<body>
<%
out.print(new java.util.Date());
%>
</body>
AJAX – Requesting web page in client

• AjaxTest.html

<body>
<form name=“myForm”>
<input type=“button” onCliick=“getAsynchResponse()”/>
<input type=“text” id=“time” value=“”/>
</form>
</body>

The container created in current

web page to hold response
text/xml
 Ajax Best Readings

• For detailed reference on Ajax

– http://www.w3schools.com/ajax/default.asp

– http://www.ibm.com/developerworks/views/web/libraryview
=Mastering+Ajax
Wish you a nice Ajax exploration…

Thanking you,
Mahesh Babu M.