Real-time Ajax verification of "User Name/Email Address"

CodeFree:Ajax real-time verification of "User Name/Email Address (Contains Database SQL files)

A website uses Ajax technology, which not only improves the user experience of the website, but also greatly saves valuable bandwidth and reduces the server load (instead of interacting with the entire webpage content, but is partial ).

Today I will share aUse Ajax technology to detect the existence of user names.

Use Ajax technology to detect the existence of user namesPrinciple flowchart:

Final result:

 

 

 

Index.html

1   <!  Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"  > 
 2   <  Html  Xmlns  = "Http://www.w3.org/1999/xhtml"  > 
 3   <  Head  > 
4   <  Meta  HTTP-equiv  = "Content-Type"  Content  = "Text/html; charsets = UTF-8"   /> 
 5   <  Title  > Ajax detection Username </  Title  > 
 6  <  Script  Type  = "Text/JavaScript"  SRC  = "Ajax. js"  > </  Script  > 
 7   </  Head  > 
 8   <  Body > 
 9   <  Form  Name  = "Myform"  > 
 10 User name: <  Input  Type  = "Text"  Name  = "User"  Onblur  = "Checkname ();" > 
 11   <  Span  ID  = "Checkbox"  > </  Span  > 
 12   </  Form  > 
 13   </  Body > 
 14   </  Html  > 

Code explanation:

① The core code for implementing this function is in Ajax. js and needs to be introduced separately

② Name form, because we need to use js to obtain the value in the input box.

③ Add an onblur event to the input box, that is, the event is triggered when the "Focus" is lost (that is,"Trigger control")

④ <Span id = "checkbox"> </span> is used to store the data sent from the server (that is,The user name already exists.)

Checkname. php

 1 <? PHP
 2       Mysql_connect ("Localhost", 'root ','');
 3       Mysql_select_db ('Test ');
 4       $ SQL = "Select * from Ajax where name =' $ _ Get [ID] '";
 5       $ Query = Mysql_query ( $ SQL );
 6       If ( Is_array ( Mysql_fetch_array ( $ Query ))){
 7           Echo "<Font color = Red> the user name already exists </font> ";
 8 } Else {
 9           Echo "<Font color = green> the user name can be used </font> ";
 10 }
 11 ?>

Code explanation:

Use the Ajax open method to pass in the user input "User Name" by ID (that is$ _ Get [ID]In this case, the specified database table is queried to check whether the "user name" exists"

Ajax. js

 1   //  JavaScript document  
  2   VaR Xhr; //  Define a Global Object  
  3   Function Createxhr (){ //  First, we need to create an XMLHTTPRequest object.  
 4       If (Window. activexobject ){ //  Earlier version of IE  
  5 Xhr = New Activexobject ('Microsoft. xmlhttp '); //  In the past, ie monopolized the entire browser market and did not follow W3C standards. Therefore, this code was used... However, IE6 started to change.  
  6 } Else   If (Window. XMLHttpRequest ){ // Non-ie browsers, but including IE7 IE8  
  7 Xhr = New XMLHttpRequest ();
 8 }
 9 }
 10   Function Checkname (){
 11       VaR Username = Document. myform. User. value;
 12 Createxhr ();
 13 Xhr. Open ("get", "checkname. php? Id = "+ username, True ); //  True: Indicates asynchronous transmission, but does not wait for the send () method to return results. This is the core idea of Ajax.  
  14 Xhr. onreadystatechange = byhongfei; //  When the status changes, call the byhongfei method. The content of the method is defined separately.  
  15 Xhr. Send ( Null );
 16 }
 17  Function Byhongfei (){
 18       If (Xhr. readystate = 4 ){ //  For methods and attributes in Ajax engine objects, refer to my other blog: http://www.cnblogs.com/hongfei/archive/2011/11/29/2265377.html  
  19           If (Xhr. Status = 200 ){
 20               VaR Texthtml = xhr. responsetext;
 21 Document. getelementbyid ('checkbox'). innerhtml = texthtml;
22 }
 23 }
 24 }

Code explanation:

① First, we need to declare an Ajax engine object: xhr (just name one)

② Because Microsoft's earlier version of IE is different from other browsers in creating Ajax objects, the market share of IE and other browsers is almost half, so we have to consider both aspects, IE --> activexobject; others --> XMLHttpRequest. I encapsulated her in a function: createxhr

Else the checkname () function is triggered when the "Focus" is lost as we specify in index.html. So how can we capture the user name entered by the user? Here, JavaScript can be easily captured.Document. myform. User. Value(Now I know why to name form and input. This step corresponds to the"Obtain the entered content"). If you are interested, you can try the line of code (Alert (username) In the first line of createxhr () and try to pop up the captured user name.

④ The Ajax engine has several methods and attributes (refer to my other blog post: see the figure to understand: differences between normal interaction and Ajax interaction ), before using this function, you must call the craatexhr function to create an Ajax object.

⑤ With Ajax objects, three methods are essential: open (), onreadystatechange, and send ().

• To send requests to the server, use the open () and send () Methods
• The first parameter of the open () method, indicating thatGetOrPost......
• The second parameter of the open () method indicates the URL address to be requested (here we are requesting the checkname. php file), which can be an absolute or relative address.
• The third parameter of the open () methodAsyncIndicates whether asynchronous requests are used. True indicates that asynchronous requests are used. In this case, Ajax and JS do not need to wait for the server to respond,: ① execute other scripts while waiting for the response from the server. ② process the response when the response is ready. For small requests,Async = falseYes, but do not writeOnreadystatechangeFunction
• Onreadystatechange event: this event is triggered when the Ajax attribute readystate changes. In this event, when the server is ready for processing (that is, when readystate = 4 and status = 200), we specify what tasks should be performed on the server, here we stipulate that the results retrieved from the database are output to the span tag with the ID as "checkbox.

6. After the database is queried through checkname. php, the query result (that is, the server response, corresponding to"Query database"At this time, the data is still in the Ajax engine. To obtain the response from the server, we need to use the respontext or responsexml attribute of the XMLHTTPRequest object, the Dom attribute innerhtml is used to set the returned data from the server to the span tag value of ID = "checkbox ".

Note:ExploitationCheck whether a mailbox exists through AjaxWe can also useReal-time Ajax monitoring of user-input password strengthIn this case, you can useOnblurChange eventOnfocusEvent.

• OriginalArticle:Web development _ Xiaofei
• Reprinted please indicate Ajax detection "username/password and so on" whether there is: http://www.cnblogs.com/hongfei/archive/2011/11/29/ajax_chekname.html