Posted on Leave a comment

AJAX: dynamische Internetseiten mit hoher Nutzerfreundlichkeit erstellen

AJAX: dynamische Internetseiten mit hoher Nutzerfreundlichkeit erstellen

Das Internet konnte seine Bedeutung in den letzten Jahrzehnten stark ausbauen. Von einem Instrument zum Abruf wissenschaftlicher Werke ist es zum bestimmenden Medium für die Wirtschaft, die Freizeitgestaltung und für die Steuerung technischer Anlagen geworden. Einer der wesentlichen Gründe für diese Entwicklung stellt die ständige Verbesserung der verwendeten Technik dar. Während die ersten Internetseiten nur statische Informationen anboten und eine Interaktion mit dem Anwender nur in sehr eingeschränktem Maße möglich war, entstanden nach einiger Zeit auch zahlreiche dynamische Angebote. Diese präsentieren individuell zusammengestellte Inhalte, die sich auch im Laufe der Zeit verändern können. Außerdem bieten sie zahlreiche Interaktionsmöglichkeiten. Hierfür kommen insbesondere die Programmiersprachen JavaScript und PHP zum Einsatz.

Dennoch bieten beide Techniken gewisse Probleme, die entweder den Informationsaustausch erschweren oder den Nutzungskomfort beeinträchtigen. Um diese Einschränkungen zu umgehen, wurde AJAX entwickelt. Diese Abkürzung steht für Asynchronous JavaScript and XML. Das zeigt bereits, dass diese Technik ebenfalls auf JavaScript beruht. Sie ermöglicht bei der Gestaltung von JavaScript-Seiten einen deutlich besseren Informationsfluss und führt dadurch zu einem höheren Anwendungskomfort. Diese Technik wurde 2005 präsentiert. Mittlerweile wenden sie unzählige Internetseiten an.

JavaScript und PHP: die klassischen Methoden für dynamische Internetseiten

Um die Vorteile von AJAX zu verstehen, ist es sinnvoll, zunächst auf die bisherigen Techniken für die Gestaltung dynamischer Internetseiten einzugehen. Auf diese Weise werden die jeweiligen Probleme bei der Anwendung deutlich und es wird später ersichtlich, welche Vorteile AJAX in diesem Bereich bietet.

JavaScript: clientseitige Programme für die Ausführung im Browser

Zahlreiche Internetseiten verwenden JavaScript. Hierbei handelt es sich um eine Scriptsprache, die Sie in eine HTML-Seite einbinden können. Das bietet vielfältige Möglichkeiten. Beispielsweise können Sie auf diese Weise die Darstellung der Inhalte verändern oder auf Knopfdruck neue Texte oder Grafiken in Ihre Seite einfügen lassen. Außerdem kann das Programm Eingaben vom Anwender abfragen und beliebige Berechnungen damit durchführen. Die Ergebnisse können Sie daraufhin direkt auf der Seite präsentieren. Diese Aktionen erfolgen unmittelbar. Die Wartezeit ist dabei für den Anwender praktisch nicht wahrnehmbar.

JavaScript ermöglicht demnach die Nutzung vieler praktischer Funktionen und damit die Erstellung nützlicher und interessanter Internetseiten. Ein Problem entsteht jedoch stets dann, wenn es um die Speicherung der Daten oder um die Einbindung aktueller Informationen geht.

Zunächst behandeln wir das Thema der Datenspeicherung. Bei einer JavaScript-Seite handelt es sich um ein Programm, das auf Ihrem Rechner ausgeführt wird. Bei vielen Internetseiten wissen Sie jedoch nicht, welche Intentionen der Ersteller verfolgt. Daher kann es eine erhebliche Gefahr mit sich bringen, wenn das Programm einen direkten Zugriff auf Ihren Computer erhält. Um die Sicherheit zu erhöhen, werden JavaScript-Programme nur in der geschützten Browser-Umgebung ausgeführt. Das bedeutet, dass das Programm keinen vollständigen Zugriff auf das Gerät erhält. Das beeinträchtigt die Datenspeicherung. Die Möglichkeit, Daten per JavaScript abzuspeichern, sind nur sehr gering. Wenn der Anwender Informationen über eine JavaScript-Seite eingibt, gehen diese daher größtenteils verloren, wenn Sie er eine neue Seite aufruft oder wenn er den Browser schließt.

