I'm following the W3Schools tutorial on AJAX, and it provides an example of using a JavaScript callback function here (code pasted below):
<html>
<head>
<script type="text/javascript">
var xmlhttp;
function loadXMLDoc(url,cfunc)
{
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=cfunc;
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
function myFunction()
{
loadXMLDoc("ajax_info.txt",function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
});
}
</script>
</head>
<body>
<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="myFunction()">Change Content</button>
</body>
</html>
What confuses me is how this sets onreadystatechange
to run cfunc
when triggered, but cfunc
isn't defined. All of my (admittedly basic) programming experience says this should cause an error because you can't refer to a variable/function/etc. before defining it (or passing it).
This answer to another StackOverflow question says cfunc
is an "anonymous function" defined within another function, but that only confused me more... Am I misunderstanding something fundamental here?