Ajax real-time verification of whether username/email etc. already exists code packaging_PHP tutorial

Today I will share an example of "using Ajax technology to detect whether a username exists".
Principle flow chart of using Ajax technology to detect whether a user name exists:

Screenshot of final result:

Copy code The code is as follows:

.org/1999/xhtml">

Username:

Code explanation :
①The core code to implement this function is in ajax.js. You need to introduce
② to name the form, because later we need to use JS to get the value in the input box
③Add a " to the input box onblur" event, that is, the event is triggered when the "focus" is lost (i.e., the "trigger control" of the flow chart)
④ Used to put the data sent back from the server Data (i.e. "Username already exists", etc.)

Copy code The code is as follows:

mysql_connect("localhost",'root','');
mysql_select_db('test');
$sql="select * from ajax where name='$_GET[id]'";
$query=mysql_query($sql);
if(is_array(mysql_fetch_array($query))){
echo "Username already exists";
}else{
echo "Username can use ";
}
?>

Code explanation:
Through the open method of ajax, the user input "user name" is passed in through the id (i.e. $_GET[id]). At this time, the specified database table will be queried to check whether the "user name" exists
ajax.js

Copy code The code is as follows:

// JavaScript Document
var XHR; //Definition A global object
function createXHR(){ //First we have to create an XMLHttpRequest object
if(window.ActiveXObject){//Lower version of IE class
XHR=new ActiveXObject('Microsoft.XMLHTTP ');//Before IE monopolized the entire browser market and did not follow W3C standards, so this code came into being. . . But things started to change after IE6
}else if(window.XMLHttpRequest){//Non-IE series browsers, but including IE7 IE8
XHR=new XMLHttpRequest();
}
}
function checkname(){
var username=document.myform.user.value;
createXHR();
XHR.open("GET","checkname.php?id="+username ,true);//true: indicates asynchronous transmission without waiting for the send() method to return the result. This is the core idea of ​​ajax
XHR.onreadystatechange=byhongfei;//When the state changes, call the byhongfei method, We define the content of the method separately
XHR.send(null);
}
function byhongfei(){
if(XHR.readyState == 4){//About the methods in the Ajax engine object and attributes, you can refer to my other blog post: http://www.cnblogs.com/hongfei/archive/2011/11/29/2265377.html
if(XHR.status == 200){
var textHTML=XHR.responseText;
document.getElementById('checkbox').innerHTML=textHTML;
}
}
}


Code explanation:
①First we need to declare an ajax engine object: The market share of IE and other browsers is almost half each, so we have to consider both aspects, IE-->ActiveXObject; other-->XMLHttpRequest. I encapsulated her in a function: createXHR
③The checkname() function we specified in index.html will be triggered when the "focus" is lost. So how do we capture the "username" entered by the user? Here, you can easily capture document.myform.user.value using js (now you know why you named the form and input. This step corresponds to "get the filled content" of the flow chart). Interested bloggers can try it. Type the code (alert(username)) in the line before createXHR() and try popping up the captured username.
④The Ajax engine has several methods and attributes (you can refer to my other blog post: Look at the picture to understand: the difference between ordinary interaction and Ajax interaction). Before using it, we must first call the function craateXHR to create an ajax object
⑤With the ajax object, three methods are essential: open(), onreadystatechange, send().
To send a request to the server, use the open () and send() methods.
The first parameter of the open() method indicates that the transmission is to be done in GET or POST mode. . . . . .
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() method async Indicates whether to use asynchronous requests, true means it is adopted. In this case, there is no need to wait for the server response through ajax and js, but: ① execute other scripts while waiting for the server response ② process the response when the response is ready. Generally, for some small requests, async=false is also acceptable, but do not write the onreadystatechange function at this time.
onreadystatechange event: This event is triggered when the ajax attribute readyState changes. In this event, when the server response is ready to be processed (that is, when readyState=4 and status=200), we specify what tasks we want the server to do. Here we specify that the results retrieved from the database will be output to id In the span tag of "checkbox".
⑥After querying the database through checkname.php, you will get the query result (that is, the server's response, corresponding to "query database" in the flow chart). At this time, the data is still in the ajax engine. If you need to obtain the query from the server To respond, we need to use the responseText or responseXML attribute of the XMLHttpRequest object, and set the data returned from the server response through the DOM attribute innerHTML to the value of the span tag with id="checkbox"
Note: There is a reason to use ajax to monitor whether the mailbox exists , we can also use ajax to monitor the password strength entered by the user in real time. At this time, we need to change the onblur event to an onfocus event.
Original cnblogs Xiaofei

Source code package download /201112/yuanma/checkname_php.rar

http://www.bkjia.com/PHPjc/324720.htmlwww.bkjia.comtruehttp: //www.bkjia.com/PHPjc/324720.htmlTechArticleToday I share an example of "using Ajax technology to detect whether a user name exists". Principle flow chart of using Ajax technology to detect whether the user name exists: Screenshot of the final result: Copy the code...