Avez-vous une question? (216) 97 656 803 hajjriadh@gmail.com
AJAX

Correction activités XMLHttpRequest

Un cours complet pour maîtriser Correction activités XMLHttpRequest.

0 chapitres 0 QCM Accès gratuit
Commencer Retour aux cours
Sommaire du cours
Pourquoi utiliser Ajax?
Le monde d'AJAX
Concevoir une application AJAX et PHP
Champs de formulaire à saisie semi-automatique
Création de requêtes Ajax avec jQuery
Exercices AJAX : Série 02
TP1 AJAX
Validation de formulaire à l'aide d'Ajax
Utiliser jQuery AJAX avec php MySQL
Les méthodes get() et post() jQuery AJAX
Un formulaire de connexion avec AJAX
Correction exercices AJAX : Série 02
Correction application 02 AJAX-PHP
TP3 AJAX
Correction TP3 AJAX
Autres catégories
News
Microsoft Office
Les cours de programmation
MOS
WordPress
Ressources pédagogiques
Voir tout le catalogue

  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;
?>
      Les méthodes get et post jQuery AJAX
      Sommaire du cours AJAX