Today, share an example of "using AJAX technology to detect the existence of a username."
Use AJAX technology to detect the existence of the user name is the principle flow chart:
Screenshot of final result:
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title>ajax Detection User name </title>
<script type= "Text/javascript" src= "Ajax.js" ></script>
<body>
<form name= "MyForm" >
User name: <input type= "text" name= "user" onblur= "checkname ();" >
<span id= "checkbox" ></span>
</form>
</body>
Code Explanation:
① implementation of the core code of this function in Ajax.js, the need to introduce additional
② name the form, because we need to use JS to get value in the input box.
③ adds a "onblur" event to the input box that triggers the event when "Focus" is lost (that is, the "trigger control" of the flowchart)
④<span id= "checkbox" ></span> used to place data sent back from the server (that is, "username already exists", etc.)
Copy Code code as follows:
<?php
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 "<font color=red> user name already exists </font>";
}else{
echo "<font color=green> user name can use </font>";
}
?>
Code Explanation:
By using the Ajax open method, the user enters "user name" via ID to pass in (i.e. $_get[id]), and the specified database table is queried for the existence of the user name
Ajax.js
Copy Code code as follows:
JavaScript Document
var XHR; Define a Global object
function createxhr () {//First we have to create a XMLHttpRequest object
if (window. ActiveXObject) {//ie of the lower version of the system class
Xhr=new ActiveXObject (' microsoft.xmlhttp ') before//IE monopolized the entire browser market, did not follow the standards of the World Wide Web, so there is this code ... But after IE6, it started to change.
}else if (window. XMLHttpRequest) {//Non IE series browsers, but includes IE7 IE8
Xhr=new XMLHttpRequest ();
}
}
function CheckName () {
var Username=document.myform.user.value;
CREATEXHR ();
Xhr.open ("Get", "checkname.php?id=" +username,true);//true: Express Asynchronous transfer, and the unequal Send () method returns the result, which is the core idea of Ajax
xhr.onreadystatechange=byhongfei;//when the state changes, call Byhongfei This method, the content of the method we define separately
Xhr.send (NULL);
}
function Byhongfei () {
if (xhr.readystate = = 4) {//About the methods and properties in the Ajax engine object, 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 object for an AJAX engine: XHR (casually named one)
② because Microsoft's low version of IE and other browsers to create Ajax objects is not the same way, now IE and other browsers market share is almost half, so we have to consider both,ie-->activexobject; other--> XMLHttpRequest. I encapsulated her in a function: CREATEXHR
③ the CheckName () function is triggered when the focus is lost when we specify in index.html. So how do we capture user names entered by users? Here, the use of JS can easily capture to Document.myform.user.value (now know why the form and input named the bar, this step corresponding to the flowchart of "get filled in"), interested Bo friends, Try tapping the Code (Alert (username)) on the front line of the CREATEXHR () and ejecting the captured username.
The ④ajax engine has several methods and properties (refer to my other blog post: See figure Understanding: Normal interaction and Ajax interaction), we need to call the function CRAATEXHR to create an Ajax object before use
⑤ has Ajax objects, three methods are essential: open (), onreadystatechange, send ().
Send the request to the server using the open () and send () methods
The first parameter of the Open () method, indicating that a get or post method is used to transmit ...
The second parameter of the Open () method indicates the URL address to request (here we are requesting a checkname.php file), which can be an absolute or relative address
The third parameter of the Open () method async Indicates whether an asynchronous request is used, and true is used, in which case, instead of waiting for the server to respond via Ajax, JS, the ① executes other scripts while waiting for the response from the server ② to process the response when the response is ready. Generally for some small request, Async=false is also OK, but at this time do not write onreadystatechange function
onReadyStateChange Event: This event is triggered when Ajax properties ReadyState changed. In this event, when the server response is ready to be processed (that is, readystate=4 and status=200), we specify what task the server will do, and here we specify that the results retrieved from the database be exported to the span label with the id "checkbox."
⑥ through the checkname.php, query the database, will be the query results (that is, the response of the server, the corresponding flowchart in the "Query Database"), the data is still in the Ajax engine, if you need to get the response from the server, We need to use the Respontext or Responsexml properties of the XMLHttpRequest object, and through the DOM property innerHTML to set the data from the server response back to the value of the span label for id= "checkbox"
Note: Using AJAX to monitor the existence of a mailbox, we can also use AJAX real-time monitoring user input password intensity, at this point, we need to use the onblur event can be changed to onfocus event.
Original Cnblogs Small Fly
SOURCE Package Download/201112/yuanma/checkname_php.rar
