Ajax wont let me return true or false

Question

I am trying to return true for the entire validator.registercallback function if the following ajax script doesn't return 1. However, it isn't working, and I think its probably something basic that I'm missing, but I can't figure it out.

validator.registerCallback('unique_username', function(value) {

        //use ajax to run the check  
        var xmlhttp;
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=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
      if(xmlhttp.responseText != 1) {
          alert('Username Exists');
          return false;
      } else {
          alert('Username Available!');
          return true;
      }
    }
  }
xmlhttp.open("GET","uniqueuser.php?username="+value,true);
xmlhttp.send();

})

What's weird is that the following works, it just doesn't work based on the value of the ajax script:

validator.registerCallback('unique_username', function(value) {

        //use ajax to run the check  
        var xmlhttp;
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=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
      if(xmlhttp.responseText != 1) {
          alert('Username Exists');
          return false;
      } else {
          alert('Username Available!');
          return true;
      }
    }
  }
xmlhttp.open("GET","uniqueuser.php?username="+value,true);
xmlhttp.send();

return true;

})

So basically, I can tell it to return true in the main function, but when I try to make it return true ONLY IF the value in the ajax script doesn't return 1, it doesn't work. By the way, the alerts DO WORK. So it IS getting the right value, but it wont return true, or false for that matter.

Any help is appreciated!

Update

validator.registerCallback('unique_username', function(value) {

        //use ajax to run the check  
function ajax_result() {
  var xmlhttp;
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=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    }
  }
xmlhttp.open("GET","uniqueuser.php?username="+value,true);
xmlhttp.send();
}

if(ajax_result() != 1) { 

alert('Username Exists');
return false;

} else {

alert('Username Available!');
return true;

}

})

Answer 1

Trying again:

is_user_existing('foo', function(result)
{
  if (result)
    alert("user is existing");
  else
    alert("user is not existing");
});

function is_user_existing(username, continuation)
{
    $.get('uniqueuser.php', {username: username}, function(webpage)
    {
      continuation (webpage == 1);
    });
}

Answer 2

What you are missing is that the ajax call is asynchronous. When your function ends, the ajax call has not been completed yet, and the value (true or false) will only be returned later.

To address this, you need to either make the ajax call synchronous or modify your chaining logic, for example reverse it and run validator.registerCallback() inside the ajax call. You could also consider some more sophisticated techniques like promises.

[Update] This is how you make the request synchronous:

xmlhttp.open("GET","uniqueuser.php?username="+value,false);

You'll also need to change the rest of the code, see for example this MDN article.

Answer 3

You have added jQuery to the list of keywords to this question so I answer using jQuery:

var username = "foo";
$.get('uniqueuser.php', {username: username}, function(webpage)
{
  if (webpage == 1)
    alert("user exists");
  else
    alert("Username available!");
});