Cet article va vous permettre de découvrir avec quelle simplicité vous pouvez envoyer des requetes HTTP en utilisant la methode POST depuis votre site web 2.0. Tout ceci grâce au framework
Prototype.
Les requetes POST permetent de faire passer des paramètres d'une page web a une autre, sans les rendrent apparant (tant au niveau des logs coté serveur, qu'au niveau client dans l'historique).
Dans notre exemple, nous allons traiter un formulaire d'identification.
Un mot de passe étant une donnée, en general, plutôt sensible, il est preferable de le cacher au maximum.
Commençons par le code HTML du formulaire :
Vous voyez dans le code ci-dessus qu'il n'y a aucune balise form.
Nous n'utiliserons donc pas les formulaires HTML classique pour s'identifier.
En réalité, c'est le clique sur le bouton "Identification" (id 'btnValid') qui appelera la fonction javascript
clique_sur_le_bouton_identification() que nous implémenterons un peu plus bas.
Ensuite, il nous faut créer un script PHP de controle de mot de passe.
Celui ci sera fait, pour des questions de simplicité, "en dur" avec les valeurs suivante :
- Utilisateur :
username,
- Mot de passe :
password.
A vous de le dynamiser avec une base de données.
// Initialise les variables de controle
$erreur = false;
$erreurMsg = '';
// Si le mot de passe n'est pas "username"
if( $_POST['user'] != 'username' ) {
// On definit l'erreur
$erreur = true;
$erreurMsg = 'Utilisateur incorrect !';
// Si le mot de passe n'est pas "password"
} elseif( $_POST['pass'] != 'password' ) {
// On definit l'erreur
$erreur = true;
$erreurMsg = 'Mot de passe incorrect !';
// Fin controle utilisateur / mot de passe
}
// Si nous avons une erreur
if( $erreur === true ) {
// Affiche l'erreur dans l'element boxResult sur la page HTML
echo $erreurMsg;
$retourJS = 'Erreur';
// Sinon
} else {
// Affiche un message de bienvenu dans l'element boxResult
echo 'Identification reussie !';
$retourJS = 'Succés';
// Fin du controle d'erreur
}
?>
Maintenant nous allons mettre en place ce controle de mot de passe en Ajax sur la page HTML.
L'idée consiste a envoyer les variables user/pass en Ajax sans recharger toute la page.
Voici donc le code de la fonction
clique_sur_le_bouton_identification()
function clique_sur_le_bouton_identification() {
var inputUserValue = $('user').value;
var inputPassValue = $('pass').value;
var elementId = 'boxResult';
var url = 'identification.php';
var myAjax = new Ajax.Updater(
elementId,
url,
{
method: 'post',
postBody: $H({
user: inputUserValue,
pass: inputPassValue
}).toQueryString(),
evalScripts: true
});
}
Un des points important de cette fonction est la propriété "evalScripts" lors de la requete Ajax.
Cette propriété permet d'executer un script JS depuis une page appeler en Ajax.
Cela se traduit dans notre exemple par une boite d'alerte javascript aprés le retour de la reponse du formulaire POST.
Vous pouvez aussi remarquer, que pour la definition des variables inputUserValue et inputPassValue, j'utilise la syntaxe
$('elementId'). Grâce a Prototype, cela permet d'eviter d'ecrire
document.getElementById('elementId')
Si vous desirez consulter une demonstration en ligne, cliquez ici.
Si vous désirez télécharger les sources de cet article, c'est part ici.
