Check username availability using AJAX and jQuery ...

Javascript

$.fn.checkAvailability = function() {
    $("#check-username").click(function() {
    if ( $(#username).attr("value") != ) {
        $(.loading).show();
        var username = $(#username).val().toLowerCase();
        $.get("check-username.php", { username:username } , function(data) {
            //if username is already taken (FALSE)
             if (data == 0) {
                $(.loading).hide();
                $(.error).remove();
                $(.available).remove();
                $(#check-username).after(<span class="error"></span>);
                $(.error).text(Username is already taken.);
             } else {
                $(.loading).hide();
                $(.error).remove();
                $(.available).remove();
                $(#check-username).after(<span class="available"></span>);
                $( ispan.available).text(Username is available.);
            }
        });
    }
});

$(document).ready(function() {
    $("#registration").checkAvailability();
});

xHTML

<form action="#" method="post" id="registration">
    <label for="username">Username</label>
    <input type="text" name="username" id="username" maxlength="30" />
    <input type="button" value="Check Availability" id="check-username" />
    <span class="loading"><img src="images/loading.gif" alt="Loading" /></span>
</form>

CSS

.loading {
    display: none;
}

.available {
    color: #060;
}

.error {
    color: #f00;
}

Backend

In this case, we are using a php script called check-username.php. However, the backend doesn’t have to be in php, it can be in any language .aspx (.NET), .do (Java), .cfm (ColdFusion), etc. The backend script just needs to return either 1 or 0 (True or False). 1 when the username is available and 0 when the username is already taken.

 Original Source:
http://eisabainyo.net/weblog/2009/05/28/check-username-availability-using-ajax-and-jquery/