Récemment j’ai eu l’occasion de développer un outil qui permet de vérifier la validité des noms de domaines. On m’a également demandé d’afficher le résultat de la requête en Ajax afin de rendre le formulaire plus dynamique et d’éviter ainsi que la personne ne saisisse pas un nom de domaine déjà acheté.

Après quelques recherches et de vieux souvenirs de discussions entre amis, je me suis souvenu de l’existence de Prototype, une librarie en Javascript qui facilite énormément la tâche du pauvre développeur. Je vais donc montrer ici un exemple très simple d’usage de la librairie.

Technorati Tags: ajax, javascript, php, prototype

Regardez notre exemple. Si vous insérez votre prénom dans le champ du formulaire vous observerez qu’à chaque fois qu’une nouvelle lettre est insérée, elle est affichée sous le formulaire.

Si vous ouvrez le code source de la page d’exemple, vous verrez que quatre fichier entrent en jeu:

• index.php qui contient le formulaire
• prototype.js qui contient la librairie prototype
• check_prenom.php qui fait le traitement du formulaire
• ajax.js: deux bouts de code qui nous permettent de communiquer entre prototype, le formulaire et le script php

Dans notre fichier principal, nous trouvons donc notre formulaire, dans lequel nous indiquons de chercher les deux fichiers JavaScript. Le formulaire renvoyant à check_prenom.php (avec la méthode POST) contient le code suivant:

< ?php
echo $_POST["prenom"];
?>

Il ne nous reste qu’à ouvrir le fichier le plus important de l’exemple, ajax.js:

Event.observe(window, 'load', init, false);

function init(){
	$('submit').style.display = 'none';
	Event.observe('prenom', 'keyup', checkPrenom, false);
}

function checkPrenom(){
  	var url = 'check_prenom.php';
	var pars = 'prenom='+escape($F('prenom'));
	var target = 'prenom-check';
	var myAjax = new Ajax.Updater(target, url, {	method: 'post',parameters: pars});
}

Dans la fonction checkPrenom, nous spécifions le fichier qui va traiter les informations envoyées par le formulaire, ainsi que la zone dans laquelle nous afficherons le résultat du script PHP. La fonction init, initialise le tout à chaque fois qu’un bouton du clavier a été relaché. Notez également que dans notre exemple nous avons caché le bouton de type submit.

Voici donc un exemple tout simple. A vous de le rendre plus complexe en rajoutant par exemple des feedbacks différents en fonction du nom rentré, lier le formulaire à une base de données ou alors, pour un petit challenge personnels jouez avec phpwhois, une classe qui vérifie le statut des noms de domaines.

Notez enfin, que j’ai été largement inspiré par l’article Easy Ajax with Prototype.

Tags: javascript, prototype

This entry was posted on Monday, February 6th, 2006 at 5:19 pm and is filed under Ajax, Tutoriels. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.