Ajax No Refresh verify user name, password, and mailbox input information

First look at the main program code (reg.html):

The code is as follows	Copy Code
<div id= "Reg" > Please enter the username: <input id= "usrname" value= "Please enter the username" onfocus= "reginit (); RegKey ()" onblur= "Reginit ()" onkeyup= "RegKey ()"/ > </div>

<div id= "Regtip" style= "Display:none" > User name repeat or illegal </div>

<!--The following is a JS code section, the function is AJAX response authentication username legality-->

The code is as follows

Copy Code

<script language= "JavaScript" > function Getem (AID) { Return (document.getElementById)? document.getElementById (AID): Document.all[aid]; } function CHANGEDSP () { Getem (regtip). style.display= "";//You can also use the inner method to reassign the value } <!--Ajax Verify user name--> var v=getem (' Usrname '); var s_value=getem (' Usrname '). value;//Save Initial value function Reginit () { V.style.color= "#000000"; if (v.value==s_value)//Invalid user name V.value= '; else if (v.value== ') {//restore default hint information V.value=s_value; V.style.color= ""; } } function RegKey () { Str=v.value; if (!STR) { return 0; } var xhttp=getxmlhttp (); Xhttp.onreadystatechange=function () { if (xhttp.readystate = 4 && (xhttp.status==200 | | window.location.href.indexOf ("http") ==-1)) { document.getElementById ("Regtip"). Innerhtml=xhttp.responsetext; CHANGEDSP (); } } var url = "chkusr.php?usr=" + encodeURI (str);//Ajax URL address required Xhttp.open ("Get", url,true); Xhttp.setrequestheader ("If-modified-since", "0");/Not Cached Xhttp.send (NULL); } </script>

Program Description:

1, onblur event is the input box lost focus event, OnKeyUp is the keyboard press and release when triggered.

2, Reg is the registration Information section, here you can add your own code, such as user name, password, mailbox, etc. can be used to verify the timely use of Ajax.

3, Regtip is the tip of the information section, generally empty, if the Ajax checksum failure, then the error prompted here.

4, chkusr.php is the user name of the calibration program, the back of the USR is passed the URL parameters, if the use of other languages such as ASP, the same way to modify, and ultimately only need to return the query results prompted information can be, such as "Enter the user name repeat, please replace a cooler", "e-Mail has been registered, Please revise and submit the registration again "and so on."

5, sample chkusr.php program as follows, the actual use must be connected with the database, especially careful user input information filtering and security:

The code is as follows	Copy Code
<?php Note that this seems to be using PHP three-letter return value is including PHP qualifier (on the IE6), with PHP is no problem, and later study the specific difference $usr =$_trim[' usr ']; if ($usr = = ' admin ') { echo "Sorry, this name is fobiddened to use." } Else { echo "Hi, this name is free for register." } ?>

The above is written JS Ajax, in fact, but now JS Ajax used very little, with a lot of jquery+ajax/"target=" _blank >jquery Ajax, I also introduced the following.

Instance:
1. Request Page Ajax.aspx

HTML code

The code is as follows	Copy Code
Code <div> <input id= "txtname" type= "text"/><input type= "button" value= "to see if the username exists" id= "btn" onclick= "Judgeusername ();" /> <div id= "Showresult" style= "Float:left" >div> Div>

JS Code

The code is as follows

Copy Code

Code <script type= "Text/javascript" src= "Css/jquery-1.3.2.js" ></script> <script type= "Text/javascript" > function Judgeusername () { $.ajax ({ Type: "Get", URL: "Ajaxuserinfomodify.aspx", DataType: "HTML", Data: "Username=" +$ ("#txtName"). Val (), Beforesend:function (XMLHttpRequest) { $ ("#showResult"). Text ("Query Now"); Pause (this,100000); }, Success:function (msg) { $ ("#showResult"). HTML (msg); $ ("#showResult"). CSS ("Color", "red"); }, Complete:function (Xmlhttprequest,textstatus) { Hide query Picture }, Error:function () { Error handling } }); } </script>

2, Page ajaxuserinfomodify.aspx

Background code

code is as follows	copy code
Code protected void Page_Load (object sender, EventArgs e)     {          String userName = request.querystring["UserName"]. ToString ();         if (userName = "James Hao")          {             Response.Write ("User name already exists!") ");        }         Else         {              Response.Write ("You can use this username!") ");        } }