diving into ajax
Posted: Thu Feb 22, 2007 2:49 am
I've read a couple of tutorials. And copy/pasted and then tinkered a simple working AJAX application.
Is this pretty much all there is to ajax? Where does the XML come in?
Code: Select all
<html>
<head>
<title>AJAX Test</title>
</head>
<body>
<script type="text/javascript">
function GetXmlHttpObject()
{
var xmlHttp=null;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
function get_time(format)
{
xmlHttp = GetXmlHttpObject();
xmlHttp.onreadystatechange=stateChanged;
if(format == 'regular')
{
xmlHttp.open("GET","time.php?rand="+Math.random(),true);
} else if(format == 'formatted')
{
xmlHttp.open("GET","time.php?format=1&rand="+Math.random(),true);
}
xmlHttp.send(null);
}
function stateChanged()
{
var state = xmlHttp.readyState;
if(state != 4)
{
document.getElementById("time").innerHTML = 'please wait while we process your request...';
} else
{
document.getElementById("time").innerHTML = xmlHttp.responseText;
}
}
</script>
<a href="javascript:void(0);" onclick="get_time('regular');">click here to get the time</a><br />
<a href="javascript:void(0);" onclick="get_time('formatted');">click here to get the formatted time</a><br /><br /><br /><br /><br />
<div id="time" style="width:300px; height: 300px; background-color: #aeaeae; padding: 3px; text-align: center;"></div>
</body>
</html>