Javascript (Ajax?) Dynamischen Inhalt aktualisieren

[user192]

Hallo Zusammen,

Ich habe mich schon via Google schlau gemacht wie man einen dynamischen Inhalt anzeigt und ausliest. Nun stehe ich aber vor einer Frage bei der ich nicht mehr weiterkomme. Ich habe tutorials gelesen und verstanden wie ich dynamischen Inhalt via Ajax anzeigen kann, welcher dann via PHP bearbeitet / ausgelesen oder was auch immer wird. Danach wird der dann ohne Seiten-Refresh angezeigt.

Jetzt wollte ich aber noch einen Schritt weitergehen und zwar dachte ich mir, ob es eine Möglichkeit gibt, via Javascript ein PHP-File jede Sekunde (oder um Ressourcen zu sparen, wenn man via Maus über einen bestimmten Bereich fährt) aufzurufen, welches Dynamischen Inhalt (z.b. von einer Datenbank) ausliest und ausgibt. Das Javascript sollte dann mit dem vorhin geladenen Inhalt vergleichen und falls sich da was geändert hat nur diesen Bereich aktualisieren.

Also das beste Beispiel wäre da Facebook, dass man eigentlich einen neuen Eintrag machen kann und dieser wird dann Ohne Seitenreload und ohne dass der Ganze Inhalt der Daten aktualisiert wird geladen. Damit will ich verhindern, dass wenn z.b. jemand ein Film (youtube-embedd) auf der Seite schaut, welche die dynamischen Inhalte ausgibt, dass dieser dann nicht stoppt bei der Ausführung des Javascripts. Oder dass ein markierter Text nicht einfach "demarkiert" wird. Sondern dass dann wirklich nur der neue dynamische Inhalt hereingeladen wird. Ohne veränderung am Bereits ausgelesenen.

Ich hoffe man versteht was ich meine und man versteht mich
Ich bin im Bereich Javascript / Ajax noch eher unerfahren wobei ich den Code schon lesen kann und diesen auch verstehe / abändern kann, Mit PHP komm ich ganz gut klar.

Also vielen Dank für die Zeit, Freue mich auf Antworten

 

[rd4eva]

Jetzt wollte ich aber noch einen Schritt weitergehen und zwar dachte ich mir, ob es eine Möglichkeit gibt, via Javascript ein PHP-File jede Sekunde (oder um Ressourcen zu sparen, wenn man via Maus über einen bestimmten Bereich fährt) aufzurufen

Ja das geht. Entweder eben per events (z.B. mouseover) oder per setinterval.

Das Javascript sollte dann mit dem vorhin geladenen Inhalt vergleichen und falls sich da was geändert hat nur diesen Bereich aktualisieren.

Das ist nichts was man per Javascript lösen sollte.
Viel mehr sollte das auf Seite von php/sql passieren.
Nach dem Motto : Javascript fragt php obs was neues gibt, php schaut dann eben nach (z.B. in einer sql Datenbank) obs was neues gibt gibt nur das zurück was neu ist.
Javascript nimmt dann diese Antwort entgegen und fügt es einfach an.

Bei der Prüfung ob es etwas neues gibt kann man z.B. mit timestamps oder IDs arbeiten.

 

[user192]

Wow, vielen Dank für die schnelle und gute Antwort.

Das heisst also wenn ich die Seite offen habe, und in einem neuen Fenster ein Event eintrage, dann wird der bei der Datenbank hinzugefügt und wenn ich dann zurück auf die "Java-Refresh" Seite gehe, welche sagen wir via MouseRollOver gehandlet wird. Dann kann ich über den entsprechenden Bereich fahren und der Inhalt wird aktualisiert, also nur das neue?

Das heisst ich müsste via PHP immernur das "neuste" seit der letzten Abfrage auslesen richtig?
Und das wäre dann für jeden User anders (clientseitig halt). Das kommt für das PHP-Script ja nicht darauf an richtig? Heisst ich müsste via Javascript irgendein Timestamp mitgeben und diese dann im PHP-Script auswerten und so die Abfrage anpassen (o.Ä.) hab ich das so richtig verstanden?

Danke

 

