Vom einfachen AJAX-Request zum komplexen Objektaustausch mit JSON mittels jQuery

“Asynchronous JavaScript and XML” kurz AJAX ist die asynchrone Datenübertragen zwischen Client und Server. Dabei wird ein HTTP-Request abgeschickt, ohne ein komplettes Neu laden der Seite zu erzwingen. Es werden nur Teile nachgeladen, welche auch wirklich benötigt werden.

Anhand einer Beispielanwendung wird in diesem Tutorial vorgestellt, wie verschiedene Arten der Datenübertragung per AJAX möglich sind. Mittels Browser (Client) und einer PHP-Anwendung (Server) werden drei verschiedene Möglichkeiten vorgestellt, wie man Daten per Client und Server austauschen kann.

Das Beispielszenario

Als Beispiel soll eine einfach gestalte HTML-Seite dienen, welche drei Buttons besitzt und in Infoboxen die Ergebnisse erscheinen sollen. Dabei kommen die Technologien HTML5, CSS, jQuery und für eine hübsche Darstellung mit dem CSS-Framework Bootstrap zum Einsatz.

ajax_tutorial_example

Für ganz Ungeduldige kann auch der Projektordner am Ende des Artikels gedownloadet werden. Der Code ist recht gut strukturiert und auch kommentiert ;) .

Das Szenario wurde mittels Netbeans erstellt, welches folgende Ordnerstruktur aufweist:

ajax_tutorial_netbeans

Die Ansicht

Innerhalb der index.html werden die AJAX-Aufrufe mittels Buttons ausgeführt, welche verschiedene Aufrufe starten und unterschiedliche Ergebnisse liefern.

<!DOCTYPE html>
<html>
	<head>
		<title>AJAX-Tutorial</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">