Außerdem ist es mit einer JavaScript-Seite schwer, veränderliche externe Informationen zu verarbeiten. Zwar dient JavaScript der Erstellung dynamischer Internetseiten. Das bezieht sich jedoch nur auf die Werte, die Sie selbst als Anwender eingeben. Wenn Sie beispielsweise eine Seite für die gemeinsame Bearbeitung einer Aufgabe in einem Unternehmen einrichten wollen, reicht dies nicht aus. Für den Verlauf des Projekts ist es nämlich nicht nur notwendig, Ihre eigenen Eingaben auszuwerten, sondern auch die der beteiligten Kollegen. Aus diesen beiden Aspekten wird deutlich, das JavaScript bei vielen Projekten erhebliche Einschränkungen mit sich bringt.

PHP: serverseitige Programmierung für dynamische Internetseiten

Eine weitere Möglichkeit für die Erstellung dynamischer Internetseiten stellt die Verwendung der Programmiersprache PHP dar. Diese wird auf dem Server ausgeführt. Wenn Sie eine PHP-Seite aufrufen, führt der Server das entsprechende Script aus. Dieses erstellt in der Regel eine HTML-Seite, die dann an den Browser übermittelt und dort angezeigt wird.

Mit PHP können Sie die Probleme, die die Verwendung von JavaScript mit sich bringt, umgehen. Da hierbei davon auszugehen ist, dass der Ersteller der Seite identisch mit dem Serverbetreiber ist – oder zumindest mit dessen Einverständnis handelt – kann man davon ausgehen, dass die Programme nicht den eigenen Server schädigen sollen. Daher sind bei serverseitigen Programmen keine umfassenden Sicherheitsvorkehrungen wie bei JavaScript notwendig. Aus diesem Grund ist es erlaubt, dass ein PHP-Programm Daten auf dem Server abspeichert. Außerdem können auch andere Anwender ihre Inhalte auf dem Server hinterlegen. Daher ist auch ein Zugriff auf externe Informationen möglich. Das ist eine wichtige Voraussetzung für die Zusammenarbeit mehrerer Nutzer.

Doch bringt auch PHP einige Probleme mit sich. Die Seite, die Sie hierbei erhalten, wird zwar dynamisch erzeugt. Wenn sie einmal an den Browser übermittelt wurde, ist sie jedoch nicht mehr veränderbar. Wenn Sie einen Eintrag an den Server übermitteln oder eine neue Information abrufen möchten, ist es daher notwendig, die Seite komplett neu zu gestalten und erneut zu übermitteln. Dabei wird sie nach und nach im Browser aufgebaut, was erhebliche Wartezeiten und damit eine starke Einschränkung der Nutzerfreundlichkeit mit sich bringen kann. Insbesondere bei einer schlechten Internetverbindung oder bei großen Datenmengen wirkt dies sehr störend. Es kommt hinzu, dass Sie während dieser Wartezeit auch die bisherige Seite nicht mehr nutzen können. Das führt dazu, dass diese Unterbrechung besonders deutlich spürbar wird.

Noch stärker ist die Beeinträchtigung, wenn mehrere Anwender gemeinsam an einem Projekt arbeiten und Inhalte dazu beitragen. Für die Nutzung ist es hierbei wichtig, stets auf die aktuellen Informationen der anderen Nutzer zuzugreifen. Allerdings kann das Programm nicht wissen, zu welchem Zeitpunkt diese eintreffen. Eine Möglichkeit besteht nun darin, dass der Anwender die Seite selbst gelegentlich aktualisiert, wenn er neue Informationen erwartet. Das schränkt den Anwendungskomfort jedoch deutlich ein. Eine andere Alternative besteht darin, dass sich die Seite immer wieder selbstständig neu lädt und dabei die aktuellen Daten der anderen Anwender abruft. Da hierbei jedoch jedes Mal die beschriebene Wartezeit auftritt, führt das ebenfalls zu erheblichen Einschränkungen.

AJAX: für ein perfektes Zusammenspiel zwischen serverseitiger und clientseitiger Programmierung

AJAX bietet für die beschriebenen Probleme eine praktische Lösung. Diese Technik schlägt eine Brücke zwischen der serverseitigen und der clientseitigen Programmierung. Sie erlaubt es, nur einen Teilbereich der Seite neu zu laden. Daher können Sie den Abruf nur auf die Bereiche beschränken, in denen tatsächlich neue Informationen notwendig sind. Der Rest der Seite bleibt unverändert. Das reduziert die Ladezeiten deutlich.

