Correction activités XMLHttpRequest
Correction activités XMLHttpRequest
-
Objectifs
- Etre capable de manipuler l’objet XMLHttpRequest de JavaScript..
-
Activité 01
-
Énoncé
- Vous pouvez visualiser l’énoncé de l’activité
-
Solution
-
AJAX_act1.html
-
AJAX_act1.js
-
AJAX_act1.php
-
Activité 02
-
Énoncé
- Vous pouvez visualiser l’énoncé de l’activité
-
Solution
-
AJAX_act2.html
-
AJAX_act2.js
-
AJAX_act2.php
<!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> 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();
}
}<?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;
?>
