In letzter Zeit habe ich mich viel mit jQuery und den Funktionen load, post etc beschäftigt.

Da ich immernoch an der Meller Community arbeite habe ich dort einen Chat integriert, der aufgrund eines kleinen JavaScript-Frameworks komplett ohne Neuladen der Seite zurecht kommt.

Das habe ich zum Großteil mit den in jQuery-Basic enthaltenen Funktionen gelöst.

Hier möchte ich kurz und bündig zeigen, wie man mit jQuery so etwas realisieren könnte:


function reloadchat()

{

$(‘#chatdiv’).load(‘./framework/chat_core.php’,{ sessid:’<?=session_id()?>’ });
window.setTimeout(“reloadchat()”, 3000);
}

So könnte eine Funktion aussehen die in das Div mit der ID “chatdiv” das Ergebnis aus der Datei chat_core.php schreibt. Die Datei chat_core enthält einfach nur eine Datenbankabfrage mit anschließender Ausgabe der Chateinträge. Das passiert natürlich mit PHP. So können, ohne das der Benutzer die Seite neu laden muss, die Nachrichten neu geladen werden. Und das ohne den Aufwand selber eine solche Funktion zu schreiben die das tut. Die oben angeführte Funktion lädt so also alle 3 Sekunden die Nachrichten neu. Die Funktionsweise von load sieht so aus: ELEMENT.load(“datei.endung”,{ postvariable : wert });  Die geschwungenen Klammern sind nicht zwingend, also würde auch theoretisch das hier reichen: ELEMENT.load(“datei.endung”); . Ich aber bevorzuge z.B. bei einem Chat aus Sicherheitsgründen die SessionID mit zu übergeben. So kann man vor unbefugtem Zugriff schützen. Die übergebenen Variablen sind dann mit PHP ganz normal über $_POST['postvariable'] erreichbar.

Das gleiche Verfahren kann man auch für das Eintragen von neuen Nachrichten verwenden. Hier wird uns die Funktion post zunutze:

function neuenachricht()
{
var text=document.getElementById(‘text’).value;
if(!text)
{
alert(‘Deine Nachricht darf nicht leer sein.’);
}
else
{
$.post(‘./framework/chat_add.php’,{ message: text, sessid: ‘<?=session_id()?>’ },
function(data)
{
if(data!=”") alert(data); else document.getElementById(‘text’).value=”";
});
}
}

Diese Funktion legt man dann einfach per $(‘#abschickbutton’).click(neuenachricht()); auf den “Abschick”-Button des Nachrichtenformulars. So wird die Funktion automatisch beim Klick auf den Button mit der ID “abschickbutton” aufgerufen.

Die Funktion holt sich zunächst die Inhalt aus dem Element (hier ein Textfeld) mit der ID “text”. Nach der Überprüfung ob auch wirklich ein Inhalt vorhanden ist werden dann per Post der Text sowie die SessionID an die Datei chat_add.php gesendet. Prinzipiell funktioniert die Funktion post genauso wie load. Jedoch mit dem Unterschied, dass nicht direkt Inhalt zurückgegeben wird.

Hier habe ich eine Funktion als drittes Attribut zu post hinzugefügt. Eine Funktion die die erfolgreiche Ausführung des Befehls post überprüft bzw bestätigt. Wenn der übergebene Wer (hier “data”) true ist, dann hat es funktioniert. Ich habe hier in dem Beispiel dann das Eingabefeld wieder geleert. Die aufgerufene Datei chat_add.php trägt dann die übergebene Nachricht einfach nurnoch in die Datenbank ein. Diese Nachricht wird dann beim nächsten Aufruf der oben genannten Funktion reloadchat auch in die Seite geladen.

Eigentlich funktioniert das ganze doch recht simpel oder? Und anstatt irgendein fertiges, unübersichtliches Skript zu nutzen schreibt man sich eben selber einen Chat.

Selbstverständlich kann man noch Ladebalken, mehr Sicherheitsabfragen und weitere tolle Dinge hinzufügen, doch wollte ich hier nur den groben Weg aufzeigen mit der so etwas funktioniert.

Falls ihr noch Fragen, Anmerkungen oder Verbesserungen parrat habt, dann schreibt das einfach in die Kommentare.

Auf dem Bild hier ist meine Realisierung des Chats. Ein wenig ausgeschmückt etc. Aber das Grundgerüst ist das gleiche wie oben beschrieben.