Darüber hinaus läuft der Abruf der neuen Daten asynchron ab. Das bedeutet, dass die neuen Informationen im Hintergrund geladen werden, während die Seite nutzbar bleibt. Bei der bisherigen Vorgehensweise verschwinden alle Inhalte, sobald die Aktualisierung beginnt. Erst wenn die neuen Daten eingetroffen sind, wird die Seite wieder aufgebaut. Wenn Sie AJAX verwenden, bleibt die bisherige Darstellung so lange erhalten, bis die neuen Informationen komplett eingetroffen sind. Die Neugestaltung erfolgt dann innerhalb von Sekundenbruchteilen. Das führt dazu, dass die Seite durchgängig nutzbar ist.

Auch bei einer selbstständigen Aktualisierung ist AJAX ausgesprochen hilfreich. Stellen Sie sich vor, Sie geben gerade Daten in ein Eingabefeld ein. Wenn sich die komplette Seite automatisch aktualisiert, kann es vorkommen, dass dieser Prozess mitten während der Eingabe stattfindet. Das ist sehr ärgerlich. Mit AJAX können Sie jedoch nur die Bereiche aktualisieren, die die neuen Informationen anzeigen sollen. Da das Eingabefeld davon nicht betroffen ist, kann der Anwender dieses ohne Unterbrechung weiterhin nutzen. Das sorgt für einen optimalen Nutzungskomfort. Aus diesem Grund eignet sich AJAX hervorragend für Dienste, die mehrere Anwender gleichzeitig nutzen und dabei miteinander interagieren – beispielsweise für Chat-Programme.

Beispiele für die Anwendung von AJAX

Nachdem die Vorteile von AJAX vorgestellt wurden, sollen nun abschließend noch zwei einfache Beispiele die Anwendungsmöglichkeiten verdeutlichen. Zunächst gestalten wir hierfür eine Seite, die einen Inhalt aus einer Text-Datei abruft, die auf einem Server hinterlegt ist. Das stellt wahrscheinlich die einfachste Anwendungsmöglichkeit für AJAX dar. Hierfür ist nur eine JavaScript-Seite erforderlich. Im zweiten Beispiel binden wir dann auch noch die Programmiersprache PHP ein. Dabei soll die Seite eine Eingabe des Anwenders an einen Server übermitteln, ohne dabei die Seite neu zu laden. Ein PHP-Programm nimmt den Inhalt dann auf und speichert ihn dauerhaft auf dem Server ab.

Um die Funktionsweise von AJAX zu demonstrieren, ist es notwendig, auf einen Webserver zuzugreifen. Wenn Sie Zugang zu einem eigenen Webserver haben, können Sie die entsprechenden Dateien hier hochladen und dann über deren URL mit Ihrem Browser darauf zugreifen. Sollte dies nicht der Fall sein, bietet es sich an, einen lokalen Server zu installieren. Dieser simuliert die Funktionen eines Webservers auf Ihrem eigenen Computer. Das beliebteste Programm für diese Zwecke trägt den Namen XAMPP. Dieses können Sie unter dem folgenden Link kostenfrei herunterladen: https://www.apachefriends.org/de/download.html.

Einen Inhalt aus einer Textdatei abrufen

Das erste Beispiel soll zeigen, wie Sie einen Inhalt aus einer Textdatei abrufen können, die auf dem Server gespeichert ist und diesen in Ihre Seite einbinden. Dazu müssen Sie zunächst eine entsprechende Datei erstellen. Darin können Sie einen beliebigen Inhalt einfügen. In unserem Beispiel verwenden wir den folgenden Text: „Hier steht ein beliebiger Inhalt.“ Speichern Sie diese Datei unter der Bezeichnung daten.txt ab. Wenn Sie über Zugang zu einem Webserver verfügen, können Sie die Datei dort hochladen. Wenn Sie XAMP nutzen, müssen Sie zunächst das Installationsverzeichnis der Software und darin das Unterverzeichnis htdocs aufrufen. Für eine bessere Ordnung ist es sinnvoll, ein weiteres Unterverzeichnis zu erzeugen – beispielsweise mit der Bezeichnung ajax. Speichern Sie die Textdatei darin ab.

Nun können Sie eine einfache HTML-Seite mit etwas JavaScript-Code erstellen. Um dieses Beispiel so unkompliziert wie möglich zu gestalten, beschränken wir uns hierbei auf die relevanten Elemente. Die Seite soll eine Überschrift erhalten und ein Textarea-Feld enthalten, in dem wir später die Ausgabe vornehmen. Außerdem erzeugen wir einen Button. Dieser soll bei einem Klick die Funktion laden() aufrufen. Damit ist der Inhalt des Body-Bereichs bereits abgeschlossen. Er sieht wie folgt aus:

