Ajax is used mainly to create interactive web
applications. AJAX (Asynchronous JavaScript and XML) technology is not
based on a new language but proposes a new approach to implement Web
applications. Indeed, its combine existing technologies to overcome the
drawbacks of the HTTP protocol.
The basic idea of Ajax is the usage of the
JavaScript XMLHttpRequest object to make asynchronous calls to the Web server.
In this way you will avoid reloading the Web page whenever is necessary data
from the server. Web applications using Ajax thus become smaller, faster and
friendlier. Besides JavaScript, Ajax applications involves HTML and CSS for
presentation, DOM for browse interaction and XML for data interchange.
Ajax
technology is a current standard. Most browsers have support for XMLHttpRequest
(Internet Explorer, Firefox, Chrome, Opera, Safari). Below is a short function
that will detect the browser type and instantiates the xmlHttp
object:
function
ajaxFunction()
{
var xmlhttp;
if (window.XMLHttpRequest)
{
// for IE7+, Firefox, Opera, Safari
xmlhttp=new
XMLHttpRequest();
}
else if
(window.ActiveXObject)
{
// for IE6,
IE5
xmlhttp=new
ActiveXObject
("Microsoft.XMLHTTP");
}
else
{
alert("Your browser does not
support XMLHTTP!");
}
}
XMLHttpRequest object properties are:
-
onreadystatechange. Allows implementation of a function to
process data received from the server. This function will be called
automatically by the browser when associated xmlHttp event occurs. The function
prototype is:
xmlhttp.onreadystatechange=function()
{
//
data processing
}
- readyState. This
property keeps status code that is the answer to the last call made. Possible
values are:
0 application was not
initialized;
1 application is
ready;
2 the request has been
sent;
3 the request is in
process;
4 the request is complete.
At each
change in value of readyState variable browser will automatically execute the
function associated onreadystatechange property. This will test the end of
request and will process the data received:
xmlhttp.onreadystatechange=function()
{
if(xmlhttp.readyState==4)
{
// data
processing
}
}
- responseText /
responseXML. Provides data from the server response. As name
suggest, they are usually wrapped in plain text or XML.
xmlhttp.onreadystatechange=function()
{
if(xmlhttp.readyState==4)
{
document.dispPanel.value =
xmlhttp.responseText;
}
}
To send the request to
the server, the program will call the XMLHttpRequest object functions
open() followed by send(). The open()
function has three parameters. The first specify the method of data
transmition (GET or POST), the second specify the page from the server
(PHP, ASP, etc..) that will process the request, and the last parameter should
be always true for asynchronous calls. In the case of send(),
the only one parameter will be null if the GET call refers pages
on the same directory on the server.
To change a portion of the current page,
this portion may be included in a tag <div>:
<html>
<head>
<title>First
Ajax Example</title>
<script
type="text/javascript">
function ajax()
{
var
xmlhttp;
if (window.XMLHttpRequest)
{
//
code for IE7+, Firefox ...
xmlhttp=new
XMLHttpRequest();
}
else
{
// code for IE6, IE5
xmlhttp=new
ActiveXObject
("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if(xmlhttp.readyState==4) {
document.getElementById
('panel').innerHTML=
xmlhttp.responseText;
}
}
xmlhttp.open("GET","ajaxRepl.php",
true);
xmlhttp.send(null);
}
</script>
</head>
<body>
<div
id='panel'>
<h2>HTML
Text</h2><br>
Original text from HTML
file.
</div>
<form name="f1">
<input type="button" name="Change"
value="Change"
onClick="ajax();">
</form>
</body>
</html>
//
ajaxRepl.php
<?php
echo '<h2>PHP
Text</h2>';
echo '<br>Text from
PHP';
?>
For more information, please consult W3Schools tutorials on
Ajax and tizag Ajax
tutorial.
Ajax Libraries
Ajax Frameworks
Suggested readings: Richard Cornford
- Browser Detection
(and What to Do Instead).
Slides:
C5. Ajax.
Motivation. Objectives. Short history. Internet. Web technologies. Research
issues.
...
HTML, XML, XHTML, CSS.
...
JavaScript, DOM, Client-page interaction.
...
PHP. PDFLib. Symfony. CodeIgniter
...
Ajax. Managing interactions. Ajax libraries. Web App
Frameworks. Dojo.
...
RIA technologies. Google Ajax API. Web services, Web mashups. .Windmill. ...
The SMIL language. Multimedia data. Synchronisation. Links. SMIL Tools. Joomla. Scalable Vector Graphics (SVG). ...
© 2011 UPT. Assoc.Prof.Dr. Dan Pescaru. All rights reserved.