AJAX wird verwendet, um dynamischere Anwendungen zu erstellen.
Das folgende Beispiel zeigt Ihnen, wie die Webseite mit dem Webserver kommuniziert, wenn der Benutzer Zeichen in das Eingabefeld eingibt: Bitte geben Sie Buchstaben (A - Z) in das Eingabefeld unten ein:
Versuchen Sie, den Buchstaben a in das Eingabefeld einzugeben:
Sofortige Informationen:
Wenn der Benutzer Zeichen in das Eingabefeld oben eingibt, wird die Funktion „showHint()“ ausgeführt. Diese Funktion wird durch das Ereignis „onkeyup“ ausgelöst:
Funktion showHint ( str ) { var xmlhttp ; wenn ( str . Länge == 0 ) { document.getElementById ( " txtHint " ) . Wenn ( Fenster . XMLHttpRequest ) { // Ausführungscode für den Browser IE7+, Firefox, Chrome, Opera, Safari xmlhttp = neu XMLHttpRequest ( ) ; anders { // IE6-, IE5-Browser-Ausführungscode xmlhttp = neu ActiveXObject ( " Microsoft.XMLHTTP " ) ; xmlhttp.onreadystatechange = function ( ) { Wenn ( xmlhttp . readyState == 4 && xmlhttp . status == 200 ) { document.getElementById ( " txtHint " ) . } xmlhttp . open ( " GET " , " /try/ajax/gethint.php?q= " + str , true ) ;Quellcode-Analyse:
Wenn das Eingabefeld leer ist str.length==0 , löscht die Funktion den Inhalt des txtHint- Platzhalters und beendet die Funktion.
Wenn das Eingabefeld nicht leer ist, führt showHint() die folgenden Aufgaben aus:
Erstellen Sie ein XMLHttpRequest- Objekt
Funktion ausführen, wenn die Serverantwort bereit ist
Senden Sie die Anfrage an eine Datei auf dem Server
Beachten Sie, dass wir der URL einen Parameter q (mit dem Inhalt des Eingabefelds) hinzugefügt haben
Die vom oben genannten JavaScript aufgerufene Serverseite ist eine ASP-Datei mit dem Namen „gethint.asp“.
Im Folgenden erstellen wir zwei Versionen der Serverdatei, eine in ASP und die andere in PHP.
Der Quellcode in „gethint.asp“ prüft ein Array von Namen und gibt die entsprechenden Namen an den Browser zurück:
<%response.expires=-1dim a(30)'Array auffüllen mit namesa(1)="Anna"a(2)="Bretagne"a(3)="Aschenputtel"a(4)="Diana"a(5)="Eva"a(6)="Fiona"a( 7)="Gunda"a(8)=" Hege"a(9)="Inga"a(10)="Johanna"a(11)="Kitty"a(12)="Linda"a(13)="Nina"a(14)="Ophelia" a(15)="Petunia"a( 16)="Amanda"a(17)="Raquel"a(18)="Cindy"a(19)="Doris"a(20)="Eve"a(21)="Evita"a(22) ="Sunniva"a(23)="Tov e"a(24)="Unni"a(25)="Violett"a(26)="Liza"a(27)="Elizabeth"a(28)="Ellen"a(29)="Wenche" a(30)="Vicky"'get Der q-Parameter von URLq=ucase(request.querystring("q"))'sucht alle Hinweise aus dem Array, wenn die Länge von q>0, wenn len(q)>0, dann hint="" für i=1 bis 30, wenn q=ucase (mid(a(i),1,len(q))) then if hint="" then hint=a(i) else hint=hint & " , " & a(i) end if end if nextend if'Ausgabe „kein Vorschlag“, wenn kein Hinweis gefunden wurde, oder die korrekten Werte ausgeben, wenn hint="" dann Response.write("kein Vorschlag"), sonst Antwort.write(hint)end, wenn%>Der folgende Code ist in PHP geschrieben und hat die gleiche Wirkung wie der ASP-Code oben.
<?php// Array auffüllen mit Namen$a[]="Anna";$a[]="Bretagne";$a[]="Aschenputtel";$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[]="An ve";$a[]="Unni";$a[]="Violet";$a[]="Liza";$a[]="Elizabeth";$a[]="Ellen";$a []="Wenche";$a[]="Vicky";//get der q-Parameter von URL$q=$_GET["q"];//suche alle Hinweise aus dem Array, wenn die Länge von q>0if (strlen($q) > 0){ $hint=""; 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] } }}// Setze die Ausgabe auf „no Vorschlag" wenn kein Hinweis gefunden wurde// oder auf die richtigen Werteif ($hint == ""){ $response="kein Vorschlag";}else{ $response=$hint;}//das Antwortecho ausgeben $response;?>