Einfache AJAX Anwendung programmieren

Was bedeutet die Abkürzung AJAX? Wie programmiere ich eine AJAX Anwendung? Wie funktioniert AJAX? Was ist der Vorteil von AJAX? Wofür brauche bzw. benutze ich AJAX?

All diese Fragen werden sich Programmierer in den Anfängen von AJAX stellen. Ich werde hier Antworten auf diese Fragen geben und ein generelles AJAX Beispiel einfach erklären.

Zu erst: Was bedeutet die Abkürzung AJAX überhaupt? AJAX bedeutet so viel wie „Asynchronous JavaScript and XML“ welches ein alternatives Konzept zur Datenübertragung darstellt.
Und damit kommen wir zur zweiten Frage: Wie funktioniert AJAX? Normalerweise sendet der Browser eine Anfrage an den Webserver und dieser schickt die geforderten Daten an den Browser zurück. Innerhalb einer AJAX Applikation funktioniert dies anders. Hier wird eine Verbindung hergestellt, die stetig vorhanden ist. Es werden also Daten in Echtzeit ohne Pagereload neu geladen und angezeigt. Browsergames, die nicht auf Flash basieren und Daten ohne Seitenreload anzeigen, benutzen meistens AJAX zur Datenübertragung. Außerdem lassen sich mit AJAX Datenbankänderungen in Echtzeit überwachen und anzeigen.
Auch die Vorteile von AJAX liegen klar auf der Hand: Es werden Daten in Echtzeit verarbeitet und die meist nervigen Seitensprünge und Pagereloads werden vermieden. Es gibt aber auch Nachteile: Für AJAX Anwendungen werden im Gegensatz zu normalen PHP Anwendungen oftmals stärkere Server benötigt, da eine Verbindung gehalten wird und so mehrere Verbindungen gleichzeitig zum Server bestehen.
Weitere grundlegende Informationen zu AJAX bietet Wikipedia. http://de.wikipedia.org/wiki/Ajax_%28Programmierung%29

Nun zur letzten Frage: Wie programmiere ich eine AJAX Anwendung?

Um eine AJAX Anwendung programmieren zu können ist viel Übung notwendig und vor allem ein passender Webspace. Bei der nächsten Übung wird kein besonderer Webspace verlangt, da das Beispiel keinen HTTP-Request hält sondern lediglich die Daten ohne Pagereload überträgt, ändert und anzeigt.

Wie immer kommt erst der komplette Code und dann die Erklärung.

<div id="likebutton" class="likebutton">
					<input type="button" onclick="like();" value="Gefällt mir!"/>
				  </div>';

			 /* === AJAX REquest für den Like Button === */

		  <script type="text/javascript">
			<!--
			function like() {

				var req = null;

				try {
					req = new XMLHttpRequest();
				}
				catch (ms) {
					try {
						req = new ActiveXObject("Msxml2.XMLHTTP");
					}
					catch (nonms) {
						try {
							req = new ActiveXObject("Microsoft.XMLHTTP");
						}
						catch (failed) {
							req = null;
						}
					}
				}

				if (req == null) {
					alert("Error creating request object!");
				}

				var url = 'http://url.de/auzufuerende-skript';
				req.open("GET", url, true);

				req.onreadystatechange = function() {
					switch (req.readyState) {
						case 4:
							if (req.status != 200) {
								alert("Fehler:" + req.status);
							} else {

								var result = '<strong>'+req.responseText+'</strong>';
								document.getElementById('likebutton').innerHTML = result;
							}
							break;

						default:
							return false;
							break;
					}
				};

				req.setRequestHeader("Content-Type",
						"application/x-www-form-urlencoded");
				req.send(null);
			}
			//-->
		</script>

Nun zur Erklärung des Skriptes:

function like() {

}

Dieser Teil erstellt uns eine neue Funktion mit dem Namen „like“, welche bei einem Klick auf den Link „Gefällt mir!“ ausgeführt wird.

