[Tutorial] -> Ajax "page loader" to div element
Well I've seen a few people wanting to make cutenews load stuff into the same div, sort of like replacing an iframe, so I thought I'd post some code to help you along that.
[Heres an example]
Basically to load a page into a div element basically use this javascript function
Code:
loadPage ( 'page.html', 'div' );
I'll explain the attributes:
Green -> The page you wish to load
Red -> The div element you wish to load it into, eg:
Code:
<div id="div"></div>
Basically that will load the contents of "page.html" into the element id "div"
Heres the javascript:
Code:
<script type="text/javascript">
var div;
function loadPage ( page, obj )
{
div = document.getElementById( 'content' );
if ( window.XMLHttpRequest )
{
httpRequest = new XMLHttpRequest();
}
else if ( window.ActiveXObject )
{
httpRequest = new ActiveXObject ( 'Microsoft.XMLHTTP' );
}
httpRequest.open ( 'GET', page, true );
httpRequest.onreadystatechange = processPage;
httpRequest.send ( false );
}
function processPage ()
{
if ( httpRequest.readyState == 4 )
{
if ( httpRequest.status == 200 )
{
if ( httpRequest.responseText == '' )
{
div.innerHTML = 'Failed to load page';
}
else if ( httpRequest.responseText != '' )
{
div.innerHTML = httpRequest.responseText;
}
}
}
}
</script>
and heres a test page:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>Test page</title>
<script type="text/javascript">
var div;
function loadPage ( page, obj )
{
div = document.getElementById( 'content' );
if ( window.XMLHttpRequest )
{
httpRequest = new XMLHttpRequest();
}
else if ( window.ActiveXObject )
{
httpRequest = new ActiveXObject ( 'Microsoft.XMLHTTP' );
}
httpRequest.open ( 'GET', page, true );
httpRequest.onreadystatechange = processPage;
httpRequest.send ( false );
}
function processPage ()
{
if ( httpRequest.readyState == 4 )
{
if ( httpRequest.status == 200 )
{
if ( httpRequest.responseText == '' )
{
div.innerHTML = 'Failed to load page';
}
else if ( httpRequest.responseText != '' )
{
div.innerHTML = httpRequest.responseText;
}
}
}
}
</script>
</head>
<body>
<a href="javascript:loadPage( 'test_page.html', 'content' )">Load</a>
<div id="content"></div>
</body>
</html>
Any questions, post below.
