Ajax + JavaScript check for the availability of user names without refreshing JavaScript code
<Script language = "JavaScript" type = "text/JavaScript">
VaR XMLHTTP = NULL;
Function createxmlhttp ()
{
If (window. activexobject)
{
XMLHTTP = new activexobject ("Microsoft. XMLHTTP ");
}
Else if (window. XMLHttpRequest)
{
XMLHTTP = new XMLHttpRequest ();
}
}
Function checka ()
{
Createxmlhttp ();
VaR txtname = Document. getelementbyid ("txt_name"); // obtain the input username Control
VaR labname = Document. getelementbyid ("lab_name"); // control that displays the prompt information
// Determine the user name format and length (only a combination of numbers and letters)
// Error 1
If (! Txtname. value. Match (/^ [a-zA-Z0-9] + $/) & txtname. value. Length <5 | txtname. value. length> 16)
{
Labname. style. color = "# cc0000 ";
Labname. value = "enter a user name of 6 to 12 characters, which can only be composed of digits and letters. ";
Return false;
} Else
// Correct
If (txtname. value. length> 5 & txtname. value. Length <17 & txtname. value. Match (/^ [a-zA-Z0-9] + $ /))
{
Labname. style. color = "# 0000ff ";
VaR url = "checkname. aspx? Username = "+ txtname. value;
XMLHTTP. Open ("Post", URL, true );
XMLHTTP. onreadystatechange = sub;
XMLHTTP. Send (null );
}
// Error 2
Else
{
Labname. style. color = "# cc0000 ";
Labname. value = "enter a user name of 6 to 12 characters, which can only be composed of digits and letters. ";
Return false;
}
}
Function Sub ()
{
If (XMLHTTP. readystate = 4)
{
If (XMLHTTP. Status = 200)
{
Document. getelementbyid ("lab_name"). value = XMLHTTP. responsetext;
}
}
}
</SCRIPT>
HTML page controls and method calls
// Onfocus gets the cursor event. onblur: event when the cursor leaves
<Asp: textbox id = "txt_name" runat = "server" cssclass = "t_txt" onfocus = "checkname ();" onblur = "checka ();"> </ASP: textbox>
// Textbox I used, compatible with IE and Firefox styles
<Asp: textbox id = "lab_name" runat = "server" width = "300px" style = "border-top-style: none; border-width: 0px; border-left-style: none; border-bottom-style: none; border-right-style: none; "readonly =" true "> </ASP: textbox>
Create a page for specific data operations
SQL connection and statement ......
New Page Method
Protected void page_load (Object sender, eventargs E)
{
If (! Ispostback)
{
If (checknames (request. querystring ["username"]) = true)
{
Response. Write ("sorry, this user name is already in use! ");
}
Else
{
Response. Write ("congratulations, this user name can be used! ");
}
}
}
Private bool checknames (string username)
{
// Create a dataset
Dataset DS = new dataset ();
// Instantiate the model layer
Zyb_userlogin uimodel = new zyb_userlogin ();
// Encapsulate data
Uimodel. unl_userloginname = username;
// Instantiate the Business Layer
Userloginbll uibll = new userloginbll ();
Try
{
// Call the username check method at the Business Layer
DS = uibll. selectnamecheck (uimodel );
// Determine whether data exists
If (Ds. Tables [0]. Rows. Count <1)
{
// None indicates available
Return false;
}
Else
{
// Unavailable
Return true;
}
}
Catch (exception ex)
{
// Throw an exception
Throw ex;
}
}