var req = null;

				try {
					req = new XMLHttpRequest();
				}
				catch (ms) {
					try {
						req = new ActiveXObject("Msxml2.XMLHTTP");
					}
					catch (nonms) {
						try {
							req = new ActiveXObject("Microsoft.XMLHTTP");
						}
						catch (failed) {
							req = null;
						}
					}
				}

				if (req == null) {
					alert("Error creating request object!");
				}

Hier wird ein neuer HTTP Request gestartet. Falls dieser Versuch scheitert, erscheint die Fehlermeldung „Error creating request object!“. Diese Methode sollte in allen gängigen Browsern und JavaScript Versionen funktionieren.

var url = 'http://url.de/auzufuerende-skript.php?var=123';
				req.open("GET", url, true);

Hier wird das Skript definiert, welches bei der Anfrage ausgeführt werden soll. Hier befindet sich normalerweise ein PHP Skript, welches die Anfrage bearbeitet und einen String als Ausgabe liefert. Optional können Variablen via GET übergeben werden. Aber auch die Übergabe per Sessions sind möglich.
Zum Beispiel könnte in unserem Beispiel das Skript die Ausgabe „Dieser Beitrag gefällt dir jetzt!“ (Bei erfolgreicher Abarbeitung des Skriptes) oder „Fehler!“ (Bei nicht erfolgreicher Abarbeitung des Skriptes) sein. Dieser String würde unseren Button an dieser Stelle ersetzen.

 

req.onreadystatechange = function() {
					switch (req.readyState) {
						case 4:
							if (req.status != 200) {
								alert("Fehler:" + req.status);
							} else {

								var result = '<strong>'+req.responseText+'</strong>';
								document.getElementById('likebutton').innerHTML = result;
							}
							break;

						default:
							return false;
							break;
					}
				};

				req.setRequestHeader("Content-Type",
						"application/x-www-form-urlencoded");
				req.send(null);

Falls bis hier alles erfolgreich abgearbeitet ist, wird nun diese Funktion ausgeführt. Diese Funktion sorgt dafür, dass unser Likebutton-Link gelöscht wird und die Ausgabe des Skriptes an dieser Stelle steht.
Bei erfolgreicher Abarbeitung, zum Beispiel, gibt das Skript „Dir gefällt dieser Beitrag jetzt!“ aus, dieser String steht dort, wo vorher der Likebutton Textlink stand.

Als Abschlusswort möchte ich Euch noch etwas mit auf den Weg geben: AJAX ist zwar schön und gut, aber man sollte trotzdem etwas im Hinterkopf behalten! Erstens sollte auf die Leistung des Servers geachtet werden. Gerade wenn stehende Verbindungen für z.B. ein Echtzeit-Chat-System gebraucht werden. Dort kommt es schnell zu Überlastungen des Servers und zum Zusammenbruch der Webseite. Zweitens sollte man im Hinterkopf behalten, was mit den Benutzern passiert, die Javascript im Browser deaktiviert haben und diejenigen, die einen alten Browser benutzen. Sollen diese von der Webseite ausgesperrt werden? Oder bekommen diese doch eine alternativ Webseite angezeigt? Diese und noch ein paar weitere Fragen sollte man sich also vor der Programmierung eines großen AJAX Projektes stellen.

Marvin Sengera

Hey! Ich bin Marvin Sengera, Inhaber der Internetagentur "Binärfabrik" aus Paderborn. Ich habe mein Bachelorstudium Informatik mit Schwerpunkt Industriespionage an der Hochschule Hamm Lippstadt abgeschlossen und absolviere derzeit meinen Master in Fachrichtung "Technical Entrepreneurship and Innovation". Ich beschäftige mich rund um die Themen Informatik, Innovation & Unternehmensgründung.

Das könnte dich auch interessieren …

Schreibe einen Kommentar