AJAX et Fetch API: communication asynchrone entre navigateur et serveur

Auteur: Mohamed CHINY Durée necessaire pour le cours de AJAX et Fetch API: communication asynchrone entre navigateur et serveur Niveau recommandé pour le cours de AJAX et Fetch API: communication asynchrone entre navigateur et serveur Supports vidéo disponibles pour ce cours Exercices de renforcement disponibles pour ce cours Quiz non disponibles pour ce cours

Leçon 6: Exemple d'application: réponse texte (ou HTML)

Toutes les leçons

Exemple d'une réponse texte (ou HTML)

Dans cet exemple, on va afficher 6 messages en guise de titre <h1> pour le premier, titre <h2> pour le deuxième etc...

La fonction qui exécute AJAX sera appelée suite au clic sur un bouton classique, et le message à afficher sera envoyé en tant que paramètre avec la requête.

La page qui contient le script Javascript/AJAX s'appelle AJAX_ex2.html et la page qui contient la réponse sera écrite en PHP et nommée AJAX_ex2.php.

Voilà le résultat escompté:



  • Code source de la page AJAX_ex2.php:
    • <?php
       $message=$_POST["message"];
       for($i=1;$i<=6;$i++){
          echo "<h".$i.">".$message." ".$i."</h".$i.">";
       }
    ?>
  • Code source de la page AJAX_ex2.html:
    • <!DOCTYPE html>
    <html>
       <head>
          <style>
             body{
                text-align:center;
                font:10pt arial;
             }
             input{
                padding:10px;
                border:none;
                background-color:#CCC;
                color:#000;
                width:160px;
                border-radius:6px;
                outline:none;
                cursor:pointer;
             }
             #divi{
                margin-top:30px;
                margin-bottom:30px;
             }
          </style>
          
          <script language="javascript">
          
             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;
             }
             
             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_ex2.php",true);
                xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
                xhr.send("message=La ligne");
             }
             
          </script>
       </head>
       <body>   
          <input type="button" value="AJAX" onclick="ajaxing()" />
          <div id="divi">   
          </div>
       </body>
    </html>
    Vous avez remarqué que pour récupérer les paramètres avec du PHP on recourt à la variable superglobale $_POST comme si on traitait un formulaire HTML envoyé avec la méthode POST.