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 6: Exemple d'application: réponse texte (ou HTML)

Toutes les pages

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.