Tasten klappern

Teil 3: Chatsystem unter AJAX

26.2.2007 von Redaktion pcmagazin und Alexander Scheb

ca. 1:05 Min
Ratgeber
  1. Chatsystem unter AJAX
  2. Teil 2: Chatsystem unter AJAX
  3. Teil 3: Chatsystem unter AJAX
  4. Teil 4: Chatsystem unter AJAX
  5. Teil 5: Chatsystem unter AJAX
  6. Teil 6: Chatsystem unter AJAX
  7. Teil 7: Chatsystem unter AJAX
  8. Teil 8: Chatsystem unter AJAX
  9. Teil 9: 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
Erster Aufruf: Das Chatsystem präsentiert sich mit der Eingabemaske und dem Übermitteln-Schaltknopf.
© Archiv

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 lesen

Chronologische Liste und Netflix-Links

Marvel-Filme- und -Serien: Das ist die richtige Reihenfolge

Neuerscheinungen in der Übersicht

Netflix: Neue Filme und Serien

Vorschau auf Film- und Serien-Highlights

Amazon Prime Video: Neuheiten

Weiter zur Startseite  

Mehr zum Thema

So kündigen Sie Ihre ADAC-Mitgliedschaft online per E-Mail.

Automobilclub

ADAC-Mitgliedschaft kündigen: So einfach geht's online…

Wer seine ADAC-Mitgliedschaft kündigen möchte, bekommt hier aktuelle Tipps. Wir zeigen Ihnen, wie das online per Formular oder E-Mail möglich ist.

Netflix

Kosten, Apps, Kündigung und Co.

10 wichtige Fragen zu Netflix in Deutschland

Preise, kompatible Geräte, Datenrate, Serien- und Filmangebot von Netflix: Wir beantworten die wichtigsten Fragen rund um den Streaming-Dienst.

whatsapp alternativen

Für Android, iPhone, iPad & Co.

Whatsapp Alternativen: Die 10 besten Messenger-Apps

Es gibt keine Whatsapp-Alternative? Quatsch! Diese Messenger-Apps für Android, iOS und PC sind der perfekte Ersatz.

Spam-Mails

Sicherheit

Phishing-Mails erkennen: 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.

Facebook-Betrug mit Fake-Profilen

Gefälschte Facebook-Konten

Facebook-Betrug mit Fake-Profilen - wie Sie sich und Ihre…

Betrüger nutzen gefälschte Facebook-Profile, um Geld zu ergaunern. Wir zeigen, wie Sie sich und auch Ihre Facebook-Kontakte gegen die Betrugsmasche…