AJAX- PHP-Beispiel
AJAX wird verwendet, um interaktivere Anwendungen zu erstellen.
AJAX-PHP-Beispiel
Das folgende Beispiel zeigt, wie eine Webseite mit einem Webserver kommunizieren kann, während ein Benutzer Zeichen in ein Eingabefeld eingibt:
Beispiel
Beginnen Sie mit der Eingabe eines Namens in das Eingabefeld unten:
Beispiel erklärt
Wenn im obigen Beispiel ein Benutzer ein Zeichen in das Eingabefeld eingibt, wird eine Funktion namens "showHint()" ausgeführt.
Die Funktion wird durch das Ereignis onkeyup ausgelöst.
Hier ist der HTML-Code:
Beispiel
<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>
Code-Erklärung:
Prüfen Sie zunächst, ob das Eingabefeld leer ist (str.length == 0). Wenn dies der Fall ist, löschen Sie den Inhalt des txtHint-Platzhalters und beenden Sie die Funktion.
Wenn das Eingabefeld jedoch nicht leer ist, gehen Sie wie folgt vor:
- Erstellen Sie ein XMLHttpRequest-Objekt
- Erstellen Sie die Funktion, die ausgeführt werden soll, wenn die Serverantwort bereit ist
- Senden Sie die Anfrage an eine PHP-Datei (gethint.php) auf dem Server
- Beachten Sie, dass der Parameter q gethint.php?q="+str hinzugefügt wird
- Die str-Variable enthält den Inhalt des Eingabefelds
Die PHP-Datei - "gethint.php"
Die PHP-Datei prüft ein Array von Namen und gibt die entsprechenden Namen an den Browser zurück:
<?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;
?>