In this example we are
loading first.php, second.php and third.php asynchronously in the same
page simultaneously by making multiple ajax function calls.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Ajax Multiple Calls</title>
<script type="text/javascript" src="content_loader.js"></script>
<script type="text/javascript">
function loader(){
f=GetXmlHttpObject();
vloader(f,'first.php','con1');
s=GetXmlHttpObject();
vloader(s,'second.php','con2');
t=GetXmlHttpObject();
vloader(t,'third.php','con3');
}</script>
</head>
<body onload="loader();">
<h1>First.php</h1>
<div id="con1" ></div>
<h1>Second.php</h1>
<div id="con2" ></div>
<h1>Third.php</h1>
<div id="con3" ></div>
</body>
</html>
Content loader.js
function vloader(xmlhttp,url,container)
{
//alert('hi'+url+container);
if(xmlhttp==null)
{alert ("Your browser does not support XMLHTTP!");return;}
if(url.indexOf("?")>= 0){}
else{url=url+"?";}
url=url+"&sid="+Math.random();
xmlhttp.onreadystatechange= function (){
if (xmlhttp.readyState==4)
{ document.getElementById(container).innerHTML=xmlhttp.responseText; } else
{ document.getElementById(container).innerHTML="<img src='loader.gif' />"; } };
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}
/////////////////////////////////////////////////////////////////////////////////////////////
function GetXmlHttpObject()
{
if (window.XMLHttpRequest)
{
return new XMLHttpRequest();
}
if (window.ActiveXObject)
{
return new ActiveXObject("Microsoft.XMLHTTP");
}
return null;
}
first.php
<?php
for($i=0;$i<1000000;$i+=0.1);/////just to show animated loading gif
echo 'First.php..loaded';
?>
second.php
<?php
for($i=0;$i<1000000;$i+=0.1);/////just to show animated loading gif
echo 'second.php..loaded';
?>
third.php
<?php
for($i=0;$i<1000000;$i+=0.1);/////just to show animated loading gif
echo 'third.php..loaded';
?>
No comments:
Post a Comment