Andrew Green
02-24-2006, 11:04 PM
Last couple days I've been playing with AJAX a little, here's one of my experiments, with comments added.
A simple, commented, piece of code to create a AJAX based site.
You will need to point the links to somewhere, but to see what is going on you can use this:
loadme.php
<?php
$x = $_GET['action'];
echo "$x";
?>
This method would create much faster loading pages, the downside would be you break normal page navigation. Th back button won't work, refresh will take you back to the first page and you can't bookmark anything but the main page... So I wouldn't really reccomend doing a site like this, but the idea on how to do more useful things is there.
<html>
<head>
<script language="javascript">
function loadpage(page)
{
try
{
// Mozilla uses one way, IE another...
xmlhttp = window.XMLHttpRequest?new XMLHttpRequest():
new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
// Error = Ajax isn't supported, load the page some other way.
// Either a incompatible browser or IE with active x off.
}
xmlhttp.onreadystatechange = trigger;
// If the state changes, call the "trigger" function
xmlhttp.open("GET", page);
// Open the page passed to the function
xmlhttp.send(null);
// If this was a post request it would not be null
}
function trigger()
{
// If it's ready and everything is ok, load the response text into the pagecontent section
if ((xmlhttp.readyState == 4) && (xmlhttp.status == 200))
{
document.getElementById("pagecontent").innerHTML = xmlhttp.responseText;
}
}
</script>
</head>
<body onload="loadurl('loadme.php?action=1')">
<!-- Load the default page right away -->
<table style='width:100%' border='1'>
<tr>
<td colspan='4' style='background-color:black;color:white;tex-align:center;font-size:200%;'>Title Banner</td>
</tr>
<tr>
<td style='cursor:pointer;' onmouseover="this.style.backgroundColor='#ffffd0'" onmouseout="this.style.backgroundColor='#ffffff'" onClick="loadpage('loadme.php?action=1')">
<a class="nav" href="loadme.php?action=1" onClick="return false">link 1</a>
<!-- If javascript is inactive onclick links do nothing
This gives you a back up plan, of course you want it to link to a page
that includes the template and not just the content...
Also will come in on middle clicks in firefox ;)
onclick="return false" will kill the link if javascript is present,
otherwise it processes the javascript link, and the <a> link-->
</td>
<td style='cursor:pointer;' onmouseover="this.style.backgroundColor='#ffffd0'" onmouseout="this.style.backgroundColor='#ffffff'" onClick="loadpage('loadme.php?action=2')">
<a class="nav" href="loadme.php?action=2" onClick="return false">link 2</a>
</td>
<td style='cursor:pointer;' onmouseover="this.style.backgroundColor='#ffffd0'" onmouseout="this.style.backgroundColor='#ffffff'" onClick="loadpage('loadme.php?action=3')">
<a class="nav" href="loadme.php?action=3" onClick="return false">link 3</a>
</td>
<td style='cursor:pointer;' onmouseover="this.style.backgroundColor='#ffffd0'" onmouseout="this.style.backgroundColor='#ffffff'" onClick="loadpage('loadme.php?action=4')">
<a class="nav" href="loadme.php?action=4" onClick="return false">link 4</a>
</td>
</tr>
<tr>
<td colspan='4' id="pagecontent" >Page contents will go here</td></td>
</tr>
</table>
</body>
</html>
A simple, commented, piece of code to create a AJAX based site.
You will need to point the links to somewhere, but to see what is going on you can use this:
loadme.php
<?php
$x = $_GET['action'];
echo "$x";
?>
This method would create much faster loading pages, the downside would be you break normal page navigation. Th back button won't work, refresh will take you back to the first page and you can't bookmark anything but the main page... So I wouldn't really reccomend doing a site like this, but the idea on how to do more useful things is there.
<html>
<head>
<script language="javascript">
function loadpage(page)
{
try
{
// Mozilla uses one way, IE another...
xmlhttp = window.XMLHttpRequest?new XMLHttpRequest():
new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
// Error = Ajax isn't supported, load the page some other way.
// Either a incompatible browser or IE with active x off.
}
xmlhttp.onreadystatechange = trigger;
// If the state changes, call the "trigger" function
xmlhttp.open("GET", page);
// Open the page passed to the function
xmlhttp.send(null);
// If this was a post request it would not be null
}
function trigger()
{
// If it's ready and everything is ok, load the response text into the pagecontent section
if ((xmlhttp.readyState == 4) && (xmlhttp.status == 200))
{
document.getElementById("pagecontent").innerHTML = xmlhttp.responseText;
}
}
</script>
</head>
<body onload="loadurl('loadme.php?action=1')">
<!-- Load the default page right away -->
<table style='width:100%' border='1'>
<tr>
<td colspan='4' style='background-color:black;color:white;tex-align:center;font-size:200%;'>Title Banner</td>
</tr>
<tr>
<td style='cursor:pointer;' onmouseover="this.style.backgroundColor='#ffffd0'" onmouseout="this.style.backgroundColor='#ffffff'" onClick="loadpage('loadme.php?action=1')">
<a class="nav" href="loadme.php?action=1" onClick="return false">link 1</a>
<!-- If javascript is inactive onclick links do nothing
This gives you a back up plan, of course you want it to link to a page
that includes the template and not just the content...
Also will come in on middle clicks in firefox ;)
onclick="return false" will kill the link if javascript is present,
otherwise it processes the javascript link, and the <a> link-->
</td>
<td style='cursor:pointer;' onmouseover="this.style.backgroundColor='#ffffd0'" onmouseout="this.style.backgroundColor='#ffffff'" onClick="loadpage('loadme.php?action=2')">
<a class="nav" href="loadme.php?action=2" onClick="return false">link 2</a>
</td>
<td style='cursor:pointer;' onmouseover="this.style.backgroundColor='#ffffd0'" onmouseout="this.style.backgroundColor='#ffffff'" onClick="loadpage('loadme.php?action=3')">
<a class="nav" href="loadme.php?action=3" onClick="return false">link 3</a>
</td>
<td style='cursor:pointer;' onmouseover="this.style.backgroundColor='#ffffd0'" onmouseout="this.style.backgroundColor='#ffffff'" onClick="loadpage('loadme.php?action=4')">
<a class="nav" href="loadme.php?action=4" onClick="return false">link 4</a>
</td>
</tr>
<tr>
<td colspan='4' id="pagecontent" >Page contents will go here</td></td>
</tr>
</table>
</body>
</html>