Is a simple instance, so code is directly sent
Static Page ajax.html
Copy codeThe Code is as follows:
<Html>
<Head>
<Title> Ajax </title>
<Script type = "text/javascript">
Function loadXMLDoc (){
If (document. getElementById ("account"). value = ""){
Document. getElementById ("accDiv"). innerHTML = "the user name cannot be blank ";
Return;
}
Var xmlHttp;
If (window. XMLHttpRequest) {// code for IE7 +
XmlHttp = new XMLHttpRequest ();
}
Else {// code for IE5/IE6
XmlHttp = new ActiveXObject ("Microsoft. XMLHTTP ");
}
XmlHttp. onreadystatechange = function (){
If (xmlHttp. readyState = 4 & xmlHttp. status = 200 ){
// Document. getElementById ("myDiv"). innerHTML = xmlHttp. responseText;
If (xmlHttp. responseText = "true "){
Document. getElementById ("accDiv"). innerHTML = "User Name unavailable ";
}
Else {
Document. getElementById ("accDiv"). innerHTML = "User Name available ";
}
}
}
Var a = document. getElementById ("account"). value;
// Get
XmlHttp. open ("GET", "validate. aspx? Account = "+ a +" & random = "+ Math. random, true );
XmlHttp. send ();
}
Function delData (){
Document. getElementById ("account"). value = "";
Document. getElementById ("accDiv"). innerHTML = "";
}
</Script>
</Head>
<Body>
<H3> ajax <Table>
<Tr>
<Td> account: </td> <input id = "account" type = "text" onblur = "loadXMLDoc ();" onfocus = "delData (); "/> </td> <div id =" accDiv "> </div> </td>
</Tr>
<Tr>
<Td> password: </td> <input id = "passwd" type = "password"/> </td>
</Tr>
<Tr>
<Td> Confirm password: </td> <input id = "vPasswd" type = "password"/> </td>
</Tr>
<Tr>
<Td> name: </td> <input id = "name" type = "text"/> </td>
</Tr>
</Table>
</Body>
</Html>
Call a function when the account input box loses focus
The access server uses the Get method, so the random code is used in the parameter to avoid caching.
Verification page validate. aspx background code:
Copy codeThe Code is as follows:
Using System;
Using System. Collections. Generic;
Using System. Linq;
Using System. Web;
Using System. Web. UI;
Using System. Web. UI. WebControls;
Using System. Configuration;
Using System. Data. SQL;
Using System. Data. SqlClient;
Public partial class Ajax_validate_validate: System. Web. UI. Page
{
Public SqlConnection conn;
Protected void Page_Load (object sender, EventArgs e)
{
Response. Clear ();
If (Exists (Request. QueryString ["account"])
Response. Write ("true ");
Else
Response. Write ("false ");
Response. End ();
}
/// <Summary>
/// Obtain the database connection
/// </Summary>
/// <Returns> </returns>
Protected SqlConnection GetConnection ()
{
String str = ConfigurationManager. ConnectionStrings ["ConnectionString"]. ConnectionString;
Conn = new SqlConnection (str );
Return conn;
}
Protected bool Exists (string account)
{
Using (GetConnection ())
{
Try
{
Conn. Open ();
String sqlStr = "select count (*) from userinfo where account = '" + account + "'";
SqlCommand cmd = new SqlCommand (sqlStr, conn );
Int row = Convert. ToInt32 (cmd. ExecuteScalar ());
If (row> 0)
Return true;
Else
Return false;
}
Catch (Exception e)
{
Throw e;
}
Finally
{
Conn. Close ();
}
}
}
}
Verify that the user name already exists in the database in the background, and return true or false
Running result:
The database is very simple. Only one table userinfo is created, which has three fields: account, passwd, and name.
Note: When writing data to the request page in the background, after writing the data to be sent, you need to call the Response. end () method to terminate the write. Otherwise, a complete page may be sent.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