Im Head-Bereich geben wir nun zunächst einen Titel für die Seite vor und gestalten daraufhin die Funktion laden(). Wenn wir mit AJAX arbeiten, müssen wir immer zunächst ein Objekt des Typs XMLHttpRequest erzeugen. Daher sieht unser erster Befehl so aus:

let ajaxObj = new XMLHttpRequest();

Dieses Objekt enthält ein Attribut mit der Bezeichnung onreadystatechange. Darin können Sie den Namen einer Funktion angeben, die bei jeder Statusänderung aufgerufen werden soll. Das wird später noch genauer erklärt. Vorerst müssen Sie diesem Attribut lediglich den Wert ausgeben zuweisen. Später erstellen wir noch eine gleichnamige Funktion, die bei einer entsprechenden Statusänderung ausgeführt werden soll. Die zugehörige Befehlszeile sieht demnach wie folgt aus:

ajaxObj.onreadystatechange = ausgeben;

Nun müssen Sie die open()-Methode auf dieses Objekt anwenden. Diese benötigt drei Übergabewerte. Zunächst müssen Sie die Art der Datenübermittlung vorgeben. Diese spielt in unserem Beispiel jedoch keine Rolle, sodass wir willkürlich die Methode GET vorgeben. Danach steht der Name der Textdatei, die wir aufrufen möchten. Schließlich müssen Sie noch eine boolesche Variable vorgeben. Wenn deren Wert true beträgt, bleibt die Seite auch während der Übertragung der Daten nutzbar. Da gerade diese Eigenschaft einen der wesentlichen Vorteile von AJAX darstellt, ist die Verwendung dieses Werts üblich. Wenn Sie hier false vorgeben, kommt es zu einer synchronen Ausführung. Das bedeutet, dass die Seite blockiert wird, während sie die angeforderten Daten lädt:

ajaxObj.open("GET", "daten.txt", true);

Anschließend müssen Sie nur noch die close()-Methode aufrufen, um die Verbindung wieder zu schließen. Damit ist die Funktion laden() abgeschlossen:

Nun benötigen wir nur noch die Funktion ausgeben(). Diese wird bei jeder Statusänderung aufgerufen. Das AJAX-Objekt erfährt jedoch zahlreiche Statusänderungen. Den neuen Inhalt wollen wir allerdings nur dann anzeigen, wenn der komplette Inhalt geladen ist. Diese Information können wir aus dem Attribut readyState abrufen. Wenn dessen Wert 4 beträgt, ist die Seite geladen. Außerdem kann es hierbei zu Fehlern kommen. Die Information hierzu befindet sich im Attribut status. Wenn unser Programm die Daten korrekt abgerufen hat, erhält dieses den Wert 200. Da wir die Daten nur dann in die Seite einfügen möchten, wenn sie vollständig und korrekt geladen wurden, stellen wir den Inhalt der gesamten Methode in eine if-Abfrage mit der folgenden Bedingung:

if (this.readyState == 4 && this.status == 200)

Die einzige Aufgabe dieser Methode besteht darin, den erhaltenen Inhalt in das Textarea-Feld einzufügen. Da wir diesem eine ID gegeben haben, können wir es über die GetElementById()-Methode aufrufen. Der Inhalt der abgerufenen Textdatei befindet sich im Attribut responseText. Daher fügen wir den folgenden Befehl ein:

document.getElementById("ausgabe").innerHTML = this.responseText;

Damit ist auch die Funktion ausgeben() abgeschlossen:

Nun können wir das Programm ausprobieren. Dazu müssen wir es zunächst im gleichen Verzeichnis wie die Textdatei abspeichern. Wenn Sie XAMPP verwenden, müssen Sie das Programm zunächst starten (über die Datei xampp-control.exe im entsprechenden Installationsverzeichnis) und daraufhin in die Adresszeile Ihres Browsers den Begriff http://localhost gefolgt vom gewählten Unterverzeichnis und vom Dateinamen eingeben – in unserem Beispiel http://localhost/ajax/ajaxbeispiel1.html. Wenn Sie einen Webserver verwenden, benötigen Sie lediglich die URL der Seite. Die folgende Abbildung zeigt, dass nun der Inhalt der externen Textdatei erscheint, wenn Sie auf den Button klicken. Abschließend ist nochmals der komplette Programmcode angegeben.

Eine Nutzereingabe im Hintergrund auf dem Server abspeichern