[rd4eva]

Das heisst also wenn ich die Seite offen habe, und in einem neuen Fenster ein Event eintrage, dann wird der bei der Datenbank hinzugefügt und wenn ich dann zurück auf die "Java-Refresh" Seite gehe, welche sagen wir via MouseRollOver gehandlet wird. Dann kann ich über den entsprechenden Bereich fahren und der Inhalt wird aktualisiert, also nur das neue?

Das hab ich jetzt nicht versanden .
So in etwa meine ich das:

/* Alle 10 Sekunden die Funktion asyncRequest() ausführen */
window.setInterval("asyncRequest()", 10000);

function asyncRequest(){
	/* funtion sendet einen Request an xy.php */
}

Wenn man jetzt mal davon ausgeht das alle Beiträge in einer Sql Datenbank stehen kann man mit PHP hingehen und einfach alle Datensätze ausgeben lassen die in den letzten 10 Sekunden (da die Funktion alle 10 Sekunden ausgeführt wird) hinzugefügt wurden.
Das ergebnis das Sql ausspuckt gibt php dann als Antwort auf den Request von javascript zurück.

 

[user192]

Alles klar, also hab ich es richtig verstanden. Nur noch ein kleines Denkproblem. Wie mache ich das, wenn der Benutzer einen Eintrag von sich ändert, bzw. editiert? Dann wird dieser neue Inhalt ja nicht mehr "nachgeladen" sondern bleibt so. Bis die Seite dann nochmals "ganz neu" aufgerufen wird.

Denkanstoss?
Danke für die Hilfe!

 

[user192]

Sorry für den Doppelpost, aber ich möchte das Thema nochmals bisschen Pushen. Also weiss jemand vielleicht wie man das in diesem Fall mit dem Updaten macht, für ältere Beiträge?

Oder was auf jeden Fall für mich relevant wäre, wie man das anstellt wenn man 4 Einträge auf eine Seite begrenzt und das Ganze dann mit Vor und Zurück Buttons realisiert? Die müssten sich dann ja auch aktualisieren und somit verschieben? Geht das überhaupt?

Danke

 

[ComFreek]

Oder was auf jeden Fall für mich relevant wäre, wie man das anstellt wenn man 4 Einträge auf eine Seite begrenzt und das Ganze dann mit Vor und Zurück Buttons realisiert? Die müssten sich dann ja auch aktualisieren und somit verschieben? Geht das überhaupt?

Klar geht das
Du übergibst dem PHP-Skript einfach immer zwei Werte start, end.
Und das PHP-Skript übergibt dir (an das JS) die Einträge.

 

[smileyml]

Sorry für den Doppelpost, aber ich möchte das Thema nochmals bisschen Pushen.

Genau das wird hier gar nicht gern gesehen. Weiteres Pushs von dir werden zukünftig kommentarlos gelöscht.

 

[user192]

Genau das wird hier gar nicht gern gesehen. Weiteres Pushs von dir werden zukünftig kommentarlos gelöscht.

Ja das dachte ich mir schon, wird nicht mehr vorkommen.

Klar geht das
Du übergibst dem PHP-Skript einfach immer zwei Werte start, end.
Und das PHP-Skript übergibt dir (an das JS) die Einträge.

Also das verstehe ich jetzt aber nur halbwegs. Wie kann ich denn den Start und Endwert ermitteln?
Sagen wir ich habe 4 Einträge auf einer Seite und habe dann z.B. 15 welche ausgelesen werden. Heisst wir haben 4 Seiten, wobei auf der letzten 3 angezeigt werden. Wird jetzt ein neuer Eintrag gemacht, und ich aktualisiere dann mittels JS diese Einträge, dann wird der neue ja angefügt. Aber wie aktualisiere ich schlussendlich die Anzeige der Information über die Seite (also z.B: Seite 3 von 4).

Hast Du mir evtl. ein kurzes Code-Beispiel wie Du dir das vorstellen könntest?

Danke

 

[ComFreek]

Jetzt verstehe ich dich nicht mehr

Guck dir doch mal Google an. Wenn du auf die zweite Seite klickst, dann verändern sich die GET-Variable start.