Ajax Entry Detection User name instance and implementation method (1/2)

Ajax Entry Detection User name instance and implementation method

<form action= "#" method= "POST" name= "Iform" >
<p><label for=nickname> Username: </label><input id=nickname name=nickname placeholder= "Enter user name here" ><span Id=tips Tutorials ></span></p>
</form>

We also need a back-end page to determine if the input nickname exists (in this case, for example, PHP tutorial):

...

if (isset ($_get[' entryname ')) {
$entryname =$_get[' EntryName '];
}else{
$entryname = ' data null ';
}
$sql =sprintf ("select * from I_test_ajax where nickname= '%s '", $entryname);
$res = $iajax->query ($sql);
Sleep just to show the effect of readstate==1
Sleep (1);
if (($res->num_rows) >0) {
echo "Sorry!" This nickname already exists:(";
}else{
Echo, Congratulations! This nickname can be registered:) ";
}

...
The rest is to be handled by Ajax. XMLHttpRequest, an object that has to be mentioned, the most core of Ajax is also the bottom of the object. Sadly, it is a standard for the consortium, but Microsoft IE has been very self-Microsoft IE. What to do? It is of course a way to harmonize them. Microsoft IE supports the ActiveXObject (' Microsoft.XMLHTTP ') object, which is simple:

//Compatible XMLHttpRequest objects
Ixhr:function () {
if (window.activexobject) {
Xhr=new ActiveXObject (' microsoft.xmlhttp ');
}else if (window.xmlhttprequest) {
Xhr=new XMLHttpRequest ();
}else{
return null;
}
}

The compatible XMLHttpRequest object is implemented, then write a simple onblur event that, when the value is entered, the form loses focus and starts to judge and quickly returns a message to the foreground. The code is as follows:

Execution when the focus is triggered

document.forms[' iform '].nickname.onblur = function () {
The value entered
var val=document.forms[' Iform '].nickname.value;
The judgment of the user name
if (!/^[a-za-z0-9_]{3,16}$/.test (val)) {
Alert (' Please enter a nickname that consists of a 3~16 in English, numerals and underscores! ');
return false;
}
Initialize the XHR.
IBASE.IXHR ();
The original need for a new open judgment page uses get to use asynchronous
Xhr.open (' Get ', '/demo/ajax/iajax20110306_query.php?entryname= ' +val,true);
Associated with the ReadyState property, it triggers when the readystate changes
Xhr.onreadystatechange=returnfun;
Send data after asynchronous processing completes (for example, some that need to be executed after the focus event)
Xhr.send (NULL);
}

Home 1 2 last page