pTutorial

New way to learn Programming

Load HTML page via Link

Retrieve data from different HTML file on a same page

Ajax example contains the Ajax program to load different HTML file data without refreshing the whole web page and without changing the URL also.

You can load any web component like PHP pages, JSP pages, Asp pages and Servlet pages also.

<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc(url)
{
var u;
if(window.XMLHttpRequest)
{
u=new XMLHttpRequest();
}
else
{
u=new ActiveXObject("Microsoft.XMLHTTP")
}
u.onreadystatechange=function ()
{
if(u.readyState==4 && u.status==200)
{
document.getElementById("kk").innerHTML=u.responseText;
}
}
u.open("GET",url,true);
u.send();
}

</script>
</head>


<body>
<span style="width:150px; background:#EAEAEA">
<ul style="list-style:none;">
<a href="#" onclick="loadXMLDoc('test.html')">test.html Page Content</a><br/>
<a href="#" onclick="loadXMLDoc('test5.html')">test5.html Page Content</a><br/>
<a href="#" onclick="loadXMLDoc('test4.html')">test4.html Page Content</a><br/>
</ul>
</span>
<hr>
<center>
<div id="kk" style="background:#557F00"> </div>

</center></body>
</html>

Test.html FILE

<!DOCTYPE html>
<html>
<body>
<h2>Test.html page content </h2>
<h2>Test.html page content </h2>
<h2>Test.html page content </h2>
<h2>Test.html page content </h2>
</body>
</html>

All the html file data are same only the name of the file is changed, to identified the page. You can see after the download.

See Also


QUOTES OF THE DAY

Whenever man commits a crime,heaven finds a witness.

LIKE ON FACEBOOK

+1 ON GOOGLE

SHARE ON TWITTER