Im zweiten Beispiel stellen wir vor, wie Sie mit AJAX einen Inhalt, den der Anwender eingegeben hat, auf einem Webserver abspeichern können. Hierbei kommt nun nicht mehr nur JavaScript zum Einsatz, sondern auch PHP. Doch selbst wenn Sie diese Sprache noch nicht beherrschen, sollte es kein großes Problem darstellen, das Beispiel zu verstehen. Der verwendete PHP-Code ist ausgesprochen einfach. Eigentlich wäre es hierbei sinnvoll, den übermittelten Wert in einer Datenbank abzuspeichern. Da dies den Aufwand jedoch extrem erhöhen würde, verwenden wir zu diesem Zweck in unserem Beispiel eine einfache Textdatei.

Die Seite, die wir zunächst erstellen, ist ähnlich wie im vorigen Beispiel aufgebaut. Allerdings müssen wir auch einige kleine Details anpassen. Statt einem Textarea-Feld verwendet sie ein einfaches Input-Feld, da hierbei eine einzelne Zeile für die Eingabe ausreicht. Der Button ruft wieder die Funktion laden() auf. Allerdings übergibt er dieser nun einen Wert – den Inhalt des Eingabefeldes:

Die Funktion laden() ist beinahe identisch aufgebaut wie im vorigen Beispiel. Daher ist es nicht notwendig, alle Einzelheiten nochmals genau zu erklären. Lediglich die Werte beim Aufruf der Methode open() weisen einige Unterschiede auf. Zum einen rufen wir hierbei nun nicht die Textdatei auf, sondern die Datei speichern.php. Dieser wollen wir nun jedoch einen Wert übermitteln. Dafür bestehen mehrere Möglichkeiten. In unserem Beispiel verwenden wir die GET-Methode. Dabei hängen wir den übermittelten Wert nach einem Fragezeichen an die URL an. Um darauf zugreifen zu können, müssen wir ihm aber auch einen Namen geben. Hierfür verwenden wir den Bezeichner inhalt. Daher geben wir folgenden Wert für die URL vor: “speichern.php?inhalt=” Nun müssen wir noch den eigentlichen Wert hinzufügen. Diesen haben wir der Funktion laden() bei deren Aufruf als Übergabewert übergeben. Wenn wir ihn unter der Bezeichnung eingabe abspeichern, müssen wir diese Variable noch an die URL anhängen: “speichern.php?inhalt=” + eingabe. Der Rest der Funktion bleibt unverändert. Sie sieht dann wie folgt aus:

Auch bei der Funktion ausgeben() sind die Veränderungen nur minimal. Sie müssen nun lediglich die ID anpassen und darauf achten, dass Sie auf den Inhalt des input-Feldes per value-Attribut zugreifen:

Damit ist die HTML-Datei bereits fertiggestellt:

Nun müssen Sie noch die PHP-Datei für die Auswertung der Daten erstellen. Diese sollten Sie unter der Bezeichnung speichern.php im gleichen Ordner wie die soeben erstellte Datei abspeichern. Wie immer bei PHP-Scripts beginnen wir unseren Code mit dem Ausdruck <?php. Danach öffnen wir mit folgendem Befehl eine Textdatei:

$handle = fopen("erhalteneDaten.txt","a");

Der Wert, den wir über die URL übermittelt haben, wird automatisch im Array $_REQUEST abgespeichert. Darin können wir über den verwendeten Schlüssel inhalt auf ihn zugreifen. Wir schreiben ihn per fputs-Befehl in die Datei und fügen dann noch einen Zeilenumbruch hinzu:

fputs($handle, $_REQUEST["inhalt"]."\n");

Nun müssen wir die Datei nur noch schließen und per print-Befehl eine Ausgabe erstellen, die wir an die Seite zurücksenden wollen. Damit ist auch die PHP-Datei bereits fertiggestellt:

Nun können Sie das Programm ausführen. Wenn Sie einen Text eingeben und den Button betätigen, erkennen Sie nicht nur, dass hier nun die Nachricht aus dem PHP-Programm erscheint. Wenn Sie den Ordner aufrufen, in dem Sie die Seiten abgespeichert haben, erkennen Sie auch, dass hier die Datei erhalteneDaten.txt entstanden ist. Diese enthält den Text, den Sie über die Seite eingegeben haben. Das zeigt, dass AJAX ein sehr effizientes Mittel für die Datenübermittlung darstellt.

Ähnliche Produkte

Schreibe einen Kommentar