Tutorial: Shoutbox als AJAX-Anwendung
10. November 2005 | PHP, AJAX | Kommentieren »Die Funktionsweise von AJAX ist geradezu prädestiniert für eine Chat- oder Shoutbox, die mit weit verbreiteten Bordmitteln von Standard-Webservern und -browsern funktioniert. Im folgenden Tutorial soll ein einfacher Chat entstehen, der komplett auf Flash, Java, o. ä. verzichtet und dennoch ohne ständigem Reload der Website arbeitet.
1. Funktionen und Techniken
Die Shoutbox, die am Ende dieser Anleitung entstanden sein wird, besteht aus validem XHMTL, schick gemacht mit CSS. Funktionen zum Abrufen und Speichern der einzelnen Nachrichten werden auf dem Webserver, der unbedingt erforderlich ist, mit PHP realisiert. Sämtliche Daten werden in einer mySQL-Datenbank gespeichert. Mit AJAX, genauer mit JavaScript und dem XmlHttpRequest-Objekt, entsteht das Herzstück der Anwendung. Der Chat läuft auf allen aktuellen Versionen von Internet Explorer, Firefox und Opera.
2. Das Front-End
Die Shoutbox selbst ist schnell gezimmert: Ein paar Block-Elemente, Eingabefelder und ein Button zum Absenden reichen vollkommen aus. Grundsätzlich müssen zwei Bereiche eingerichtet werden: Einerseits ein Bereich zum Anzeigen bisheriger Nachrichten, ein weiterer zum Eingeben von Name und Nachricht. In diesem Tutorial soll das folgendermaßen aussehen:
Oder in Form von w3c-konformem XHTML-Code:
<div id="asb_container">
<div id="asb_contentwrap">
<div id="asb_content">
Shoutbox wird geladen ...
</div>
</div>
<div id="asb_inputwrap">
<div id="asb_input">
<form action="" name="frmshoutbox" onsubmit="saveData(); return false;">
<b>Name:</b><br /><input class="text" type="text" name="txtname" value="" /><br />
<b>Nachricht:</b><br /><input class="text" type="text" name="txtmessage" value="" /><br />
<input class="button" type="submit" name="btnsend" value="Senden" />
</form>
</div>
</div>
</div>Einzelne Elemente wurden mit eindeutigen Namen versehen, damit es CSS und JavaScript leichter fällt, Teile der Shoutbox zu identifizieren und anzusprechen - mehr dazu gleich. Die Ausgabe bisheriger Nachrichten erfolgt in einem div mit der id asb_content. Die Eingabe erfolgt über eine form mit zwei Éingabefeldern. Drückt man in selbigen die Enter-Taste oder betätigt man den Senden-Button, wird die Nachricht verschickt.
Im momentanen Zustand sieht die Shoutbox noch relativ nackt aus. Ein Ansatz von XHTML war es ja schließlich auch, schmückende Elemente aus HTML zu entfernen und nur noch strukturierend tätig zu sein. Nun darf CSS seine Macht entfalten, mit diesem Stylesheet:
form {
margin: 0px;
}
#asb_container {
border: 1px dashed #B52021;
width: 160px;
}
#asb_contentwrap {
font: 8pt Arial;
height: 200px;
background-color: #DDDDDD;
overflow: auto;
}
#asb_content {
margin: 5px;
}
#asb_content .name {
color: #555555;
font-weight: bold;
padding-right: 5px;
}
#asb_inputwrap {
font: 8pt Arial;
}
#asb_input {
margin: 5px;
}
#asb_input .text {
border: 1px solid #888888;
font: 8pt Arial;
width: 146px;
background-color: #f4f4f4;
}
#asb_input .button {
width: 50px;
margin-top: 4px;
background-color: #B52021;
font: bold 8pt Arial;
color: white;
border: 1px solid #888888;
}Grundsätzlich sind zum CSS-Teil nur zwei Dinge anzumerken: 1. Dem form-Tag wurde der hauseigene Außenrand entzogen, der sich gern mal unansehnlich ausbreitet. 2. Die Definition asb_contentwrap beinhaltet overflow: auto. Damit wird automatisch eine vertikale Scrollbar angezeigt, sollten einmal die darzustellenden Nachrichten nicht in die feste Größe der Shoutbox passen.
3. Nachrichten speichern
Sämtliche Nachrichten werden in einer mySQL-Datenbank gespeichert, eine einzige Tabelle genügt, nennen wir sie treffenderweise shoutbox. Sie enthält die Felder name, message und, wie sich das gehört, id als Primärschlüssel. In SQL ausgedrückt, sieht das so aus:
CREATE TABLE shoutbox (
id int(11) NOT NULL auto_increment,
name varchar(50) NOT NULL default '',
message tinytext NOT NULL,
PRIMARY KEY (id)
) 4. Ein- und Auslesen von Nachrichten
Zwei PHP-Skripten kümmern sich nun darum, die eben erstellte Datenbanktabelle mit Nachrichten zu füllen und selbige auch wieder zu lesen. Ein drittes Skript beinhalt alle Einstellungen für den serverseitigen Bereich der Anwendung, nennen wir es config.php:
<?
//Datenbank-Einstellungen
$dbhost='localhost';
$dbuser='username';
$dbpass='password';
$db='db1';
$dbtable='shoutbox';
//Anzahl der auszugebenden Nachrichten
$messages_count = 10;
?>$messages_count soll das Ausgeben bereits bestehender Nachrichten auf eine gewisse Anzahl einschränken. Ansonsten würde getdata.php bei jeder Anfrage alle Datensätze ausgeben und unnötig Traffic verursachen. Erschwerend kommt hinzu, dass getdata.php relativ oft aufgerufen wird, mehr dazu gleich.
Das Skript baut, basierend auf den Einstellungen aus config.php, eine Datenbankverbindung auf. Mittels SQL werden die neuesten Nachrichten aus der Datenbanktabelle gefischt und ausgegeben. Die Ausgabe erfolgt mit Hilfe von HTML-Tags. Das ist nicht unbedingt die professionellste Variante, schließlich kümmert sich ein serverseitiges Datenbankabfrageskript um die optische Gestaltung einer browserseitigen Angelegenheit. Aber wollen wir es nicht komplizierter machen, als es sein muss.
Übrigens: Manch’ Browser packt getdata.php bei einem Aufruf in den Cache und weigert sich, bei einem nächsten Aufruf die Datei erneut vom Server zu laden um die lokal gecachte Version zu nutzen. Das Todesurteil für jede chatähnliche Anwendung. Daher beginnt das Skript mit einigen Funktionen, die den Browser von diesem Blödsinn abzuhalten.
<?php
//Cachen verhindern
header("Expires: Sat, 05 Nov 2005 00:00:00 GMT");
header("Last-Modified: ".gmdate("D, d M Y H:i:s")." GMT");
header("Cache-Control: no-store, no-cache, must-revalidate");
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache");
//Einstellungen laden
include("config.php");
//Verbindung zu mySQL aufbauen
$dblink = mysql_connect($dbhost, $dbuser, $dbpass);
if (!$dblink) {
die('Keine Verbindung zur Datenbank möglich.');
}
//Datenbank auswählen
$dbselected = mysql_select_db($db, $dblink);
if (!$dbselected) {
die ('Kann Datenbank nicht erreichen.');
}
//Datensätze ermitteln
$dbresult = mysql_query("SELECT * FROM $dbtable ORDER BY ID DESC LIMIT 0,$messages_count");
if (!$dbresult) {
die('Ungueltige SQL-Query.');
}
//Datensätze auslesen und formatieren
while ($row = mysql_fetch_assoc($dbresult)) {
echo "<span class="name">".$row["name"].":</span>";
echo $row["message"]."<br />";
}
//Verbindung zur Datenbank schließen
mysql_close($dblink);
?>setdata.php schreibt neue Nachrichten in die Datenbanktabelle shoutbox. Dabei ist zu beachten, dass die Daten per POST-Methode aus dem Eingabebereich der Shoutbox übertragen werden.
<?php
//Einstellungen laden
include("config.php");
//Verbindung zu mySQL aufbauen
$dblink = mysql_connect($dbhost, $dbuser, $dbpass);
if (!$dblink) {
die('Keine Verbindung zur Datenbank möglich.');
}
//Datenbank auswählen
$dbselected = mysql_select_db($db, $dblink);
if (!$dbselected) {
die ('Kann Datenbank nicht erreichen.');
}
//Neuen Datensatz speichen
$result = mysql_query("INSERT INTO $dbtable (name, message) VALUES ('".$_POST["name"]."','".$_POST["message"]."')");
if (!$result) {
die('Ungueltige SQL-Query');
}
//Verbindung zur Datenbank schließen
mysql_close($dblink);
?>5. Die AJAX-Schaltzentrale
Die lästigen Vorarbeiten sind getan, kommen wir nun zum Herzstück der Shoutbox. AJAX nimmt die Eingaben aus den Eingabefeldern entgegen und versorgt setdata.php mit der neuen Nachricht. AJAX sorgt aber auch dafür, ständig die neuesten Nachrichten auf dem Schirm zu holen - vielleicht ja von anderen Nutzern der Shoutbox. Dafür wird regelmäßig getdata.php abgerufen. Das beste daran: Die Seite, auf der die Shoutbox enthalten ist, muss dafür nicht ständig neu geladen werden, wie es ohne AJAX nötig wäre. Man stelle sich nur einmal vor, die Shoutbox befände sich nicht allein auf einer Website, sondern zusammen mit anderen Texten, Bildern, usw. Das ist wohl der wahrscheinlichere Fall, nicht wahr?! Jeder Besucher würde wohl bald flüchten, müsste er alle paar Sekunden ein Neuladen der kompletten Site ertragen.
Bevor wir munter dank AJAX mit den PHP-Skripten auf dem Server kommunizieren können, müssen Vorbereitungen getroffen werden. Das XMLHttpRequest-Objekt, Basis von AJAX, muss beim Aufrufen der Seite erstellt werden, um es später nutzen zu können. Dazu wird eine Instanz erstellt und der globalen Variable xmlHttp zugewiesen. Beim Internet Explorer ist XMLHttpRequest ein ActiveX-Objekt, bei der Konkurrenz ist es Bestandteil des Browsers. Hinzu kommt, dass das XMLHttpRequest-Objekt beim IE unterschiedlich angesprochen werden kann. Diesen Umständen wird z.B: mit try-catch-Blöcken Rechnung getragen: Schlägt eine Möglichkeit, XMLHttpRequest zu instanziieren, fehl, wird eben die nächste probiert.
Sollte das Erstellen der Instanz letzlich doch geglückt ist, werden die neuesten Nachrichten vom Server geladen. Stand eben noch “Shoutbox wird geladen…” (siehe HTML-Template oben) auf dem Schirm, breiten sich jetzt Namen und Texte aus - sofern vorhanden. Die JavaScript-Funktion loadData kümmert sich darum. Damit immer wieder und wieder ein Nachrichten-Update erfolgt, wird diese Funktion regelmäßig abgerufen. Dazu nutzen wir setInterval.
//globale Instanz von XMLHttpRequest
var xmlHttp = false;
//XMLHttpRequest-Instanz erstellen
//... für Internet Explorer
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch(e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch(e) {
xmlHttp = false;
}
}
//... für Mozilla, Opera, Safari usw.
if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {
xmlHttp = new XMLHttpRequest();
}
//aktuelle Daten laden
loadData();
//alle 5 Sekunden neue Daten holen
setInterval("loadData()",5000);Was genau passiert nun in loadData? xmlHttp wird beauftragt, die Datei getdata.php vom Server abzurufen und bei Erfolg den Inhalt in der Shoutbox auszugeben. Über die Eigenschaft readyState erfahren wir, wann genau dieser Moment eingetroffen ist. readyState hat dann den Wert 4. Ändert sich diese Eigenschaft, tritt das Ereignis onreadystatechange ein, welches wir mit einer Funktion (in diesem Beispiel in Form einer inline-Funktion) behandeln. Über die Methode getElementById steuern wir unseren div-Tag mit dem Namen asb_content an und verändern die Eigenschaft innerHTML. Dort stehen dann die neuen Nachrichten.
function loadData()
{
if (xmlHttp) {
xmlHttp.open('GET', 'getdata.php', true);
xmlHttp.onreadystatechange = function () {
if (xmlHttp.readyState == 4) {
document.getElementById("asb_content").innerHTML = xmlHttp.responseText;
}
};
xmlHttp.send(null);
}
}Interessant an dieser Stelle: Das erste A in AJAX steht für Asynchronous. Das heißt, sämtliche Abläufe auf der Website laufen unabhängig von unserer Anfrage an den Server weiter. Liefe der Prozess synchron weiter, müssten die Abläufe auf der Website gestoppt werden, bis die Daten komplett übertragen worden sind. Um aber dennoch die Kontrolle über den Datentransfer zu behalten, nutzt man die Ereignisbehandlung.
Um eine Nachricht an den Server zu senden, versorgt die JavaScript-Funktion saveData das Skript setdata.php per POST-Methode mit den Benutzereingaben. Wir nutzen POST, um den Beschränkungen von GET (maximal 256 Zeichen Text) aus dem Weg zu gehen. Die Daten werden in Form von Parametern weiter gegeben, die die Methode send des XMLHttpRequest entgegen nimmt. savedata.php schreibt die erhaltenen Daten in die Datenbank.
Es gibt noch ein Problem: Normalerweise wird eine Seite neu geladen, wenn man in einem HTML-Formular Enter drückt oder den Senden-Button betätigt. Das Neuladen wollen wir natürlich unbedingt verhindern, dennoch nicht auf die Annehmlichkeiten etwa der Enter-Taste verzichten. Das onsubmit-Ereignis einer form wird ausgelöst, sobald das Formular abgeschickt werden soll. Da klinken wir uns ein und leiten an dieser Stelle zu unserer Funktion saveData um. Diese verschickt die Daten und kehrt zur Behandlung von onsubmit zurück. Da damit aber alles erledigt ist, was wir wollen, brechen wir einfach die weitere Abarbeitung des Formulars ab. Dies erfolgt mit return false. Vielleicht haben ja einige diesen “Hack” bereits ganz am Anfang im HTML-Teil entdeckt? Damit das Ganze dennoch wirkt, wie von einem Formular gesendet, setzen wir mit der Methode setRequestHeader eine entsprechenden Header. So kommt setdata.php mit den übergebenen Daten hunderprozentig klar. Die Funktion saveData komplett:
function saveData()
{
if (xmlHttp) {
xmlHttp.open('POST', 'setdata.php');
xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xmlHttp.send('name='+document.frmshoutbox.txtname.value+'&message='+document.frmshoutbox.txtmessage.value);
}
document.frmshoutbox.txtmessage.value = '';
document.frmshoutbox.txtmessage.focus();
}Am Ende der Funktion wird dafür gesorgt, dass das Nachrichteneingabefeld geleert wird und bereit für neue Eingaben ist. Um das zu vereinfachen, wird zu guter letzt noch der Fokus dorthin versetzt.
6. Erweiterungsmöglichkeiten
Das obige Beispiel ist recht einfach gehalten und offen für Erweiterungen aller Art. Wie wäre es etwa, noch Datum und Zeit jeder Nachricht anzuzeigen?
Ein echtes Highlight wäre zweifelsohne auch, diese AJAX-Applikation noch AJAX-konformer zu machen - indem getdata.php die Daten nicht als HTML-Schnippsel zurückgibt sondern als XML-Datei. Dann müsste sich JavaScript darum kümmern, die XML-Daten zu verarbeiten.
Die komplette Anwendung als Download.
Verwandte Artikel
AJAX extrem einfach: Ein Bildbetrachter mit AJAX Source Kit | NewsAlloy - Web 2.0 und AJAX in Bestform | AJAX. Oder: Von einem revolutionären Megatrend.
Tags
ajax, html, css, javascript, xmlhttprequest, php, mysql, shoutbox, application
Bookmarken
Trackback
http://www.devblog.de/index.php/archives/2005/11/10/52/trackback/
Die E meint:
Hallo. Es sieht ganz gut aus. Es gibt nur ein Problem: die deutschen Umlaute und Sonderzeichen werden nicht korrekt in der DB abgespeichert und angezeigt trozt Westeuropäischen Codierung bei den Browsern und
Bitte um Hilfe. Vielen Dank. E.
Denny meint:
Eigentlich sollte es keine Probleme mit Umlauten geben. Die Shoutbox ist in UTF-8 kodiert, das sollte Dein Browser eigentlich selbst erkennen. UTF-8 ist Unicode, alle Umlaute der ganzen Welt
sind dort enthalten. Allerdings darfst Du ihn natürlich nicht zwingen, eine westeuropäische Kodierung zu nutzen, das passt dann nicht zusammen. Welchen Browser nutzt Du denn?
Denny
Taps meint:
Probleme mit den Umlauten kann man durch die Function escape bei JS wegbekommen.
man escapt einfach die Daten die gesendet werden sollen und bei der zb. verarbeitenden PHP datei urldecodet man diese halt wieder bevor sie in die DB geschrieben werden.
ALso klappt ganz gut.
by Taps
AJAX meint:
Sehr interessant, danke. Weitergehende Infos zum Thema AJAX gibts übrigens auf http://www.ajax-community.de/
Mo meint:
Sehr sehr schönes Script.
Wie müsste man es abändern, dass die neuesten Beiträge vom unteren Rand hinzugefügt werden?
michi meint:
nettes Script! Aber eine Frage hätte ich noch: ist es möglich, dass wenn man was shoutet, die Shoutbox sofort neugeladen wird?
Ajax -Einführung » Webdesignblog meint:
[…] Ein besseres Beispiel (wie ich finde) ist dieses Tutorial von devblog.de. Dort wird ein Chat programmiert, jeder Schritt ist detailiert beschrieben, auf Voraussetzungen wird hingewiesen (PHP und Mysql-Datenbank) und man ist schnell durch (erste Ergebnisse sind früh zu sehen). Ausserdem macht dieses Tutorial Lust auf mehr, man kann quasi direkt weitermachen. […]
Manfred meint:
Sehr schön beschrieben, vielen Dank!
Fast der gleiche Ajax-Chat kann auf folgender Seite online getestet werden:
http://www.plasticshore.com/projects/chat/
Steffino meint:
ich habe den chat - äh.. ich sag schon chat, die shoutbox meine ich, auf www.kitaimbogen.de eingebaut. mir gefällts, datum und zeit hab ich natürlich auch schon eingebaut. interessant wäre noch, html aus den nachrichten herauszufiltern bzw. nur bestimmte tags zu parsen.
Tango meint:
Sehr schönes Script, es ist nur etwas langsam bei der darstellung, also sobald mann eine nahchricht abschickt dauert es 5 sekunden biss es sich aktualisiert hatt.
Wünche:
Ich möchte nicht unferschämt sein aber, es währe auch schön wenn die alten beiträge auch sichtbar währen ?? endweder mit einem autoscroll oder einen scrollbox, und zusätzlich währe es schön wenn auch das Datum + Uhrzeit von den Nachrichten mit angezeigt würde
Denny meint:
Ich verspreche Euch, ich werde in Kürze ein Update veröffentlichen, welche eine Vielzahl der Kommentare und Wünsche berücksichtigt.
Tango meint:
@Denny das freut mich zu hören, wenn du noch Smilies einfügen würdest, währe es perfeckt.
Gestern habe ich von @Steffino unheimlich viel hilfe bekommen, dank ihm habe ich jetzt einen shoutbox mit Datum & Uhrzeit und es wird nicht letzte 10 Beiträge angezeigt sondern alle 24 Stunden.
wenn du jetzt auch noch mit dem Autoscroll (damit meine ich Marquee der von oben nach unten scrollt) einbaust oder einen anleitung erstellst würde ich dir dankbar sein.
Odin meint:
Nette Sache, nur leider habe ich eine Lösung für das AJAX Umlaute Problem gesucht
Odin meint:
Die Umlautgeschichte kannst du so lösen:
derStringDenDuAnDenServerSchickst = escape(derStringDenDuAnDenServerSchickst);
Das wars.
Hat jedenfalls bei mir geklappt.
Steffino meint:
Hallo,
bitte benutzt die Shoutbox auf kitaimbogen.de nicht zum ausprobieren, das nervt auf Dauer
alternativ würde ich denny darum bitten, meinen post vom 9. januar rauszunehmen
Steffino meint:
thx, klappt ja
habe gerade bemerkt, dass der text abgeschnitten wird wenn man in der shoutbox ein ‘&’ eingibt. und gibt´s vielleicht schon ‘ne lösung für die unmittelbare anzeige eingegebener nachrichten?
Steffino meint:
mmh, ich dachte ich setze wegen der ‘&’-zeichen bei setdata.php mal ein ‘htmlentities’ rein (und bei getdata.php das entsprechende ‘html_entity_decode’) - aber irgendwie scheint das damit wohl auch nicht zu funktionieren…
Tango meint:
Wir warten sehensüchtig auf die neuerungen und auf die Bugfix
Steffino meint:
Kleiner Tipp: Einfach in shoutbox.js innerhalb der Funktion saveData() die Funktion loadData() aufrufen. Dadurch wird der Inhalt der Shoutbox beim speichern gleich aktualisiert und man muss nicht 5 Sekunden warten bis die eingegebene Nachricht auftaucht.
Steffino meint:
mhh… ging das mit return-taste drücken schon vorher nicht? scheint so…
Shubi meint:
hab n problem…
ich habs das ganze paket runtergeladen… wenn ich auf index gehe (noch nicht online) kommt am anfang “Shoutbox wird geladen … ” aber dann “”.$row[”name”].”:”; echo $row[”message”].”
“; } // Verbindung zur Datenbank schlie?n mysql_close($dblink); ?>” und man kann nichts mehr schreiben bzw. senden :’( plz help
gruß shubi
Denny meint:
@shubi: Ich vermute mal, Du hast das ganze ohne PHP-fähigen Server getestet - vielleicht meinst Du das ja auch mit “noch nicht online”. Mach’s mal online.
@Steffino: Mit der Return-Taste gab es eigentlich bislang keine Probleme.
seHaas meint:
um das problem mit dem “&” zu beheben einfach den send-aufruf durch diese drei zeilen ersetzen und es funktioniert:
var txtMessage = encodeURIComponent(document.frmshoutbox.txtmessage.value);
var txtName = encodeURIComponent(document.frmshoutbox.txtname.value);
xmlHttp.send(’name=’+ txtName +’&message=’+ txtMessage);
bzw vllt noch in der datei getdata.php folgende zeile zum header hinzufügen:
header(”Content-Type: text/html; charset=utf-8″);
mfg seHaas
Steffino meint:
@Denny: Also ich meinte Returntaste drücken statt Submitbutton klicken, das geht bei mir nicht…
@seHaas: Danke, hab das in der Datei shoutbox.js bei der Funktion saveData() eingebaut. Geht aber immer noch nicht, es wird auch in der Datenbank nichts gespeichert, was nach dem ‘&’ kommt.
seHaas meint:
@Steffino: probier mal die Var txtMessage per alert auszugeben ob er das “&” durch ein “%26″ ersetzt, weil wenn das funktioniert, dürfte es keine probleme geben. zur not könntest per ethereal schaun was er wirklich schickt
Steffino meint:
das problem ist, dass ich von javascript keine ahnung habe…
Dr. Web Weblog » Blog-Archiv » Tutorialsammlung meint:
[…] Shoutbox als AJAX-Anwendung Im folgenden Tutorial soll ein einfacher Chat entstehen, der komplett auf Flash, Java und ähnliches verzichtet und dennoch ohne ständigem Reload der Website arbeitet […]
Freddy meint:
Perfekt. Funktioniert alles einwandfrei. Da kann man ja richtig was draus machen, wenn man nen Plan hat. Im Prinzip kann man ja alle Daten laden und speichern die man auf der Webseite haben will. Im Prinzip kann man dann mit einer einzigen html Seite für den gesamten Webauftritt auskommen. Faszinierend.
Ben meint:
Hallo, finde das TUT sehr gut aber leider klappt die Box bei mir nicht.
Ich weis nicht was ich falsch gemacht habe.
LINK: http://b-arnold.net/klasse/chat/chat.php
es steht immer da Shoutbox wird geladen
Denny meint:
@Ben: In Deiner Datei fehlt völlig der Bezug zum JavaScript-Teil der Shoutbox. Du musst also noch shoutbox.js einbinden - siehe Beispiel-Dateien zum Downloaden.
Mario meint:
Hallo Leute,
ich bin von dieser AJAX-Anwendung begeistert; habe nur ein kleines Problem. Die Funktion loadData(), die jede 5 Sek. die Daten aktualisiert, laüft unter Mozilla sehr schlecht und ruckartig. Auf meiner Seite habe ich neben der Ajax-Shoutbox auch mehrere Flash-Banner am laufen und die werden unter Mozilla jade 5 Sek. auch jedes mal aktualisiert…
Wie könnte ich das Problem beheben?
N.B.
Das Problem habe ich nur bei Mozilla….
Ciao Mario
Thomas meint:
Wahnsinns-Tutorial!
Danke!
Macromafia Blog » Blog Archive » Shoutbox mit AJAX meint:
[…] http://www.devblog.de/index.php/archives/2005/11/10/52/ […]
Further meint:
Hey, super Tutorial für Anfänger wie mich!
Wäre super, wenn mir jemand genau erklären könnte, wie man das jetzt mit XML machen könnte. Ich habe mir bereits eine XML-Datei per PHP erstellen lassen, weiß allerdings jetzt nicht, wie diese ausgelesen und verarbeitet werden muss…
Muss das .xml nach jedem Eintrag neugeneriert werden, oder gibt es da eine einfachere Lösung??
Gruß und Danke,
Further
eMail: further@gmx.net
Tom meint:
wo kommt der quelltext von 3. hin?
ich habe noch keine erfahrung mit my SQL.
danke
Mardyfox meint:
sehr schönes script, gefällt mir sehr gut, hab mir mal die mühe gemacht es etwas umgeschrieben und ans PHPKIT angepasst nur leider lädt die shoutbox sich immer zu tode… siehe hier: http://testsite.userlosers.com
Denny meint:
@Tom: Der Quelltext zu 3. ist eine SQL-Anweisung. Sie bestimmt, wie die Datenbanktabelle aussehen soll, die die Daten der Shoutbox aufnehmen soll. Falls Du phpMyAdmin benutzt, kannst Du diese Anweisung dort unter “SQL” eingeben und schon wird die Tabelle erstellt.
@Mardyfox: Hast Du auch die Datei shoutbox.js? Und liegt sie an der richtigen Stelle, so dass Deine Seite die Datei erreichen kann? Du brauchst shoutbox.js auch nur einmal einbinden, im head. Übrigens: Sieht sehr schick aus, finde ich. Wäre wirklich toll, wenn Du die Shoutbox zum Laufen kriegen würdest.
Mardyfox meint:
shoutbox.js muss doch direkt ins verzeichnis wo die anderen files hinkommen rein!?