0 Basic Learning Ajax make automatic check form _ajax related

Traditional Web pages Check whether the user name is occupied while registering, and the traditional checksum is obviously slow and clumsy.

This experience has been greatly improved when Ajax appears, because when a user fills out a form, a signed form item has been sent to the server, and then a data query is made based on what the user fills out. The query number is automatically prompted without the need for a page refresh. Similar applications greatly improve the user experience, this section briefly describes the automated validation form method. Analyze the role of Ajax from the principle.

1. Build a framework

First for HTML frames

Copy Code code as follows:

<form name= "Register" >
<p><label for = "user" > Output username <input type= "text" name= "user" id= "user" ></label><span id= " Userresult "></span></p>
<p><label for = "PASSWD1" > Input password <input type= "password" name= "passwd1" id= "Passwd1" ></label> </p>
<p><label for = "PASSWD2" > Repeat input <input type= "password" name= "Passwd2" id= "Passwd2" ></label> </p>
<p><input type= "Submit" value= "registered" ></p>
<p><input type= "reset" value= "reset" ></p>
</form>

2. Establish an asynchronous request

When the user finishes the "username" and starts typing a different form, check the background, the code is as follows:

User name <input type= "text" name= "user" id= "user" onblur= "Startcheck" (This) >
In function Startcheck (), you send the This keyword directly, passing the text box object as a parameter, and the function itself first determines whether the user enters null or not, and if it is empty, returns directly and focuses on the user name text box, giving the appropriate hints.

Copy Code code as follows:

function Startcheck (oinput) {
To determine whether there is input, no input is returned directly.
if (!oinput.value) {
Oinput.focus ();//focus to User name text box
document.getElementById ("User"). innerhtml= "username cannot be empty";
Return
}
To create an asynchronous request
//....
}

When the user enters the username, converts the tolowercase () to lowercase letters and establishes an asynchronous request.

where the Showresult () function is used to display the ResponseText text returned by the server processing.

Copy Code code 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) {
To determine whether there is input, no input is returned directly.
if (!oinput.value) {
Oinput.focus (); Spotlight to User name text box
document.getElementById ("User"). InnerHTML = "Username cannot be empty";
Return
}
To 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); Show service Results
}
Xmlhttp.send (NULL);
}
</script>

3. Server processing

Copy Code code 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 the results of an asynchronous query

The asynchronous return result has been silently completed in the background when the user enters another item in the form.

Copy Code code as follows:

function Showresult (stext) {
var Ospan = document.getElementById ("Userresult");
ospan.innerhtml = Stext;
if (Stext.indexof ("already exists") >= 0)
If the user name is already occupied
OSpan.style.color = "Red";
Else
OSpan.style.color = "BLACK";
}

The above code is a display of the results returned to the server.

The complete code for the case

Copy Code code as follows:

<! DOCTYPE html>
<meta charset= "Utf-8" >
<title></title>
<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 already occupied
OSpan.style.color = "Red";
Else
OSpan.style.color = "BLACK";
}
function Startcheck (oinput) {
First to determine whether there is input, no input directly returned, and prompted
if (!oinput.value) {
Oinput.focus (); The input box that focuses on the user name
document.getElementById ("Userresult"). InnerHTML = "User name cannot be empty";
Return
}
To 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); Show server Results
}
Xmlhttp.send (NULL);
}
</script>
<form name= "Register" >
<p>
<label for= "User" > Username
<input type= "text" name= "user" id= "user" onblur= "Startcheck" (This) >
</label><span id= "Userresult" ></span>
</p>
<p>
<label for= "passwd1" > Enter password
<input type= "Password" name= "passwd1" id= "PASSWD1" >
</label>
</p>
<p>
<label for= "PASSWD2" > Repeat Input
<input type= "Password" name= "Passwd2" id= "PASSWD2" >
</label>
</p>
<p>
<input type= "Submit" value= "registered" >
</p>
<p>
<input type= "reset" value= "reset" >
</p>
</form>
</body>