AJAX Beispiel

AJAX ermöglicht das Ändern einer Webseite ohne sie komplett neu zu laden. Anbei ein simples Beispiel, bei welchem das Klicken eines Buttons, Daten aus einer externen Quelle holt und in dieser Seite abfüllt.

Zum Einsatz kommt dabei JavaScript, jQuery und Daten im JSON-Format.

Durch das drücken des Buttons "Hole Daten" wird ein AJAX-Aufruf ausgelöst, welcher Daten von einer bestimmten URL abholt und diese in die untere Tabelle abfüllt. Dabei wird nur die Tabelle mit den Daten erneuert.

Dieser Code ist nur ein simples Beispiel. Interessante Zeilen:

• Zeile 2: Der Button erhält eine Funktion, die beim Klicken ausgeführt wird.
• Zeile 5: Die Tabelle wird geleert.
• Zeile 8: Mit getJSON() wird der AJAX-Aufruf auf den Webserver gemacht.
• Zeile 13: Die neuen Zeilen werden der Tabelle angehängt.

Für das Beispiel wurde eine simple Datei im JSON-Format auf dem Webserver abgelegt. Dieser strukturierte Text entspricht der Serialisierung eines JavaScript-Objekts (Attribut-Werte Paaren). Es ist quasi das Standardformat für den Datenaustausch zwischen Anwendungen.