AJAX (Asynchronous Javascript And XML)

Auteur: Mohamed CHINY Durée necessaire pour le cours de AJAX (Asynchronous Javascript And XML) Niveau recommandé pour le cours de AJAX (Asynchronous Javascript And XML) Supports vidéo disponibles pour ce cours Exercices de renforcement disponibles pour ce cours Quiz non disponibles pour ce cours

Page 8: Exercice - Indiquer le jour de la naissance à partir d'une date

Toutes les pages

Enoncé

On voudrait créer une page Web qui permet d'indiquer au visiteur le jour de sa naissance (lundi, mardi...).

La page propose une zone de texte qui permet de saisir la date de naissance sous la forme JJ/MM/AAAA. En cliquant sur le bouton ou en appuyant sur la touche entrée, le script AJAX s'execute en sollicitant une page PHP qui se trouve sur le serveur et qui est sensée faire le traitement souhaitée.

Si par hasard, la date d'anniversaire du visiteur coïncide avec la date d'aujourd'hui alors on affichera également le message "Joyeux anniversaire".

Voilà à quoi le résultat final devrait ressembler:
Veuillez entrer votre date de naissance pour voir le réusltat.



Correction

Pour simplifier, j'ai considéré que tous les fichiers (HTML, CSS et Javascript) ont été placés dans le même dossier. La GIF animée quant-à-elle, a été mise dans le dossier "images".
  • Page AJAX_ex4.html qui contient le formulaire:
    • <!DOCTYPE html>
    <html>
       <head>
          <link rel="stylesheet" type="text/css" href="AJAX_ex4.css" />   
          <script type="text/javascript" src="getxhr.js"></script>
          <script type="text/javascript" src="ajaxing.js"></script>
       </head>
       <body>
          <div id="label">Votre date de naissance</div>
          <input type="text" id="dnaissance" placeholder="JJ/MM/AAAA" onKeyDown="if(event.keyCode==13) ajaxing();" /><br />
          <input type="button" value="Trouver mon jour de naissance" onclick="ajaxing()" /><br />
          <div id="divi"></div>
       </body>
    </html>
  • Page AJAX_ex4.css qui contient les styles CSS:
    • body{
       text-align:center;
       font:10pt arial;
    }
    input[type="text"]{
       padding:10px;
       border:solid 1px #E60;
       color:#000;
       font-size:10pt;
       text-align:center;
       border-radius:6px;
       outline:none;
       margin-bottom:20px;
    }
    input[type="button"]{
       padding:10px;
       border:none;
       background-color:#E60;
       color:#FFF;
       font-size:10pt;
       width:220px;
       text-align:center;
       border-radius:6px;
       outline:none;
       cursor:pointer;
    }
    #label{
       margin-bottom:10px;
       color:#E60;
    }
    #divi{
       margin-top:30px;
       padding:20px;   
       height:40px;
       font-size:16pt;
       color:#E60;
    }
    .erreur{
       color:#C20;
       font-size:10pt;
    }
  • Page getxhr.js qui contient le script de création de l'objet XHR:
    • function getxhr(){
       try{xhr=new XMLHttpRequest();}
       catch(e){
          try {xhr=new ActiveXObject("Microsoft.XMLHTTP");}
          catch(e1){
             try{xhr=new ActiveXObject("Msxml2.XMLHTTP");}
             catch(e2){
                alert("AJAX non supporté!");
             }
          }
       }
       return xhr;
    }
  • Page ajaxing.js qui contient le traitement Javascript/AJAX:
    • function ajaxing(){
       xhr=getxhr();
       xhr.onreadystatechange=function(){
          if(xhr.readyState==4)
             document.getElementById("divi").innerHTML=xhr.responseText;
          else
             document.getElementById("divi").innerHTML="<img src='../images/loading.gif' />";
       }
       xhr.open("POST","AJAX_ex4.php",true);
       xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
       xhr.send("dnaissance="+document.getElementById("dnaissance").value);
    }
  • Page AJAX_ex4.php qui contient le traitement PHP:
    • <?php
       header("content-type:text/html;charset=iso-8859-1");
       $dnaissance=$_POST["dnaissance"];
       $jour=array("Dimanche","Lundi","Mardi","Mercredi","Jeudi","Vendredi","Samedi");
       if(preg_match("#dd/dd/dddd#",$dnaissance)){
          $tab=explode("/",$dnaissance);
             if(checkdate($tab[1],$tab[0],$tab[2])){
                echo "Vous êtes né un <b>".$jour[date("w",mktime(00,00,00,$tab[1],$tab[0],$tab[2]))]."</b>";
                if(date("d")==date("d",mktime(00,00,00,$tab[1],$tab[0],$tab[2])) && date("m")==date("m",mktime(00,00,00,$tab[1],$tab[0],$tab[2])))
                   echo "<br />Joyeux anniversaire :)";
             }
             else
                echo "<div class='erreur'>Date invalide!</div>";
       }   
       else
          echo "<div class='erreur'>Date invalide!</div>";
    ?>