Live username lookup with AJAX/Jquery

Question

I want to have a javascript function such as this:

function isUsernameAvailable(username)
{
   //Code to do an AJAX request and return true/false if
  // the username given is available or not
}

How can this be accomplished using Jquery or Xajax?

Answer 1

The big win when using AJAX is that it is asynchronous. You're asking for a synchronous function call. This can be done, but it might lock up the browser while it is waiting for the server.

Using jquery:

function isUsernameAvailable(username) {
    var available;
    $.ajax({
        url: "checkusername.php",
        data: {name: username},
        async: false, // this makes the ajax-call blocking
        dataType: 'json',
        success: function (response) {
            available = response.available;
        }
     });
     return available;
}

Your php-code should then check the database, and return

{available: true}

if the name is ok.

That said, you should probably do this asynchronously. Like so:

function checkUsernameAvailability(username) {
    $.getJSON("checkusername.php", {name: username}, function (response) {
        if (!response.available) {
            alert("Sorry, but that username isn't available.");
        }
    });
}