AJAX wird verwendet, um interaktivere Anwendungen zu erstellen.
Das folgende Beispiel zeigt, wie die Webseite mit dem Webserver kommuniziert, wenn der Benutzer Zeichen in das Eingabefeld eingibt:
Wenn der Benutzer Zeichen in das Eingabefeld oben eingibt, wird die Funktion „showHint()“ ausgeführt. Diese Funktion wird durch das Ereignis „onkeyup“ ausgelöst:
<html><head><script>function showHint(str){ if (str.length==0) { document.getElementById("txtHint").innerHTML="" } if (window.XMLHttpRequest) { / / Von den Browsern IE7+, Firefox, Chrome, Opera, Safari ausgeführter Code xmlhttp=new XMLHttpRequest( } else { //IE6, IE5 Vom Browser ausgeführter Code xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("txtHint" ).innerHTML=xmlhttp.responseText; } } xmlhttp.open("GET","gethint.php?q="+str,true); xmlhttp.send();}</script></head><body><p><b>Im Eingabefeld Geben Sie einen Namen ein:</b></p><form> Name: <input type="text" onkeyup="showHint(this.value)"></form><p>Rückgabewert: <span id="txtHint"></span></p></body></html>Erklärung des Quellcodes:
Wenn das Eingabefeld leer ist (str.length==0), löscht diese Funktion den Inhalt des txtHint-Platzhalters und beendet die Funktion.
Wenn das Eingabefeld nicht leer ist, führt showHint() die folgenden Schritte aus:
Erstellen Sie ein XMLHttpRequest-Objekt
Erstellen Sie eine Funktion, die ausgeführt wird, wenn die Serverantwort bereit ist
Senden Sie eine Anfrage an eine Datei auf dem Server
Bitte beachten Sie den am Ende der URL hinzugefügten Parameter (q) (der den Inhalt des Eingabefelds enthält).
Die oben über JavaScript aufgerufene Serverseite ist eine PHP-Datei mit dem Namen „gethint.php“.
Der Quellcode in „gethint.php“ überprüft das Namensarray und gibt die entsprechenden Namen an den Browser zurück:
<?php// Füllen Sie das Array mit Namen $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[]="Violett";$a[]="Liza";$a[]="Elizabeth";$a[]="Ellen";$a[]="Wenche ";$a[]="Vicky";//Q von der Anforderungs-URL-Adresse abrufen Parameter $q=$_GET["q"];//Überprüfen Sie, ob ein passender Wert vorhanden ist, wenn q>0if (strlen($q) > 0){ $hint=""; for($i=0; $ i< count($a); $i++) { if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q)))) { if ($hint==" ") { $hint=$a[$i]; } else { $hint=$hint." , ".$a[$i]; } } }}// Wenn es keinen passenden Wert gibt, setzen Sie die Ausgabe auf „kein Vorschlag“. " if ($ hint == ""){ $response="kein Vorschlag";}else{ $response=$hint;}//Rückgabewert ausgeben echo $response;?>Erläuterung: Wenn JavaScript Text sendet (z. B. strlen($q) > 0), geschieht Folgendes:
Finden Sie Namen, die mit den von JavaScript gesendeten Zeichen übereinstimmen
Wenn keine Übereinstimmung gefunden wird, setzen Sie die Antwortzeichenfolge auf „Kein Vorschlag“.
Wenn ein oder mehrere übereinstimmende Namen gefunden werden, legen Sie die Antwortzeichenfolge mit allen Namen fest
Senden Sie die Antwort an den Platzhalter „txtHint“.
Wenn Ihre asynchrone Anfrage domänenübergreifend sein muss, können Sie sich Folgendes ansehen: PHP Ajax Cross-Domain-Problemlösung.