Realization principle and method of Ajax detection username

Source: Internet
Author: User

Methods in the Ajax engine object:

Abort () Stop the current request
getAllResponseHeaders () returns the complete headers as a string
getResponseHeader ("Headerlabel") returns a single header label as a string
Open ("Method", "URL" [, asyncflag[, "UserName" [, "Password"]]) establishes a call to the server. The method parameter can be a GET, post, or Put,url parameter can be a relative URL or an absolute URL

Send (content) sends a request to the server
setRequestHeader ("header", "value") sets the specified header to the supplied value and must call open () before any header is set.

Properties in the Aaja engine object

onReadyStateChange event triggers with state changes
ReadyState Object State (integer)
0= uninitialized 1= Read 2 = read 3= interaction 4 = complete
ResponseText The server process returns a text version of the data
Responsexml a compatible DOM XML Document object that returns data to the server process
Status code returned by the status server, such as: 404 = "File not found", 200 = "Success"
StatusText status text information returned by the server
How to use AJAX to request a server using AJAX engine

Look at the picture

Flexible browsers

Ajax interaction

OK, let's take a look at the example below. 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:

The code is as follows Copy Code
<! 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>

① 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.)

The code is as follows Copy Code
<?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

The code is as follows Copy Code
//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 class
Xhr=new activexobject (' microsoft.xmlhttp '); ie monopolized the entire browser market, did not follow the standard, so the code ... But IE6 began to improve after the
}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: An 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 another
Xhr.send (null);

Function Byhongfei () {
if (xhr.readystate = = 4) {//About methods and properties in Ajax engine objects, if (Xhr.status =) {
var texthtml= Xhr.responsetext;
document.getElementById (' checkbox '). innerhtml=texthtml;
}
}
}

Using AJAX to monitor the existence of a mailbox, we can also use AJAX real-time monitoring user input password intensity, at this point, you need to use the onblur event can be changed to onfocus event.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.