AJAX PHP Voorbeeld

AJAX wordt gebruikt om interactievere toepassingen te maken.

AJAX PHP Voorbeeld

Hieronder wordt getoond hoe een webpagina communiceert met een webserver wanneer de gebruiker tekens invoert in het invoerveld:

Voorbeeld

Voer a.u.b. letters A-Z in in het onderstaande invoerveld:

Naam:

Zoek suggesties:

Uitleg van het voorbeeld

In het bovenstaande voorbeeld wordt de functie "showHint()" uitgevoerd wanneer de gebruiker tekens invoert in het invoerveld.

Deze functie wordt geactiveerd door het onkeyup-evenement.

Hieronder is de HTML-code:

Voorbeeld

<html>
<head>
<script>
function showHint(str) {
    if (str.length == 0) { 
        document.getElementById("txtHint").innerHTML = "";
        return;
    }
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                document.getElementById("txtHint").innerHTML = this.responseText;
            }
        };
        xmlhttp.open("GET", "gethint.php?q=" + str, true);
        xmlhttp.send();
    }
}
</script>
</head>
<body>
<p><b>Voer de naam in onderstaand invoerveld in:</b></p>
<form> 
Voornaam of achternaam：<input type="text" onkeyup="showHint(this.value)">
</form>
<p>Advies:<span id="txtHint"></span></p>
</body>
</html>

Probeer het zelf

Code-exploratie:

Controleer eerst of het invoerveld leeg is (str.length == 0），is dat het geval, dan leegmaken de inhoud van de placeholder van txtHint en verlaat de functie.

Maar, als het invoerveld niet leeg is, voer dan het volgende uit:

  • Maak een XMLHttpRequest-object aan
  • Maak een functie aan die wordt uitgevoerd wanneer de server gereed is
  • Verstuur een verzoek naar de PHP-bestand (gethint.php) op de server
  • Let op: voeg de parameter 'q' toe aan gethint.php
  • De variabele 'str' bewaart de inhoud van het invoerveld

PHP-bestand - "gethint.php"

Deze PHP-bestand controleert de naam array en stuurt vervolgens de overeenkomstige naam terug naar de browser:

<?php
// Naam array
 $a[] = "Ava";
 $a[] = "Brielle";
 $a[] = "Caroline";
 $a[] = "Diana";
 $a[] = "Elise";
 $a[] = "Fiona";
 $a[] = "Grace";
 $a[] = "Hannah";
 $a[] = "Ileana";
 $a[] = "Jane";
 $a[] = "Kathryn";
 $a[] = "Laura";
 $a[] = "Millie";
 $a[] = "Nancy";
 $a[] = "Opal";
 $a[] = "Petty";
 $a[] = "Queenie";
 $a[] = "Rose";
 $a[] = "Shirley";
 $a[] = "Tiffany";
 $a[] = "Ursula";
 $a[] = "Victoria";
 $a[] = "Wendy";
 $a[] = "Xenia";
 $a[] = "Yvette";
 $a[] = "Zoe";
 $a[] = "Angell";
 $a[] = "Adele";
 $a[] = "Beatty";
 $a[] = "Carlton";
 $a[] = "Elisabeth";
 $a[] = "Violet";
// Haal q parameter op uit de URL
$q = $_REQUEST["q"];
$hint = "";
// Bekijk alle hinten in de array, is $q hetzelfde als ""
if ($q !== "") {
    $q = strtolower($q);
    $len=strlen($q);
    foreach($a as $name) {
        if (stristr($q, substr($name, 0, $len))) {
            if ($hint === "") {
                $hint = $name;
            }
                $hint .= ", $name";
            }
         }
    }
}
// Output "geen suggestie" als er geen hint is gevonden of output de juiste waarde
  echo $hint === "" ? "geen suggestie" : $hint;
?>
c.html" -->