Final result:
Copy codeThe Code is as follows: <! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> Ajax detection username </title>
<Script type = "text/javascript" src = "ajax. js"> </script>
</Head>
<Body>
<Form name = "myform">
Username: <input type = "text" name = "user" onblur = "checkname ();">
<Span id = "checkbox"> </span>
</Form>
</Body>
</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, the "trigger control" of the flowchart ")
④ <Span id = "checkbox"> </span> is used to store the data sent from the server (that is, "the user name already exists)Copy codeThe Code is 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> the user name already exists </font> ";
} Else {
Echo "<font color = green> the user name can be used </font> ";
}
?>
Code explanation:
Use the ajax open method to pass in the user input "User Name" Through id (I .e. $ _ GET [id]). At this time, the specified database table will be queried, check whether the "user name" exists"
Ajax. jsCopy codeThe Code is as follows: // JavaScript Document
Var XHR; // defines a Global Object
Function createXHR () {// first we need to create an XMLHttpRequest object
If (window. ActiveXObject) {// lower version of IE
XHR = new ActiveXObject ('Microsoft. xmlhttp'); // previously, IE monopolized the entire browser market and did not comply with W3C standards. Therefore, this code is available... However, IE6 started to change.
} Else if (window. XMLHttpRequest) {// non-IE browser, 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, but does not return results by sending (). This is the core idea of ajax.
XHR. onreadystatechange = byhongfei; // when the status changes, call the byhongfei method. The content of the method is defined separately.
XHR. send (null );
}
Function byhongfei (){
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
If (XHR. status = 200 ){
Var textHTML = XHR. responseText;
Document. getElementById ('checkbox'). innerHTML = textHTML;
}
}
}
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 input "User Name? Here, the document can be easily captured using js. myform. user. value (now you know why to name form and input. This step corresponds to the "get filled content" in the flowchart). If you are interested, try createXHR () the first line of the Code (alert (username), 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 it, we must call the function craateXHR 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 that the data is transmitted 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.
Async, the third parameter of the open () method, indicates 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. Generally, async = false is also acceptable for some small requests, but do not compile the onreadystatechange function at this time.
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. Use checkname. php: After querying the database, you will get the query result (that is, the server response, corresponding to the "query database" in the flowchart). 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: If ajax is used to monitor whether a mailbox exists, ajax can also be used to monitor the password strength entered by users in real time. In this case, you need to change the onblur event to the onfocus event.
Original cnblogs Xiaofei
Download the source code package/201112/yuanma/checkname_php.rar
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
