Tuesday, April 5, 2011
Hi visitors!
You all may know that use of frames in a webpage may take a long time to load because it must load two or three pages at a time instead of a single page and some browsers may not support frames!
So there is an alternative for frames to load other page in a web page!
This can be done by using ajax calls,the procedure is so simple we have to write a function which makes a particular div which can be loaded by another webpage,it is not a tough task to those who knows ajax well but for the beginers it is a good practice and must use in a ajax site.
Now I directly describe the code for ajax callas!
The below code will be common for any ajax call and the one function which will be different which is used for our post!
You all may know that use of frames in a webpage may take a long time to load because it must load two or three pages at a time instead of a single page and some browsers may not support frames!
So there is an alternative for frames to load other page in a web page!
This can be done by using ajax calls,the procedure is so simple we have to write a function which makes a particular div which can be loaded by another webpage,it is not a tough task to those who knows ajax well but for the beginers it is a good practice and must use in a ajax site.
Now I directly describe the code for ajax callas!
The below code will be common for any ajax call and the one function which will be different which is used for our post!
var xmlhttp=null;
var div="";
function getajaxpage(Rel_url,data,divn)
{
loading(divn);
div=divn;
xmlhttp=GetXmlHttpObject();
xmlhttp.open("POST", Rel_url, true);
xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xmlhttp.onreadystatechange=stateChanged;
xmlhttp.send(data);
xmlhttp.onreadystatechange=stateChanged;
}
function stateChanged()
{
var Results=document.getElementById(div);
if( xmlhttp.readyState<4)
loading(div);
if(xmlhttp.readyState==4)
Results.innerHTML=xmlhttp.responseText;
}
function loading(ldiv)
{
ld=document.getElementById(ldiv);
ld.innerHTML="loading...";
}
function GetXmlHttpObject()
{
if(window.XMLHttpRequest)
return new XMLHttpRequest();
else if(window.ActiveXObject)
return new ActiveXObject("Microsoft.XMLHTTP");
else
{
alert("Your browser does not support AJAX.");
return null;
}
return null;
}
and we need a single function which makes all for this postfunction getpage(Url)
{
getajaxpage(Url,"","fdiv");
}
the above code is a ajax post call which calls a desired url which must be changed in a particular divex:
<a href="javascript:getpage('someurl')">page1</a>
<a href="javascript:getpage('anotherurl')">page2</a>
Thus the url in the link present is loaded in the div which is given(Here:fdiv).Thanking You!
Subscribe to:
Post Comments (Atom)
Currently have 0 comments: