Concevoir une application AJAX et PHP

 -- phpMyAdmin SQL Dump
-- version 4.8.5
-- https://www.phpmyadmin.net/
--
-- Base de données :  `gestiondesapprenants`
--
-- --------------------------------------------------------
--
-- Structure de la table `utilisateurs`
--
DROP TABLE IF EXISTS `utilisateurs`;
CREATE TABLE IF NOT EXISTS `utilisateurs` (
  `cdeUser` int(11) NOT NULL AUTO_INCREMENT,
  `emailUtilisateur` varchar(45) DEFAULT NULL,
  `motDePasse` varchar(255) DEFAULT NULL,
  `prenomUtilisateur` varchar(200) DEFAULT NULL,
  `dateCreatUser` datetime DEFAULT NULL,
  PRIMARY KEY (`cdeUser`)
) ENGINE=InnoDB AUTO_INCREMENT=7 DEFAULT CHARSET=latin1;
--
-- Déchargement des données de la table `utilisateurs`
--
INSERT INTO `utilisateurs` (`cdeUser`, `emailUtilisateur`, `motDePasse`, `prenomUtilisateur`, `dateCreatUser`) VALUES
(1, 'hajjjjjriadh@gmail.com', 'azerty', 'Riadh', '2020-11-11 00:00:00'),
(6, 'hajjriadh@gmail.com', '$2y$10$RjqinG2Kk1EcbyTPrqOm3uzyl11zh1ZqXzLFpWJFPmBJs1C/owcW2', 'Riadh HAJJI', '2020-03-04 09:02:33');
COMMIT;

<div class="container">
    <div class="col-lg-4">
    <h3>Inscription</h3>
    <form id="form_register" class="form-group">
        <input type="text" name="nomPrenom" placeholder="Prénom et nom" required class="form-control"/></br>
        <input type="email" name="email" placeholder="E-mail" required class="form-control"/></br>
        <input type="password" name="password" placeholder="Mot de passe" required class="form-control"/></br>
        <input type="submit" name="submit_register" value="S'inscrire" class="btn btn-primary"/>
    </form>
    </div>
</div>

• Un champ "nomPrenom" obligatoire de type "text".
• Un champ "E-mail" obligatoire de type "email".
• Un champ "Mot de passe" obligatoire de type "password".
• Un champ "S’inscrire" de type "submit".
• A noter : Il faut ajouter l’id dans la balise "form". En effet, on va en avoir besoin dans notre script AJAX.

<?php
// VERIFICATION EN LIVE DU PSEUDO
// Etape 1 - CONNECION SQL
   include('connexion.php');
   $emailUtilisateur= $_POST['emailUtilisateur'];
     $response = $connexion->prepare("SELECT count(*)
    FROM utilisateurs
    WHERE emailUtilisateur = :emailUtil");
$response->execute(array(
'emailUtil' => $emailUtilisateur
));
// Etape 2 - VERIFICATION
if ($ligne = $response->fetch()) {
   //echo "ligneligne".$ligne[0];
if ($ligne[0] == '1' || $ligne[0] > '1'){
    //echo 'Cette adresse email est déjà prise!';
echo 'no';
} else {
    //echo 'Cette adresse email est disponible.';
    echo 'yes';
}
}
?>

Ce script va vérifier si le pseudo « pseudo » est libre, si oui il retourne « 2 », si non la valeur retournée est alors « 1 ».

// stocke la référence à l'objet XMLHttpRequest
var xmlHttp = createXmlHttpRequestObject(); 

// Récupère l'objet XMLHttpRequest
function createXmlHttpRequestObject() 
{	
  //stocke la référence à l'objet XMLHttpRequest
  var xmlHttp;
 //si vous utilisez Internet Explorer 6 ou une version antérieure
  if(window.ActiveXObject)
  {
    try {
      xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    catch (e) {
      xmlHttp = false;
    }
  }
  // si vous utilisez Mozilla ou d'autres navigateurs
  else
  {
    try {
      xmlHttp = new XMLHttpRequest();
    }
    catch (e) {
      xmlHttp = false;
    }
  }
  // renvoie l'objet créé ou affiche un message d'erreur
  if (!xmlHttp)
alert("Erreur lors de la création de l'objet XMLHttpRequest.");
  else 
    return xmlHttp;
}

// Faire une requête HTTP asynchrone en utilisant l'objet XMLHttpRequest
function process()
{
  // Continuer uniquement si l'objet xmlHttp n'est pas occupé
  if (xmlHttp.readyState == 4 || xmlHttp.readyState == 0)
  {
    // Récupérer le nom tapé par l'utilisateur sur le formulaire
    name = encodeURIComponent(document.getElementById("myName").value);
    // exécuter la page verifier.php depuis le serveur
    xmlHttp.open("GET", "verifier.php?name=" + name, true);  
    // définir la méthode pour gérer les réponses du serveur
    xmlHttp.onreadystatechange = handleServerResponse;
    // faire la demande du serveur
    xmlHttp.send(null);
  }
  else
    //si la connexion est occupée, réessayez après une seconde  
    setTimeout('process()', 1000);
}

// fonction de rappel exécutée lorsqu'un message est reçu du serveur
function handleServerResponse() 
{
  // n'avancer que si la transaction est terminée
  if (xmlHttp.readyState == 4) 
  {
    // status of 200 indicates the transaction completed successfully
    if (xmlHttp.status == 200) 
    {
      // extraire le XML récupéré du serveur
      xmlResponse = xmlHttp.responseXML;
      // obtenir l'élément document (l'élément racine) de la structure XML
      xmlDocumentElement = xmlResponse.documentElement;
      // obtenir le message texte, qui est dans le premier enfant de
      // l'élément du document
      helloMessage = xmlDocumentElement.firstChild.data;
      // afficher les données reçues du serveur
      document.getElementById("divMessage").innerHTML = 
                                            '' + helloMessage + '';
      // restart sequence
      setTimeout('process()', 1000);
    } 
    // Un statut HTTP différent de 200 signale une erreur
    else 
    {
      alert("Il y a eu un problème d'accès au serveur: " + xmlHttp.statusText);
    }
  }
}