AJAX PHP voorbeeld
AJAX word gebruik om meer interaktiewe toepassings te skep.
AJAX PHP voorbeeld
Die volgende voorbeeld demonstreer hoe 'n webblad met 'n webbediener kan kommunikeer terwyl 'n gebruiker karakters in 'n invoerveld tik:
Voorbeeld
Begin om 'n naam in die invoerveld hieronder te tik:
Voorbeeld Verduidelik
In die voorbeeld hierbo, wanneer 'n gebruiker 'n karakter in die invoerveld tik, word 'n funksie genaamd "showHint()" uitgevoer.
Die funksie word geaktiveer deur die onkeyup-gebeurtenis.
Hier is die HTML-kode:
Voorbeeld
<html>
<head>
<script>
function showHint(str) {
if (str.length == 0) {
document.getElementById("txtHint").innerHTML = "";
return;
} else {
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>Start typing a name in the
input field below:</b></p>
<form>
First name: <input type="text"
onkeyup="showHint(this.value)">
</form>
<p>Suggestions: <span id="txtHint"></span></p>
</body>
</html>
Kode verduideliking:
Kyk eers of die invoerveld leeg is (str.length == 0). As dit is, maak die inhoud van die txtHint-plekhouer skoon en verlaat die funksie.
As die invoerveld egter nie leeg is nie, doen die volgende:
- Skep 'n XMLHttpRequest-objek
- Skep die funksie wat uitgevoer moet word wanneer die bedienerantwoord gereed is
- Stuur die versoek na 'n PHP-lêer (gethint.php) op die bediener
- Let daarop dat q parameter bygevoeg word gethint.php?q="+str
- Die str-veranderlike hou die inhoud van die invoerveld
Die PHP-lêer - "gethint.php"
Die PHP-lêer kontroleer 'n verskeidenheid name, en gee die ooreenstemmende naam (name) terug na die blaaier:
<?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;
?>