AJAX Request returns 'undefined' - php

Question

For some reason I always receive undefined if I return the value but if I'm trying to display it in alert I receive the php values.
function getXMLHttp() {
var xmlHttp
try {
//Firefox, Opera 8.0+, Safari
xmlHttp = new XMLHttpRequest();
} catch(e) {
//Internet Explorer
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch(e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch(e) {
//Browser does not support AJAX
return false;
}
}
}
return xmlHttp;
}
function isUsernameExists() {
var xmlHttp = getXMLHttp();
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4) {
handleResponse(xmlHttp.responseText);
}
}
var str = document.getElementById('username').value.toString();
xmlHttp.open("GET", "ajax.php?username="+str, true);
xmlHttp.send(null);
}
Edit:
function handleResponse(response) {
return response.toString();
}
Thanks,
Guy Dor

Answer 1

It looks like you are trying to read the return value from this function:
function isUsernameExists() {
It doesn't have a return statement, so it will always be undefined.
I'm guessing you expect this return statement to pass the value you want:
return xmlHttp.responseText.toString();
But that is part of this function:
xmlHttp.onreadystatechange = function() {
Which is called automatically when the readystatechange event fires, and not by any function call you make.
Asynchronous JavaScript and XML rarely uses XML but is asynchronous. Anything you want to do with the data fetched needs to be done by the callback function you assign to onreadystatechange. It can call other functions, but it cannot return anything (at least not that will be received anywhere useful).

Answer 2

We can't see enough of your code to fully understand the situation, but you are dealing with an asynchronous operation and the only way to communicate the result of that asynch operation is to call a function with the value you got from that operation. You cannot just return from the function.
This is a common misunderstanding (the sixth time I've answered this issue today). The function on have for the ready state change is not called by any of your code. It's called by the browser internally when the ajax call completes. That means that returning your value from that function will do nothing and certainly won't communicate that result to any of your code. If you want to communicate that result to some of your code, then you need to call some of your code from inside that function and pass it the desired result so that code can act on it. This breaks the normal flow of programming, but is required when dealing with asynchronous operations.

Answer 3

you have a return statement in the function your create here,
xmlHttp.onreadystatechange = function() {
but there is no return statement in the function,
function isUsernameExists() {
just because you created the function within another function does not mean the code in that function gets run.
the code within the function you created will not run until a response is received from the server, by which point the original function that created the second function will have already finished execution.
the code does not halt to wait for a response from the server, it instead continues to run and finishes execution. the function that you created to handle the response from the server then gets run at a later time when a response is received.