AJAXFormulaire Ajax
Formulaire d'accès privée qui utilise Ajax
Utiliser la technique Ajax pour réaliser un formulaire dynamique d'identification à un accès privée.
Le fichier "identification.html" ci-dessous, est constituée d'un formulaire avec un login (login) et un mot de passe (password). C'est également à partir de cette page qu'on appelle le code Javascript qui se trouve dans "identification.js" qui, lui-même, appel le fichier PHP.
Pas de test sur une base de donnée mais avec le nom de login 'login' et le mot de passe 'password'.
Contenu de identification.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/HTML; charset=iso-8859-1" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<script type="text/javascript" src="identification.js"></script>
<title>Identification</title>
</head>
<body>
<form action="identification.php" method="get" id="frmIdentification">
Login <input type="text" value="" name="login" id="txtLogin" /><br />
Mot de passe <input type="text" value="" name="password" id="txtPassword" />
<input type="submit" value="Connexion" />
</form>
</body></html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/HTML; charset=iso-8859-1" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<script type="text/javascript" src="identification.js"></script>
<title>Identification</title>
</head>
<body>
<form action="identification.php" method="get" id="frmIdentification">
Login <input type="text" value="" name="login" id="txtLogin" /><br />
Mot de passe <input type="text" value="" name="password" id="txtPassword" />
<input type="submit" value="Connexion" />
</form>
</body></html>
Le fichier "identification.js" ci-dessous contient tout le code Javascript permettant de rendre la page d'identification interactive.
On y trouve les fonctions pour la création d'une connection avec XMLHttpRequest, la lecture du formulaire et l'affichage du résultat, le tout sans recharger la page.
Contenu de identification.js
window.onload = function()
{
//on associe la fonction verifId à l'événénement onsubmit du formulaire
document.getElementById('frmIdentification').onsubmit = verifId;
}
// La première étape est l'assignation d'une fonction à une comportement du formulaire.
// Ici, la fonction verifId sera déclenchée lorsque le formulaire est envoyé:
// suite - traitement de la réponse
function verifId()
{
//envoi des données
return !sendData('GET', 'identification-xml.php',
'login='+document.getElementById('txtLogin').value + '&' +
'password='+document.getElementById('txtPassword').value);
}
// Il faut noter que cette fonction renvoie la valeur false lorsque l'envoi s'est bien passé
// pour éviter que le formulaire ne soit envoyé par la voie classique
// (et inversement renvoie true lorsqu'il faut envoyer le formulaire par la voie classique).
// suite - Création d'un objet XMLHttpRequest
function sendData(method, url, data) {
var xhr = getHTTPObject();
if (!xhr) { return false; }
if(method == "GET") {
if(data == 'null') { xhr.open("GET", url, true); //ouverture asynchrone }
else { xhr.open("GET", url+"?"+data, true); }
xhr.send(null);
}
else if(method == "POST")
{
xhr.open("POST", url, true); //ouverture asynchrone
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xhr.send(data);
}
return true;
}
window.onload = function()
{
//on associe la fonction verifId à l'événénement onsubmit du formulaire
document.getElementById('frmIdentification').onsubmit = verifId;
}
// La première étape est l'assignation d'une fonction à une comportement du formulaire.
// Ici, la fonction verifId sera déclenchée lorsque le formulaire est envoyé:
// suite - traitement de la réponse
function verifId()
{
//envoi des données
return !sendData('GET', 'identification-xml.php',
'login='+document.getElementById('txtLogin').value + '&' +
'password='+document.getElementById('txtPassword').value);
}
// Il faut noter que cette fonction renvoie la valeur false lorsque l'envoi s'est bien passé
// pour éviter que le formulaire ne soit envoyé par la voie classique
// (et inversement renvoie true lorsqu'il faut envoyer le formulaire par la voie classique).
// suite - Création d'un objet XMLHttpRequest
function sendData(method, url, data) {
var xhr = getHTTPObject();
if (!xhr) { return false; }
if(method == "GET") {
if(data == 'null') { xhr.open("GET", url, true); //ouverture asynchrone }
else { xhr.open("GET", url+"?"+data, true); }
xhr.send(null);
}
else if(method == "POST")
{
xhr.open("POST", url, true); //ouverture asynchrone
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xhr.send(data);
}
return true;
}
Le script PHP ci-dessous se contente de fournir les fonctions permettant l'identification d'un utilisateur en compararant les chaîcnes de caractères. Pas de test sur une base de donnée mais avec le nom de login 'login' et le mot de passe 'password'.
Contenu de lib.identification.php
<?php
function identification($login, $password)
{
if (($login == 'login')&&($password == 'password')) { return 'Vous êtes identifié'; }
else { return 'Mauvais login ou mot de passe'; }
}
?>
if ((!empty($_GET['login']))&&(!empty($_GET['password'])))
{
$resultat = identification($_GET['login'], $_GET['password']);
}
else { $resultat = 'erreur'; }
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/HTML; charset=iso-8859-1" />
<title>Identification</title>
</head>
<body>
<div><?php echo $resultat ?></div>
</body>
</html>
<?php
function identification($login, $password)
{
if (($login == 'login')&&($password == 'password')) { return 'Vous êtes identifié'; }
else { return 'Mauvais login ou mot de passe'; }
}
?>
if ((!empty($_GET['login']))&&(!empty($_GET['password'])))
{
$resultat = identification($_GET['login'], $_GET['password']);
}
else { $resultat = 'erreur'; }
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/HTML; charset=iso-8859-1" />
<title>Identification</title>
</head>
<body>
<div><?php echo $resultat ?></div>
</body>
</html>
