AJAX PHP-voorbeeld
AJAX wordt gebruikt om meer interactieve applicaties te maken.
AJAX PHP-voorbeeld
Het volgende voorbeeld laat zien hoe een webpagina kan communiceren met een webserver terwijl een gebruiker tekens typt in een invoerveld:
Voorbeeld
Start typing a name in the input field below:
Suggestions:
First name:
Voorbeeld uitgelegd
In het bovenstaande voorbeeld, wanneer een gebruiker een teken typt in het invoerveld, wordt een aangeroepen functie showHint()
uitgevoerd.
De functie wordt geactiveerd door de onkeyup
gebeurtenis.
Hier is de code:
Voorbeeld
<p>Start typing a name in the input field below:</p>
<p>Suggestions: <span id="txtHint"></span></p>
<form>
First name: <input type="text" onkeyup="showHint(this.value)">
</form>
<script>
function showHint(str) {
if (str.length == 0) {
document.getElementById("txtHint").innerHTML = "";
return;
} else {
const xmlhttp = new XMLHttpRequest();
xmlhttp.onload = function() {
document.getElementById("txtHint").innerHTML = this.responseText;
}
xmlhttp.open("GET", "gethint.php?q=" + str);
xmlhttp.send();
}
}
</script>
Code uitleg:
Controleer eerst of het invoerveld leeg is (str.length == 0). Als dit het geval is, wist u de inhoud van de tijdelijke aanduiding txtHint en verlaat u de functie.
Als het invoerveld echter niet leeg is, doet u het volgende:
- Een XMLHttpRequest-object maken
- Maak de functie die moet worden uitgevoerd wanneer de serverreactie gereed is
- Stuur het verzoek naar een PHP-bestand (gethint.php) op de server
- Merk op dat de parameter q is toegevoegd gethint.php?q="+str
- De variabele str bevat de inhoud van het invoerveld
Het PHP-bestand - "gethint.php"
Het PHP-bestand controleert een reeks namen en retourneert de bijbehorende naam (namen) naar de browser:
<?php
// Array with names
$a[] = "Anna";
$a[] = "Brittany";
$a[] = "Cinderella";
$a[] = "Diana";
$a[] = "Eva";
$a[] = "Fiona";
$a[] = "Gunda";
$a[] = "Hege";
$a[] = "Inga";
$a[] = "Johanna";
$a[] = "Kitty";
$a[] = "Linda";
$a[] = "Nina";
$a[] = "Ophelia";
$a[] = "Petunia";
$a[] = "Amanda";
$a[] = "Raquel";
$a[] = "Cindy";
$a[] = "Doris";
$a[] = "Eve";
$a[] = "Evita";
$a[] = "Sunniva";
$a[] = "Tove";
$a[] = "Unni";
$a[] = "Violet";
$a[] = "Liza";
$a[] = "Elizabeth";
$a[] = "Ellen";
$a[] = "Wenche";
$a[] = "Vicky";
// get the q parameter from URL
$q = $_REQUEST["q"];
$hint = "";
// lookup all hints from array if $q is different from ""
if ($q !== "") {
$q = strtolower($q);
$len=strlen($q);
foreach($a as $name) {
if (stristr($q, substr($name, 0, $len))) {
if ($hint === "") {
$hint = $name;
} else {
$hint .= ", $name";
}
}
}
}
// Output "no suggestion" if no hint was found or output correct values
echo $hint === "" ? "no suggestion" : $hint;
?>