PHP - AJAX und PHP
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
Start typing a name in the input field below:
Suggestions:
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 action="">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname" 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 URL der Parameter q hinzugefügt wird (gethint.php?q="+str)
- Und 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;
?>