Seite nachladen mit abe rnur neu ausgeben wenn neuer Beitrag

[Ernstl]

Hallo in die Runde!

Ich möchte in einem Div immer die neusten Daten aus meiner Datenbank anzeigen. Dieses soll nach ein paar Sekunden immer wieder überprüfen ob neue Daten da sind. Im Augenblick mach ich das mit einem kleinem javascript das die entsprechende php Datei aufruft die die Datenbank ausliest und dann ausgibt. Irgendwie finde ich es aber blöd, das das Script jedes Mal alles ausgibt. Es soll eigentlich nur dann in Action treten, wenn neue Daten da sind. Gibt es hierzu eine Möglichkeit?

Ernstl

<script type="text/javascript">
	 $(document).ready(function() {
	   $("#refresh").load("refresh.php?id=31");
	   var refresh = setInterval(function() {
	      $("#refresh").load("refresh.php?id=31");
	   }, 5000);
	});
	</script>

[klawischnigg]

Hi there,

Ich möchte in einem Div immer die neusten Daten aus meiner Datenbank anzeigen. Dieses soll nach ein paar Sekunden immer wieder überprüfen ob neue Daten da sind. Im Augenblick mach ich das mit einem kleinem javascript das die entsprechende php Datei aufruft die die Datenbank ausliest und dann ausgibt. Irgendwie finde ich es aber blöd, das das Script jedes Mal alles ausgibt. Es soll eigentlich nur dann in Action treten, wenn neue Daten da sind. Gibt es hierzu eine Möglichkeit?

Naja, das Skript gibt aus, was Du anforderst. Nachdem Du nicht herzeigst, was refresh.php macht, kann man nur annehmen, daß refresh.php halt einfach immer alle Daten ausgibt. Ich würde also dort ansetzen.

(Abgesehen davon stellt sich die mit dem eigentlich Problem aber nichts zu tun habende Frage, ob es wirklich notwendig und vor allem sinnvoll ist, für einen Timer, der periodisch einen Request auslöst, den ganzen jQuery-Mist zu laden)…

[Rolf B]

Hallo Ernstl,

du brauchst auf jeden Fall eine Möglichkeit, um zu erkennen, ob sich etwas geändert hat. Dein refresh.php könnte zu diesem Zweck in dem #refresh-Container ein Element haben, das ein data-Attribut trägt. Wie Du das genau machst, hängt natürlich von den Daten ab, die refresh.php liefert. In einem Form könnte man auch ein hidden input verwenden.

Mal angenommen, der Inhalt von #refresh wäre eine Liste. Dann könnte das so aussehen:

<section id="refresh">
  <ul data-lastrefresh="4711">
    <li>...</li>
    <li>...</li>
  </ul>
</section>

Die Section mit id=refresh ist dein Platzhalter für den Load, und das <ul> Element mit dem data-Attribut und den <li> darin wird von refresh.php geliefert. Wie gesagt, es ist nur ein Beispiel, die Umsetzung auf deine konkrete Struktur musst Du selbst leisten.

data-lastrefresh kannst Du nun vor dem Ajax-Aufruf auslesen und als Parameter an die URL anhängen, die du .load übergibst: $("#refresh").load("refresh.php?id=31&lastrefresh=4711").

Die jQuery-Doku sagt:

When a successful response is detected (i.e. when textStatus is "success" or "notmodified"), .load() sets the HTML contents of the matched element to the returned data.

Wenn man sich den Sourcecode von JQ anschaut, ist „successful“ gleichbedeutend mit „der success-callback von $.ajax wird aufgerufen“. Ein HTTP Request ist erfolgreich, wenn ein 2xx Statuscode zurückkommt. D.h. wenn du aus dem Refresh eine Response lieferst, die NICHT successful ist – hier bietet sich HTTP 304 NOT MODIFIED an – dann wird kaum was über die Leitung geschickt und der Container sollte unverändert bleiben.

Wie Du serverseitig aus dem lastrefresh-Wert ableitest, dass nichts zu ändern ist, ist deine Designentscheidung. Es könnte ein Timestamp sein, ein Änderungszähler, das hängt von deinen Daten ab.

Und ob Du das nun mit jQuery machst, oder mit handgemachtem Ajax, oder mit dem Fetch-API, das ist letztlich deine Entscheidung. Bei Fetch musst Du die Abfrage, ob eine 2xx Response kam, noch selbst hinzufügen (Response.ok Eigenschaft).

Rolf