No basic learning AJAX: creating automatic verification forms, basic ajax Verification Forms

No basic learning AJAX: creating automatic verification forms, basic ajax Verification Forms

Traditional web pages check whether user names are occupied during registration. traditional verification is obviously slow and clumsy.

When ajax appears, this experience is greatly improved, because when users fill out forms, the signed form items have been sent to the server, then, the data is queried Based on the Content filled in by the user. A prompt is automatically displayed on the query no. Page refresh. Applications like this greatly improve user experience. This section describes how to create an automatic verification form. Analyze the role of ajax in principle.

1. Build a framework

First, the html framework

Copy codeThe Code is as follows:
<Form name = "register">
<P> <label for = "User"> User name <input type = "text" name = "User" id = "User"> </label> <span id =" userResult "> </span> </p>
<P> <label for = "passwd1"> enter the password <input type = "password" name = "passwd1" id = "passwd1"> </label> </p>
<P> <label for = "passwd2"> Repeated input <input type = "password" name = "passwd2" id = "passwd2"> </label> </p>
<P> <input type = "submit" value = "register"> </p>
<P> <input type = "reset" value = "reset"> </p>
</Form>

2. Create an asynchronous request

Perform background verification when the user enters the "user name" and starts entering other forms. The Code is as follows:

Input username <input type = "text" name = "User" id = "User" onblur = "startCheck (this)">
In the startCheck () function, directly send the this keyword and pass the text box object as a parameter. The function itself first checks whether the user input is null. If it is null, it returns directly, focus on the user name text box and give the corresponding prompt.

Copy codeThe Code is as follows:
Function startCheck (oInput ){
// Determine whether input exists. If no input exists, return directly.
If (! OInput. value ){
OInput. focus (); // focus on the user name text box
Document. getElementById ("User"). innerHTML = "the User name cannot be blank ";
Return;
}
// Create an asynchronous request
//....
}

After you enter the user name, use toLowerCase () to convert it to lowercase letters and create an asynchronous request.

The showResult () function is used to display the responseText text returned by the server for processing.

Copy codeThe Code is as follows:
<Script type = "text/javascript">
Var xmlHttp;
Function createXMLHttprequest (){
If (window. ActiveXObject)
XmlHttp = new ActiveXObject ("Microsoft. XMLHTTP ");
Else if (window. XMLHttpRequest)
XmlHttp = new XMLHttpRequest ();
}
Function startCheck (oInput ){
// Determine whether input exists. If no input exists, return directly.
If (! OInput. value ){
OInput. focus (); // focus on the user name text box
Document. getElementById ("User"). innerHTML = "the User name cannot be blank ";
Return;
}
// Create an asynchronous request
CreateXMLHttpRequest ();
Var sUrl = "1-9.aspx? User = "+ oInput. value. toLowerCase () +" & timestamp = "+ new Date (). getTime ();
XmlHttp. open ("GET", sUrl, true );
XmlHttp. onreadystatechange = function (){
If (xmlHttp. readyState = 4 & xmlHttp. status = 200)
ShowResult (xmlHttp. responseText); // display service results
}
XmlHttp. send (null );
}
</Script>

3. server processing

Copy codeThe Code is as follows:
<% @ Page Language = "C #" ContentType = "text/html" ResponseEncoding = "gb2312" %>
<% @ Import Namespace = "System. Data" %>
<%
Response. CacheControl = "no-cache ";
Response. AddHeader ("Pragma", "no-cache ");

If (Request ["user"] = "isaac ")
Response. Write ("Sorry," + Request ["user"] + "already exists .");
Else
Response. Write (Request ["user"] + "is OK .");
%>

4. Display asynchronous query results

When the user inputs other items in the form, the asynchronous return results have been quietly completed in the background.

Copy codeThe Code is as follows:
Function showResult (sText ){
Var oSpan = document. getElementById ("UserResult ");
OSpan. innerHTML = sText;
If (sText. indexOf ("already exists")> = 0)
// If the user name is in use
OSpan. style. color = "red ";
Else
OSpan. style. color = "black ";
}

The above code displays the results returned by the server.

Complete code for this case

Copy codeThe Code is as follows:
<! DOCTYPE html>
<Html>
<Head>
<Meta charset = "UTF-8">
<Title> </title>
</Head>
<Body>
<Script type = "text/javascript">
Var xmlHttp;
Function createXMLHttpRequest (){
If (window. ActiveXObject)
XmlHttp = new ActiveXObject ("Microsoft. XMLHTTP ");
Else if (window. XMLHttpRequest)
XmlHttp = new XMLHttpRequest ();
}
Function showResult (sText ){
Var oSpan = document. getElementById ("UserResult ");
OSpan. innerHTML = sText;
If (sText. indexOf ("already exists")> = 0)
// If the user name is in use
OSpan. style. color = "red ";
Else
OSpan. style. color = "black ";
}
Function startCheck (oInput ){
// First, judge whether there is input. If no input is input, return directly and prompt
If (! OInput. value ){
OInput. focus (); // The input box that focuses on the user name
Document. getElementById ("UserResult"). innerHTML = "the user name cannot be blank ";
Return;
}
// Create an asynchronous request
CreateXMLHttpRequest ();
Var sUrl = "1-9.aspx? User = "+ oInput. value. toLowerCase () +" & timestamp = "+ new Date (). getTime ();
XmlHttp. open ("GET", sUrl, true );
XmlHttp. onreadystatechange = function (){
If (xmlHttp. readyState = 4 & xmlHttp. status = 200)
ShowResult (xmlHttp. responseText); // Display Server results
}
XmlHttp. send (null );
}
</Script>
<Form name = "register">
<P>
<Label for = "User"> enter the User name
<Input type = "text" name = "User" id = "User" onblur = "startCheck (this)">
</Label> <span id = "UserResult"> </span>
</P>
<P>
<Label for = "passwd1"> enter the password.
<Input type = "password" name = "passwd1" id = "passwd1">
</Label>
</P>
<P>
<Label for = "passwd2"> Repeated input
<Input type = "password" name = "passwd2" id = "passwd2">
</Label>
</P>
<P>
<Input type = "submit" value = "register">
</P>
<P>
<Input type = "reset" value = "reset">
</P>
</Form>
</Body>
</Html>