Ajax Technology in Web
AJAX
Ajax, shorthand for Asynchronous JavaScriptand XML
• Web development technique for creating
interactive web applications
• The intent is to make web pages feel more
responsive by exchanging small amounts of
data with the server behind the scenes, so
that the entire web page does not have to be
reloaded each time the user makes a change
• This is meant to increase the web page's
interactivity, speed, and usability
The first known use of the term in public
was by Jesse James Garrett in his
February 2005 article Ajax: A New
Approach to Web Applications
• At subsequent talks and seminars
Garrett has made the point that Ajax is
not an acronym
Ajax Technology
Ajax Technology
The Ajax technique uses a combination of:
– XHTML (or HTML), CSS, for marking up and styling information.
– The DOM accessed with a client-side scripting language,
especially ECMAScript implementations such as JavaScript
and JScript, to dynamically display and interact with the
information presented.
– The XMLHttpRequest object to exchange data asynchronously
with the web server. In some Ajax frameworks and in certain
situations, an IFrame object is used instead of the
XMLHttpRequest object to exchange data with the web server.
– XML is sometimes used as the format for transferring data
between the server and client, although any format will work,
including preformatted HTML, plain text, JSON and other
formats.
• Like DHTML, LAMP, or SPA, Ajax is not a technology in
itself, but a term that refers to the use of a group of
technologies together.
XMLHttpRequest
• XMLHttpRequest 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 web server
using HTTP, establishing an
independent connection channel
between a web page's Client-Side and
Server-Side.
• The XMLHttpRequest concept was originally
developed by Microsoft.
• The Microsoft implementation is called
XMLHTTP and, as an ActiveX object, it differs
from the published standard in a few small
ways. It has been available since Internet
Explorer 5.0 and is accessible via JScript,
VBScript and other scripting languages
supported by IE browsers.
• The Mozilla project incorporated the first
compatible native implementation of
XMLHttpRequest in Mozilla 1.0 in 2002.
• This implementation was later followed
by Apple since Safari 1.2, Konqueror,
Opera Software since Opera 8.0 and
iCab since 3.0b352.
• The World Wide Web Consortium published a
Working Draft specification for the
XMLHttpRequest object's API on 5 April
2006.
• While this is still a work in progress, its goal is
"to document a minimum set of interoperable
features based on existing implementations,
allowing Web developers to use these
features without platform-specific code".
• The draft specification is based upon existing
popular implementations, to help improve and
ensure interoperability of code across web
platforms.
• Methods:
– abort()
– getAllResponseHeaders()
– getResponseHeader(header)
– open(method, url, asyncronous, user,
password):
– send(content)
– setRequestHeader(header, value)
• open(method, url, async,
user, password):
– Initializes an XMLHTTP request.
– Specifies the method, URL, and
authentication information for the request.
– After calling this method, you must call
send to send the request and data, if any,
to the server.
• send(content):
– Sends an HTTP request to the server and
receives a response.
– null for no data.
• Properties:
– onreadystatechange
– readyState
– responseText
– responseXML
– status
– statusText
• onreadystatechange:
– Function than handles the different events
• readyState:
– The property is read-only
– It represents the state of the request as an
integer
– The following values are defined:
• readyState:
– 0 (UNINITIALIZED): The object has been created, but not
initialized (the open method has not been called)
– (1) LOADING: The object has been created, but the send method has not been called.
– (2) LOADED: The send method has been called, but the
status and headers are not yet available.
– (3) INTERACTIVE: Some data has been received. Calling
the responseText property at this state to obtain partial
results will return an error, because status and response
headers are not fully available.
– (4) COMPLETED: All the data has been received, and the
complete data is available in the responseText property.
• readyState:
– 0 (UNINITIALIZED): The object has been created, but not
initialized (the open method has not been called)
– (1) LOADING: The object has been created, but the send
method has not been called.
– (2) LOADED: The send method has been called, but the
status and headers are not yet available.
– (3) INTERACTIVE: Some data has been received. Calling
the responseText property at this state to obtain partial
results will return an error, because status and response
headers are not fully available.
– (4) COMPLETED: All the data has been received, and the
complete data is available in the responseText property
• responseText:
– The property is read-only.
– This property represents only one of
several forms in which the HTTP response
can be returned.
• responseXML:
– The property is read-only.
– This property represents the parsed
response entity body.
AJAX step by step
1. Create XMLHttpRequest object
2. Assign a function to the state change event
3. Send a request to the server
4. On a state change, manage the response
5. On a correct response, process the result
and show to the user.
Create XMLHttpRequest object
• Depending on the browser:
– Internet Explorer
request = new ActiveXObject("Microsoft.XMLHTTP");
– Otros navegadores:
request = new XMLHttpRequest();
• Code adapted for different browsers:
if(window.XMLHttpRequest) {
request = new XMLHttpRequest();
}
else if(window.ActiveXObject) {
request = new ActiveXObject("Microsoft.XMLHTTP");
Assign a function to the state change event
• This function will be called
automatically, every time the state of
the XMLHttpRequest object changes:
request.onreadystatechange = nameOfFunction
Important: without “( )”, only the name.
Send a request to the server
• Open the connection, define the method and
the type of connection:
– A synchronous connection (false) blocks the
browser until the response is obtained
– An asynchronous connection (true and default
value) executes on the background
– Important: the URL must belong to the same
domain of the current page
request.open('GET','http://www.ua.es/ajax.jsp',
true);
• Send the additional data:request.send(data or null)
On a state change, manage the response
• The handler is called every time there is a change:
• 0: UNINITIALIZED
• 1: LOADING
• 2: LOADED
• 3: INTERACTIVE
• 4: COMPLETED
• Example of handler:
if (request.readyState == 4) { // Finished
if (request.status==200) { // OK
// Process the result
}
}
else {
// Not finished
}
On a correct response, process the result and
show to the user
• The result can be in different formats:
plain text, HTML, JSON, XML, etc.
• responseText when not structured
result as XML:
alert(request.responseText);
• responseXML when structured result
as XML:
– Returns an XMLDocument object
– Use DOM functions
Example
<script type="text/javascript">
function ajaxFunction() {
var xmlHttp;
if (window.XMLHttpRequest)
xmlHttp = new XMLHttpRequest();
else
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
xmlHttp.onreadystatechange=function() {
if(xmlHttp.readyState == 4) {
document.myForm.time.value += xmlHttp.responseText + "\n";
}
}
xmlHttp.open("GET","time.php",true);
xmlHttp.send(null);
}
</script>
Anather one Example
Example
<html>
<head>
<title>Ajax example</title>
<!-- script -->
</head>
<body>
<form name="myForm">
Name: <input type="text"
onkeyup="ajaxFunction();" name="username" />
<br />
Time: <textarea name="time" cols="40"
rows="10"></textarea>
</form>
</body>
</html>
• PHP:
<?php
header("Expires: -1");
$str1 = date('h:i:s A');
sleep(2);
$str2 = date('h:i:s A');
echo "$str1 -- $str2";
?>
Who’s Using Ajax
Google is making a huge investment in developing the Ajax approach. All of the major products Google has introduced over the last
year — Orkut, Gmail, the latest beta version of Google Groups, Google Suggest, and Google Maps — are Ajax applications. (For more
on the technical nuts and bolts of these Ajax implementations, check out these excellent analyses of Gmail, Google Suggest, and
Google Maps.) Others are following suit: many of the features that people love in Flickr depend on Ajax, and Amazon’s A9.com
search engine applies similar techniques.
These projects demonstrate that Ajax is not only technically sound, but also practical for real-world applications. This isn’t another
technology that only works in a laboratory. And Ajax applications can be any size, from the very simple, single-function Google
Suggest to the very complex and sophisticated Google Maps.
At Adaptive Path, we’ve been doing our own work with Ajax over the last several months, and we’re realizing we’ve only scratched the
surface of the rich interaction and responsiveness that Ajax applications can provide. Ajax is an important development for Web
applications, and its importance is only going to grow. And because there are so many developers out there who already know how to use these technologies, we expect to see many more organizations following Google’s lead in reaping the competitive advantage Ajax
provides.
