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.
