Tasten klappern

Teil 3: Chatsystem unter AJAX

Unser Chat-Programm demonstriert das Potenzial von AJAX. Eine HTML-Seite gestaltet die Benutzeroberfläche. Dort gibt der Anwender Nachrichten ein, die Sie an das Chat- System übermitteln. Ein Eingabefeld und eine Schaltfläche auf der HTML-Seite übermitteln die Daten zum Server. Per Input-Tag definieren Sie Eingabekomponenten. Das Typ-Attribut legt fest, was für eine Komponente Sie anlegen. Das Beispiel begnügt sich mit einem Eingabefeld (text) und einer Schaltfläche (button). Zum Schluss definiert das onclick- Attribut, welche Methode (sendMessage) aufgerufen werden soll, wenn der Anwender die Schaltfläche anklickt.

Chatsystem unter AJAX

© Archiv

Erster Aufruf: Das Chatsystem präsentiert sich mit der Eingabemaske und dem Übermitteln-Schaltknopf.

Damit die HTML-Seite auf dasDWR-System zugreifen kann, brauchen Sie Deklarationen. Dabei müssen Sie der HTML-Seite mitteilen, welche JavaScripte das DWR zur Verfügung stellt. Die Hauptfunktionalität enthält dasScript engine. js, während die Hilfsfunktionen des DWRs mit dem Script util.js auskommen. Zum Schluss wollen Sie Ihre neue Javaklasse als JavaScript innerhalb der HTML-Seite verfügbar machen. Das DWR-System generiert dafür dynamisch das JavaScript Chat.js auf Basis der Javaklasse (Chat). Anschließend bauen Sie die Funktion sendMessage() ein. Diese ruft der Anwender per Schaltfläche auf.

In dieser Methode rufen Sie den Inhalt des Eingabefeldes mit der Methode getValue() ab. Danach weisen Sie dem Eingabefeld einen leeren Inhalt zu, damit es neue Eingaben aufnehmen kann. Zum Schluss bauen Sie in der Methode gotMessage() die neue Nachricht als String zusammen und fügen diesen per addMessage() einem Listen-Objekt hinzu. Die Liste verwaltet alle eingegangenen Nachrichten. Für die HTML-Seite speichern Sie vorläufig diese Nachrichten in der Variablen chatlog. Die HTML-Seite finden Sie im Listing1.html.

Mehr zum Thema

Facebook Alternative
Social Networks

Sind Sie auf der Suche nach einer Facebook-Alternative? Hier finden Sie unsere Empfehlungen für die besten Social Networks: natürlich ohne Facebook.
Whatsapp auf PC
Mit oder ohne Download

Mit Whatsapp Web oder der Whatsapp Desktop-App nutzen Sie den Messenger bequem am PC. Wir erklären Download, Installation und Einrichtung.
Spam-Mails
6 Tipps gegen E-Mail Betrug

Betrüger versenden E-Mails, die es auf Ihre Daten und Ihr Geld abgesehen haben. Wie Sie Phishing E-Mails erkennen und sich schützen.
DSL-Symbolbild
Umzug, Ausfall & Co.

Sie wollen Ihren Provider für Internet und Telefon wechseln? Wir verraten, welche Rechte Sie bei Ausfall, Unterbrechung und Umzug haben.
James Bond 007 Spectre auf Amazon Prime Video
Vorschau auf Film- und Serien-Highlights

Amazon Prime Video lockt im Oktober 2017 mit Film-Highlights wie "James Bond 007 - Spectre" und "John Wick: Kapitel 2".