 |
 |
 |
 |
|
 |
 |
 |
  Home Page Tous les
scripts Proposer un
script Recherche
de script Cours de
JavaScript Liste de
discussion Forums CountUs myCircle Referencement Créat. de bannière HTML /
CSS PHP /
MySQL Réferencement Graph
/ Présentation Toutes les
astuces Ajouter un
article
  Hebergement
web Referencement Sites
webmasters XHTML
- CSS2 PHP Affiliation
- Pub FAI Toutes les
cat. Kits graphiques Foire aux
questions Les
membres Devenir
annonceur Faire un
lien Contact Le PHP facile Horoscope ASP-PHP.net Comscripts Webmaster Club Images gifs an... Créer son site... Bestgraph.com Milleliens.com... Zone-webmasters. Netsources France-créations Livre-dor.net Easy-script.com Chez fredo Les
autres Votre
site ici ? |
 AJAX - Interrogez votre serveur avec
JavaScript
Explications ! AJAX ?
L'AJAX (ou Asynchronous JavaScript And XML) n'est pas un langage, mais plutôt l'utilisation de plusieurs technologies les unes avec les autres. Elle va permettre, dans notre exemple, à une page web une fois affichée de se connecter à une autre page, d'en tirer des informations et de se mettre a jour sans se réactualiser. L'exemple
Nous allons faire une aide pour trouver plus rapidement un pseudo libre lors de l'inscription sur un site. Nous allons avoir besoin de : - un script php pour verifier si le pseudo demandé est libre ou non - un script JavaScript pour interoger a chaque frappe dans le formulaire le script PHP et ainsi savoir si le pseudo est libre. Si vous ne comprennez pas trop cet exemple, essayez de trouver un pseudo de libre a cette page : http://www.editeurjavascript.com/scripts/exemples/ajax.php On commence par le script PHP
Voici le code de la page "verifpseudo.php" : <? En gros, ce script ca
verifier si le pseudo pseudo est libre (dans ce cas, il retourne
"2") ou déjà pris (il retourne alors "1").// // VERIFICATION EN LIVE DU PSEUDO // // CONNECION SQL mysql_connect("localhost", "user", "password"); mysql_select_db("base"); // VERIFICATION $result = mysql_query("SELECT pseudo FROM membres WHERE pseudo='".$_GET["pseudo"]."'"); if(mysql_num_rows($result)>=1) echo "1"; else echo "2"; ?> L'adresse de ce script, sera : http://www.editeurjavascript.com/scripts/exemples/verifpseudo.php Commençons notre formulaire :
Nous allons créer une page toute simple nommée "ajax.php" avec un seul champ de formulaire (pour le pseudo) accompagné d'un bloc <div> : <!doctype html public "-//w3c//dtd html 4.0
transitional//en"> Vous
remarquerez l'evenement onKeyUp qui lance la fonction JavaScript
"verifPseudo", en passant le pseudo tapé en parametre de la
fonction, dès qu'une lettre est tapée dans le champ.<html> <head> <title>AJAX</title> </head> <body> <form action=""> <input type="text" name="pseudo" onKeyUp="verifPseudo(this.value)" /> <div id="pseudobox"></div> </form> </body> </html> Agrementer le tout de JavaScript :
Nous allons maintenant créer les fonctions qui vont verifier en temps réèl la disponibilité du pseudo. Ce script est ajouté a la page "ajax.php" : <script
type="text/javascript"> Voici
l'explication des fonctions :function writediv(texte) { document.getElementById('pseudobox').innerHTML = texte; } function verifPseudo(pseudo) { if(pseudo != '') { if(pseudo.length<2) writediv('<span style="color:#cc0000"><b>'+pseudo+' :</b> ce pseudo est trop court</span>'); else if(pseudo.length>30) writediv('<span style="color:#cc0000"><b>'+pseudo+' :</b> ce pseudo est trop long</span>'); else if(texte = file('http://www.editeurjavascript.com/scripts/exemples/verifpseudo.php?pseudo='+escape(pseudo))) { if(texte == 1) writediv('<span style="color:#cc0000"><b>'+pseudo+' :</b> ce pseudo est deja pris</span>'); else if(texte == 2) writediv('<span style="color:#1A7917"><b>'+pseudo+' :</b> ce pseudo est libre</span>'); else writediv(''); } } } function file(fichier) { if(window.XMLHttpRequest) // FIREFOX xhr_object = new XMLHttpRequest(); else if(window.ActiveXObject) // IE xhr_object = new ActiveXObject("Microsoft.XMLHTTP"); else return(false); xhr_object.open("GET", fichier, false); xhr_object.send(null); if(xhr_object.readyState == 4) return(xhr_object.responseText); else return(false); } </script> • writediv : cette fonctuion permet d'ecrire ce qu'on lui passe en parametre dans le bloc <div> dont l'ID est "pseudobox" (il est dans notre formulaire du début). • file : c'est la fonction qui se connecte a la page passée en parametre, et retourne son contenu. • verifPseudo : c'est cette fonction qui est appelée a chaque frappe dans le champ "pseudo" de notre formulaire. Elle verifie la longueur du pseudo tapé (si le pseudo fait moins de 2 ou plus de 30 caractères, un message d'erreur s'affiche) puis, si tout est bon, lance la fonction file qui se connectera a notre script PHP pour verifier si le pseudo tapé est libre. Au final, voici le code HTML complet de la page "ajax.php" : <!doctype html public "-//w3c//dtd html 4.0
transitional//en"> <html> <head> <title>AJAX</title> <script type="text/javascript"> function writediv(texte) { document.getElementById('pseudobox').innerHTML = texte; } function verifPseudo(pseudo) { if(pseudo != '') { if(pseudo.length<2) writediv('<span style="color:#cc0000"><b>'+pseudo+' :</b> ce pseudo est trop court</span>'); else if(pseudo.length>30) writediv('<span style="color:#cc0000"><b>'+pseudo+' :</b> ce pseudo est trop long</span>'); else if(texte = file('http://www.editeurjavascript.com/scripts/exemples/verifpseudo.php?pseudo='+escape(pseudo))) { if(texte == 1) writediv('<span style="color:#cc0000"><b>'+pseudo+' :</b> ce pseudo est deja pris</span>'); else if(texte == 2) writediv('<span style="color:#1A7917"><b>'+pseudo+' :</b> ce pseudo est libre</span>'); else writediv(texte); } } } function file(fichier) { if(window.XMLHttpRequest) // FIREFOX xhr_object = new XMLHttpRequest(); else if(window.ActiveXObject) // IE xhr_object = new ActiveXObject("Microsoft.XMLHTTP"); else return(false); xhr_object.open("GET", fichier, false); xhr_object.send(null); if(xhr_object.readyState == 4) return(xhr_object.responseText); else return(false); } </script> </head> <body> <form action=""> <input type="text" name="pseudo" onKeyUp="verifPseudo(this.value)" /> <div id="pseudobox"></div> </form> </body> </html> Résultat :
Testez la disponibilité de votre pseudo : Annotations des visiteurs :
>> Poster une annotation sur cette astuce
|
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
De 
 |
 |
 |
La mini-astuce "Divers" du jour
par corenting Pour tous les scripts qui ne fonctionnent pas sur Firefox,vous pouvez téléchargés l'extension IE tab,qui ouvre la page avec le moteur de IE. Pour télécharger IEtab: http://extensions.geckozone.org/IETab (fonctionne que avec Windows. Proposer votre mini-astuce | Archives des mini-astuces |
 |
 |
 |
 |
© 1999-2006 K-NETWORK - Tous droits réservés | CNIL N° 844440
| 04/07/2006 19:08:45 | Design by Studcrea | Gen. en
0.294 sec. |
 |