Einfach dynamisch

Teil 2: Tipps & Tricks für Ajax

Im nächsten Schritt wird mithilfe der Funktion GetXmlHttpObject() der Browser Support für Ajax überprüft.

function GetXmlHttpObject()
{
var xmlHttp=null;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject
("Msxml2.XMLHTTP");
}
catch (e)
{
xmlHttp=new ActiveXObject
("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}

Dabei werden die unterschiedlichen Browser durchgetestet und auf Basis der Funktion XMLHttpRequest beziehungsweise beim Internet Explorer mithilfe des entsprechenden Active-X-Objects die Kompatibilität ermittelt.

Erhalten Sie einen Initialwert zurück, unterstützt der aufrufende Browser kein Ajax. Ansonsten wird im nächsten Schritt der Suchstring für die PHP-Funktion suche Hinweis auf Basis des Eingabewerts sowie eine zufällig generierte ID zusammengebaut.

xmlHttp.onreadystatechange speichert den aktuellen Wert, der vom Server gekommen ist, zwischen. Dazu bedient sich die Eigenschaft der Funktion stateChanged.

function stateChanged() {
if (xmlHttp.readyState==4)
{
document.getElementById
("txtVorschlag").innerHTML=xmlHttp.responseText;
}
}

An dieser Stelle wird gewartet, bis die Anfrage komplett ist und anschließend der ermittelte Wert dem Feld txtVorschlag zugewiesen.

Die eigentliche Abfrage auf Basis des PHP-Skripts sucheHinweis.php erfolgt in den nächsten beiden Zeilen xmlHttp.open("GET",url,true); und xmlHttp.send(null); Die Anfrage wird somit direkt gesendet und nicht auf eine Antwort gewartet. Diese wird - wie bereits erwähnt - über xmlHttp.readyState==4 zurückgemeldet und dem Text zugewiesen.

Innerhalb des Skripts wird letzten Endes nur das Array a$ mit der übermittelten Zeichenkette verglichen. Gibt es Übereinstimmungen bei den Anfängen des Suchstrings und Einträgen des Arrays, so werden diese gesammelt und anschließend der Variablen antwort übergeben.

Mehr zum Thema

Cover Internet Magazin 6/2010
Praxis-Knowhow für Web-Profis

Ab dem 14. Mail finden Sie die neue Ausgabe des Internet Magazins mit folgenden Themen am Kiosk: Wordpress als CMS einsetzen: Stabil, ausgereift,…
Inhaltsverzeichnis Internet Magazin 7/2010
Praxis-Knowhow für Web-Profis

Ab dem 14. Mail finden Sie die neue Ausgabe des Internet Magazins mit folgenden Themen am Kiosk: HTML5 & CSS3 schon jetzt: Alle neuen Features ohne…
Mobile Webseiten mit jQuery Mobile
Design für Smartphones

Sie wollen eine mobile Webseite oder App erstellen? jQuery Mobile bietet Funktionen und Optik, die für die mobile Nutzung unverzichtbar sind. Zudem…
Mobile Webseiten mit jQuery Mobile
Design für Smartphones

Sie wollen Ihre mobile Webseite übersichtlich gestalten? Wir zeigen Ihnen, wie Sie mit jQuery Mobile ganz einfach Listen, Buttons und eine…
Mobile Webseiten mit jQuery Mobile
Design für Smartphones

Sie wollen Ihrer mobilen Webseite ein individuelles Aussehen geben oder beim Laden der Seite eine Meldung anzeigen lassen? Wir zeigen Ihnen, wie Sie…