A Login Example


Note that the Google Suggest application discussed earlier indicates a new use of Ajax: you can now check every key as it’s typed. You might not want to do that everywhere in your application; checking every key can be quite a bottleneck, but you might need it in special cases, as when users enter a password or username and you want to tell that what they’re typing has already been used.

Take a look at an example in the downloadable code for this book: username.html and username.php. The username.html document asks users to enter the username they want, as you see in Figure 4.8.

image from book
Figure 4.8: Checking a user’s suggested username

If users take a username that’s already taken, such as nancy, the application informs them immediately that their username is not available, as you see in Figure 4.9.

image from book
Figure 4.9: Rejecting a user’s suggested username

The username.php script is easy enough; all it does is echo no if the username is nancy, and yes otherwise:

 <?php     if ($_GET["qu"] == "nancy"){       echo "no";     }     else {       echo "yes";     } ?>

How does username.html work? It just watches as the user types keystrokes, calling a function named checkUsername for each keystroke:

 <body>   <H1>Select a username</H1>   Select your username <input id = "username" type = "text"     name = "username" onkeyup = "checkUsername(event)">   <div id = "targetDiv"><div></div></div> </body>

In the checkUsername function, the user’s entered username is passed on to the username.php function as the parameter named qu:

 function checkUsername(keyEvent) {   var targetDiv = document.getElementById("targetDiv");   targetDiv.innerHTML = "<div></div>";   var input = document.getElementById("username");   if (input.value) {     getData("username.php?qu=" + input.value);   } }

All that’s left is to handle the value returned from username.php, yes or no, which is done in the getData function:

 function getData(dataSource) {   var XMLHttpRequestObject = false;   if (window.XMLHttpRequest) {     XMLHttpRequestObject = new XMLHttpRequest();   } else if (window.ActiveXObject) {     XMLHttpRequestObject = new       ActiveXObject("Microsoft.XMLHTTP");   }   if(XMLHttpRequestObject) {     XMLHttpRequestObject.open("GET", dataSource);     XMLHttpRequestObject.onreadystatechange = function()     {       if (XMLHttpRequestObject.readyState == 4 &&         XMLHttpRequestObject.status == 200) {           if(XMLHttpRequestObject.responseText == "no"){             var targetDiv =               document.getElementById("targetDiv");             targetDiv.innerHTML =               "<div>That username is not available.</div>";           }       }     }     XMLHttpRequestObject.send(null);   } } 



Ajax Bible
Ajax Bible
ISBN: 0470102632
EAN: 2147483647
Year: 2004
Pages: 169

Similar book on Amazon
HTML, XHTML, and CSS Bible
HTML, XHTML, and CSS Bible
JavaScript Bible
JavaScript Bible
JavaScript Bible
JavaScript Bible
PHP and MySQL Web Development (4th Edition)
PHP and MySQL Web Development (4th Edition)

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net