The Callback Function

Contact Us or call 1-877-932-8228
The Callback Function

The Callback Function

In the demos thus far, we have used anonymous callback functions to hanndle the Ajax response, like so:

xmlhttp.onreadystatechange=function() {
 //handle response
}

As these anonymous functions are nested within the original function, they have access to the variable set in the original function. That's why we can reuse the xmlhttp and contentDiv variables within the callback function:

function start() {
	var xmlhttp = new XMLHttpRequest();
	var contentDiv = document.getElementById("Content");

	xmlhttp.open("POST", "Demo", true);
	xmlhttp.onreadystatechange=function() {
		if (xmlhttp.readyState==4 && xmlhttp.status==200) {
			contentDiv.innerHTML=xmlhttp.responseText;
		}
	}
	xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=UTF-8");
	xmlhttp.send("FirstName=Nat&LastName=Dunn");
}

But callback functions don't have to be anonymous or nested. Another way to write this is shown below:

               var xmlhttp = new XMLHttpRequest();
var contentDiv = document.getElementById("Content");

function start() {
	xmlhttp.open("POST", "Demo", true);
	xmlhttp.onreadystatechange=myCallBack;
	xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=UTF-8");
	xmlhttp.send("FirstName=Nat&LastName=Dunn");
}

function myCallBack() {
	if (xmlhttp.readyState==4 && xmlhttp.status==200) {
		contentDiv.innerHTML=xmlhttp.responseText;
	}
}

The problem with this method is that it uses global variables. This can be problematic as the variables can easily be unintentionally and unexpectedly overwritten. One way around this is to use an anonymous callback function to make the call to the now-pseudo-callback function and pass the necessary variables into it, like this:

function start() {
	var xmlhttp = new XMLHttpRequest();
	var contentDiv = document.getElementById("Content");
	xmlhttp.open("POST", "Demo", true);
	xmlhttp.onreadystatechange=function() {
		myCallBack(xmlhttp, contentDiv);
	};
	xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=UTF-8");
	xmlhttp.send("FirstName=Nat&LastName=Dunn");
}

function myCallBack(xmlhttp, contentDiv) {
	if (xmlhttp.readyState==4 && xmlhttp.status==200) {
		contentDiv.innerHTML=xmlhttp.responseText;
	}
}

Another way to handle it is to nest a named callback function within the original function. As JavaScript functions are objects, they can have their own methods, so you can do the following:

function start() {
	var xmlhttp = new XMLHttpRequest();
	var contentDiv = document.getElementById("Content");
	xmlhttp.open("POST", "Demo", true);
	xmlhttp.onreadystatechange=myCallBack;
	xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=UTF-8");
	xmlhttp.send("FirstName=Nat&LastName=Dunn");
	
	function myCallBack() {
		if (xmlhttp.readyState==4 && xmlhttp.status==200) {
			contentDiv.innerHTML=xmlhttp.responseText;
		}
	}
}

Because the callback function is nested within the start() function, it has access to the xmlhttp and contentDiv variables. The only limitation of this method is that the myCallBack() function is not callable from outside the start() function. Depending on what you're trying to do, that may or may not be an issue.

Next