Button-Menü

AJAX

Webseiten mit Serverdaten dynamisch anreichern

Ajax steht für Asynchronous JavaScript and XML und bezeichnet eine Gruppe von Technologien, die zusammen das Anpassen der gerade angezeigten Webseite mit Daten vom Webserver ermöglichen, ohne die Webseite insgesamt neu senden zu müssen. Eine der ersten bekannten Anwendungen von Ajax war "Google Suggest", wobei Google intelligente Vorschläge während des Eintippens von Suchbegriffen macht. Generell kann mit Ajax die Benutzung von (Formularen in) Webseiten interaktiver und benutzerfreundlicher gestaltet werden.

Eine Ajax-Interaktion läuft nach folgendem Schema ab:

  • Eine Benutzeraktion löst einen JavaScript-Eventhandler aus (z.B. Feld betreten, Zeichen eingeben, Auswahl in einer Dropdown-Liste, usw.)
  • Die dadurch aufgerufene JavaScript-Funktion sendet im Hintergrund eine Anfrage an den Webserver – das technische Mittel heißt "XMLHttpRequest object".
  • Die hiermit aufgerufene Instanz am Webserver kann ein beliebig ausführbares Skript oder Programm sein, z.B. ein PHP-Skript oder ein Java-Servlet. Es erhält Eingabeparameter, ermittelt die entsprechende Antwort und sendet sie – meist in XML oder JSON (JavaScript Object Notation) formuliert – an den Browser zurück.
  • Im Browser wird diese Antwort in JavaScript abgeholt und die darin enthaltene Information wird durch Anpassung des DOMs der Seite sichtbar gemacht.

Eine von mir programmierte Ajax-Anwendung ist die Tourensuche auf den Seiten von Hauser exkursionen (unten links). Beim Festlegen von Suchbedingungen wird die Anzahl passende Touren sofort angezeigt.

  

Ropeway

Ajax ist nicht verfügbar
in Ihrem Browser.

Auf dieser Website versteckt Ajax meine E-Mail Adresse vor Spambots (Spam Robots – Programme, die das Web automatisch nach E-Mail Adressen absuchen zwecks Versenden von Spam per E-Mail). Meine E-Mail-Adresse wird lediglich am Webserver vorgehalten, und per Ajax nach dem Laden der Seite abgeholt und eingesetzt - um an sie heran zu kommen, müsste ein Spambot den kompletten Ajax-Mechanismus nachbauen!

<title>Ajax - Tim Reeves Internet-Programmierung</title> <meta name= "description" content= "Tim Reeves Internet-Programmierung - Webseiten mit Serverdaten anreichern mittels AJAX - Asynchronous JavaScript a>nd XML" /> <meta name= "keywords" content= "Ajax, JavaScript, XML" /> <meta name= "date" content= "2007-12-29" /> <?php include("../head.inc.php"); $extraOnload = 'browserOnLoad();'; ?> <script type= "text/javascript"> /*<![CDATA[*/ function browserOnLoad() { var obj = getElemId('ajaxeinaus'); xmlhttp = getXMLHttpRequest(); if (obj != null && xmlhttp) obj.firstChild.nodeValue = ''; return; } /*]]>*/ </script> <?php include("../navi.inc.php"); ?> <div class= "content"> <table cellpadding= "0" cellspacing= "0" class= "spalten"> <tr> <td class= "sp3"> <h1>AJAX</h1> <h4 class= "spaltenkopf">Webseiten mit Serverdaten dynamisch anreichern</h4> <p>Ajax steht für <b>A</b>synchronous <b>J</b>avaScript <b>a</b>nd <b>X</b>ML und bezeichnet eine Gruppe von Technologien, die zusammen das Anpassen der gerade angezeigten Webseite mit Daten vom Webserver ermöglichen, ohne die Webseite insgesamt neu senden zu müssen. Eine der ersten bekannten Anwendungen von Ajax war "Google Suggest", wobei Google intelligente Vorschläge während des Eintippens von Suchbegriffen macht. Generell kann mit Ajax die Benutzung von (Formularen in) Webseiten interaktiver und benutzerfreundlicher gestaltet werden.</p> <p>Eine Ajax-Interaktion läuft nach folgendem Schema ab:</p> <ul> <li>Eine Benutzeraktion löst einen JavaScript-Eventhandler aus (z.B. Feld betreten, Zeichen eingeben, Auswahl in einer Dropdown-Liste, usw.)</li> <li>Die dadurch aufgerufene JavaScript-Funktion sendet im Hintergrund eine Anfrage an den Webserver &ndash; das technische Mittel heißt "XMLHttpRequest object".</li> <li>Die hiermit aufgerufene Instanz am Webserver kann ein beliebig ausführbares Skript oder Programm sein, z.B. ein PHP-Skript oder ein Java-Servlet. Es erhält Eingabeparameter, ermittelt die entsprechende Antwort und sendet sie &ndash; meist