BACKGROUND
Few days back I had to face a question, Could AJAX reduce page loading time?
Since then I have been thinking to write something on it. The term “AJAX” is not
new in web application. Google has been using it since 2005.
INTRODUCTION
We all know AJAX process one kind of HTTP request for us. Always we are using
HTTP request in web browser. When a request appears to web server in the
response it returns some content. Generally it is a bundle of html codes. After
getting this bundle, the web browser load the new content and we loss previously
loaded page. On this context AJAX can play an excellent rule.
WHAT IS AJAX
AJAX = Asynchronous JavaScript and XML.
The mechanism of AJAX is very simple. JavaScript send a xmlHTTP request to
server and preserve the returned content in a variable. So it is not affecting
currently loaded page.
CONFIGURE AJAX
CPain, JQuery, Prototype are famous libraries for AJAX and pretty easy to
use. And writing an AJAX function is also not a big deal. First need an xmlHTTP
reference to process.// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
// Internet Explorer
xmlHttp=new ActiveXObject(“Msxml2.XMLHTTP”);
xmlHttp=new ActiveXObject(“Microsoft.XMLHTTP”);
When xmlHttp object is ready then we can send request to server. There are tow
basic function “open” and “send” to process request. First one set the
properties and second one send the request.
xmlHttp.open (“GET”,” abc.php”, true);
xmlHttp.send();
xmlHttp.onreadystatechange is a special instruction to set a “function” or
“function name” to catch the response. After sending request successfully the
return content store in a variable called “xmlHttp.responseText”. We can trace
the success rate of the request from some status flags (Loading-1, Loaded-2,
Interactive-3, and Complete-4). These status flags stored in “xmlHttp.readyState”.
xmlHttp.onreadystatechange=function()
{
if(xmlHttp.readyState==4)
{
Alert(xmlHttp.responseText );
}
}
So AJAX is nothing but browsing a specific URL from a JavaScript document
keeping the existing page loaded as it is. This is so far what AJAX is.
AJAX & PAGE LOADING TIME:
First of all AJAX is not a tool to reduce the system press. It can do nothing
except fetching content from server. But if we can use AJAX in such a way that
first time we will load small amount of data and the rest data will fetch if
user request for it. In that case AJAX can reduce the page loading time
drastically.Let’s say we are showing 10 pictures in a page. If one image needs
‘X’ amount of time, then total time is
T = 10X
Now if we decide to load one image first time and rest 9 images will load if
user clicks on first loaded image. Then first loading time of the page is
T = 1X
So it will reduce the system press by 9 times. This is actually how AJAX can
reduce the page loading time.
REFERENCE:
http://www.w3schools.com/ajax/default.asp
http://www.prototypejs.org/api/ajax
http://cpaint.sourceforge.net/
http://docs.jquery.com/Ajax
EXAMPLE
See the following example to see how AJAX works.
<html>
<head>
<script type=”text/javascript”>
function ajax ()
{
var xmlHttp;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject(“Msxml2.XMLHTTP”);
}
catch (e)
{
try
{
xmlHttp=new ActiveXObject(“Microsoft.XMLHTTP”);
}
catch (e)
{
alert(“Your browser does not support AJAX!”);
return false;
}
}
}
return xmlHttp;
}
function ajaxFunction()
{
var xmlHttp;
xmlHttp = ajax();
xmlHttp.onreadystatechange=function()
{
if(xmlHttp.readyState==4)
{
document.myForm.time.value=xmlHttp.responseText;
}
}
xmlHttp.open(“GET”,”time.php”,true);
xmlHttp.send(null);
}
</script>
</head>
</body>
<form name=”myForm”>
<input type=”button” onclick=”ajaxFunction();” value=”Click Me” />
Time: <input type=”text” name=”time” />
</form>
</body>
</html>
<?php
//time.php
// Save in same Directory
echo date(‘H a’);
?>
Well, I tried to make this example easy to all. Hopefully everybody will enjoy it.
Mentors Award Q3 2008
Top Website Coder 
