Ausgabe nur aktualisieren wenn neue Einträge vorhanden

[Degers]

Hallo,

Mit minimalen Grundkenntnissen betreffs Javascript versuche ich gerade ein Problem zu lösen und komme nicht weiter. In einem Projekt gibt es eine Art Chat, mehr eine Pinnwand eigentlich, auf der sich Mitglieder austauschen können. Diese wird derzeit in einem gewissen Zeitintervall aktualisiert, das ist folgendermaßen gelöst:

window.setInterval("reload('pinboard_content', '/content/myvoc/pinboard.php')",60000)

Es wird also die Datei, die die Ausgabe enthält in das div im ersten Parameter der Funktion, die ich jetzt einfach mal reload genannt habe, geladen. Mithilfe von window.setInterval geschieht das in bestimmten Zeitabständen.

Nun soll aber für eine neue, erweiterte Funktion dieses „Chats“ nur aktualisiert werden, wenn es auch neue Einträge gibt. Mein Ansatz ist, ein PHP-Skript die ID des aktuellsten Eintrags ausgeben zu lassen, Javascript diesen mit dem derzeit Aktuellsten zu vergleichen, falls das Skript einen neueren Eintrag findet, wird der Reload wie bisher ausgeführt. Den aktuellsten Datensatz auszulesen ist kein Problem, den Vergleich krieg ich auch noch in Javascript hin.
Nur: Wie kriege ich die abgerufene aktuellste ID zum Vergleichen zu Javascript kommuniziert? Die bestehende, dargestellte aktuellste ID kann ich bei der Ausgabe einfach als Variable setzen.

Vielen Dank für hilfreiche Hinweise.

Björn

 

[scbawik]

Ich würde den Intervall wegschmeissen und durch ein Timeout mit 1000 - 2000 ms ersetzen, welches sich erst nach dem Ladevorgang wieder neu setzt.

Dann würde ich dem PHP-Code einen Timestamp als URL-Parameter mitgeben. Damit kannst du im PHP berechnen ob es einen neueren Eintrag gibt. Wenn ja, wie bisher. Wenn nein:

header($_SERVER['SERVER_PROTOCOL'].' 304 Not Modified');

Damit sollte der Browser wissen dass die Datei nicht noch mal geladen werden muss bzw. die Datei aus dem Cache geholt werden kann.

Weiß allerdings nicht ob das auch so funktioniert und der beste Weg ist. Habe noch nie sowas gemacht ;)

Wenn du experimentierfreudig bist kannst du's ja auch mit den HTML5 WebSockets versuchen.

 

[Degers]

Um mir das Ganze zu erleichtern habe ich einen anderen Ansatz ersonnen: Wie gewohnt wird im Intervall von einigen Sekunden die Funktion ausgeführt. Vor dem Ersetzen aber möchte ich prüfen, ob der Inhalt des Divs der neuen Ausgabe entspricht oder nicht. Wenn es einen Unterschied gibt, wird die Aktualisierung durchgeführt, ansonsten nicht.
Hier übrigens die Funktionen, die ich nutze:

function ajaxreloader(div,ajaxreloader,post_data) {
document.getElementById(div).innerHTML = 'Inhalt wird geladen';
var xmlHttpReq = false;
var self = this;if (window.XMLHttpRequest) {
self.xmlHttpReq = new XMLHttpRequest();
}else if (window.ActiveXObject) {
self.xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
}
self.xmlHttpReq.open('POST', ajaxreloader, true);
self.xmlHttpReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
self.xmlHttpReq.onreadystatechange = function() {
if (self.xmlHttpReq.readyState == 4) {
ajaxreloader_update(div,self.xmlHttpReq.responseText);}}self.xmlHttpReq.send('id='+post_data);
}
}
}



function ajaxreloader_update(div,str){
document.getElementById(div).innerHTML = str;
}

Nun versuchte ich solche Sachen:

function ajaxreloader_update(div,str){
if (document.getElementById(div).innerHTML != str){
document.getElementById(div).innerHTML = str;
}
}

Das möchte aber so nicht funktionieren, auch nicht, wenn der Inhalt 0 ist und ich prüfe ob er 0 ist. Ist das Konstrukt so nicht richtig?