Many Websites use this to check asynchronously whether the username entered already exists and if it then display message to the user to choose a different username.

To start with you need a textbox where the username will be entered and a label to display the message.

<asp:TextBox ID="txtUserName" runat="server"></asp:TextBox>

<asp:Label ID="lblMsg" Text = "UserExists" runat="server"

                style =" visibility:hidden "></asp:Label>


Now to make AJAX call to the server I will use XML HTTP.

To read more about XML HTTP you can refer here.

AJAX Calls Using JavaScript And XMLHTTP in ASP.Net

Sending the Request

The following function makes a asynchronous calls to the server.

<script type="text/javascript">

var xmlhttp;

function CheckUser(url)

{

    xmlhttp=null;

    if (window.XMLHttpRequest)

    {

        // code for all new browsers

        xmlhttp=new XMLHttpRequest();

    }

    else if (window.ActiveXObject)

    {

        // code for IE5 and IE6xmlhttp=

        new ActiveXObject("Microsoft.XMLHTTP");

    }

    if (xmlhttp!=null)

    {

        xmlhttp.onreadystatechange=state_Change;

        xmlhttp.open("GET",url,true);

        xmlhttp.send(null);

    }

    else

    {

        alert("Your browser does not support XMLHTTP.");

    }

 }</script>



Processing the Request

The request is received server side and you can check whether user exists and return the status as true or false.

C#

protected void Page_Load(object sender, EventArgs e)

{

    if (Request.QueryString["UserName"] != null)

    {

        String strUserName = Request.QueryString["UserName"];

        //Check userName Here

        String strReturnStatus = "false";

        if (CheckUsername(Request.QueryString["UserName"]) == true)

        {

            strReturnStatus = "true";

        }

        Response.Clear();

        Response.Write(strReturnStatus);

        Response.End();

    }

}



VB.Net


Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

    If Not Request.QueryString("UserName") Is Nothing Then

        Dim strUserName As String = Request.QueryString("UserName")

        'Check userName Here

        Dim strReturnStatus As String = "false"

        If CheckUsername(Request.QueryString("UserName")) = True Then

            strReturnStatus = "true"

        End If

        Response.Clear()

        Response.Write(strReturnStatus)

        Response.End()

    End If

End Sub


I am using a dummy function CheckUserName you’ll need to replace that with your function.



Receiving the Response

The following function receives the response from the server

true - Username Exists

OR

false -Username does not Exists



<script type="text/javascript">

function state_Change()

{

if (xmlhttp.readyState==4)

{// 4 = "loaded"

 

    if (xmlhttp.status==200)

    {// 200 = OK               

        // ...our code here...

        var lblMesg = document.getElementById("<%=lblMsg.ClientID%>");

        if(xmlhttp.responseText=="true")

        {

            lblMesg.style.visibility = "visible"; 

        }

        else

        {

            lblMesg.style.visibility = "hidden";

        }

    }

    else

    {

        alert("Problem retrieving XML data");

    }

}

}

</script>


The above code does a simple check that is if the Response is true then shows the label to the user else if it is false then hide the label.


You can call the JavaScript function to check username in different ways.

1.     Give a button and allow user to check it

2.     Call the function automatically when the textbox loses focus.


I will explain the second technique here

To the Page Load event add the onchange event Attribute.


C#

txtUserName.Attributes.Add("onchange",

"CheckUser('XMLHTTPCSharp.aspx?UserName=' + this.value)");



VB.Net

txtUserName.Attributes.Add("onchange",

"CheckUser('XMLHTTP.aspx?UserName=' + this.value)")



The Above code is tested in the following Browsers


1.     Internet Explorer 7

2.     Firefox 3

3.     Google Chrome



You can download the source code here.

CheckUserExists.zip (2.92 kb)