Correction activités XMLHttpRequest

Correction activités XMLHttpRequest

  1. Objectifs

    • Etre capable de manipuler l’objet XMLHttpRequest de JavaScript..
  2. Activité 01

      1. Énoncé
      2. Solution
        • AJAX_act1.html
        • AJAX_act1.js
        • AJAX_act1.php



    1. Activité 02

        1. Énoncé
        2. Solution
          1. AJAX_act2.html
            • <!DOCTYPE html>
              <html>
                 <head>
                  <meta charset="UTF-8">
                  <script src="AJAX_act2.js"></script>
                  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
                    </head>
                    <body>
                    <div class="container">
                       <div class="row g-0">
                          <div class="col-sm-3 col-md-6">
                    <p><b>Commencez à saisir un nom dans le champ de saisie ci-dessous:</b></p>
                    <form>
                       <div class="mb-3">
                         <label for="exampleInputEmail1" class="form-label">Prénom:</label>
                         <input type="text" class="form-control" onkeyup="devoilerIndice(this.value)">
                       
                         <label for="exampleInputEmail1" class="form-label">Suggestions:</label>
                         <div id="txtDevoiler" class="form-text Color text-primary"></div>
                       </div>
                       </form>
                    </div>
                 </div>
              </div>
                    </body>
                    </html>
          2. AJAX_act2.js
            •       function devoilerIndice(str) {
                        if (str.length == 0) {
                            document.getElementById("txtDevoiler").innerHTML = "";
                            return;
                        } else {
                            var xhr = new XMLHttpRequest();
                            xhr.onreadystatechange = function() {
                                if (xhr.readyState == 4 && xhr.status == 200) {
                                    document.getElementById("txtDevoiler").innerHTML = xhr.responseText;
                                }
                            };
                            xhr.open("GET", "AJAX_act2.php?mot=" + str, true);
                            xhr.send();
                        }
                    }
          3. AJAX_act2.php
            • <?php
              // Tableau avec des noms
              $tab[] = "Amir";
              $tab[] = "Amira";
              $tab[] = "Asir";
              $tab[] = "Basil";
              $tab[] = "Bechir";
              $tab[] = "Cinderella";
              $tab[] = "Dalila";
              $tab[] = "Dhia";
              $tab[] = "Douja";
              $tab[] = "Dhaker";
              $tab[] = "Eva";
              $tab[] = "Fadhel";
              $tab[] = "Farah";
              $tab[] = "Farouk";
              $tab[] = "Fahmi";
              $tab[] = "Farah";
              $tab[] = "Fatma";
              $tab[] = "Fawzi";
              $tab[] = "Faycel";
              $tab[] = "Feriel";
              $tab[] = "Firas";
              $tab[] = "Foued";
              $tab[] = "Fraj";
              $tab[] = "Guider";
              $tab[] = "Heger";
              $tab[] = "Israa";
              $tab[] = "Jawhar";
              $tab[] = "Jilani";
              $tab[] = "Kawther";
              $tab[] = "Lilia";
              $tab[] = "Mejdi";
              $tab[] = "Mohamed";
              $tab[] = "Nabiha";
              $tab[] = "Nessrine";
              $tab[] = "Olfa";
              $tab[] = "Lotfi";
              $tab[] = "Wafa";
              $tab[] = "Wassim";
              // Obtenir le paramètre mot à partir de l'URL
              $mot = $_REQUEST["mot"];
              $indice = "";
              // rechercher tous les indices du tableau si $mot est différent de ""
              if ($mot !== "") {
                  $mot = strtolower($mot);
                  $len=strlen($mot);
                  foreach($tab as $name) {//string  stristr ( string   haystack , string   needle )
                      if (stristr($mot, substr($name, 0, $len))) {
                          if ($indice === "") {
                              $indice = $name;
                          } else {
                              $indice .= ", $name";
                          }
                      }
                  }
              }
              
              // Production "aucune suggestion" si aucun indice n'a été trouvé ou affiche des valeurs correctes
              echo $indice === "" ? "Aucune suggestion" : $indice;
              ?>



Laisser un commentaire

Abonnez vous à notre chaîne YouTube gratuitement