[PHP/HTML] Hoe text in HTML vloeiend refreshen

[remco_k]

Lastig om zo'n korte topic titel te bedenken voor dit probleem.

Situatie
Op de webserver staat een XML. Dit XML bestand wordt geparsed door een PHP script, en vervolgens worden diverse waarden naar buiten ge-echo-ed.
De bedoeling is, dat de pagina die dat php script aanroept periodiek de inhoud opnieuw 'refreshed' (lees: de Xml opnieuw parsen en weer echo-en), elke c.a. 15 seconden. (bijvoorbeeld)

Mogelijkheden
Daar zijn natuurlijk legio mogelijkheden voor, o.a. een IFRAME in een HTML bestand samen met een meta refresh.
Ook geprobeerd met een <DIV> en een stukje JavaScript wat met een timer de innerHtml van de betreffende DIV aanpast. (en daar gewoon een IFRAME inzet).

Niet naar wens
Deze bovenstaande opties werken wel, echter, ziet het er niet uit op beeld. Soms zie je dat frame 'knipperen' en de browser laat onderin beeld even kort z'n voortgangs balk zien.
En daar begint het echte probleem, dat wil ik niet. Is irritant voor de kijker.

Doel
Ik wil naar een situatie toe dat ik dat deel kan refreshen -zonder- dat de gebruiker dat ergens aan ziet en zich hoeft te irriteren. (behalve als de inhoud van de XML wijzigd natuurlijk).
Het liefst met een zo basic mogelijke techniek, zonder hele lappen code of externe classes nodig te hebben.

Google is best lastig
Gezien mijn verder beperkte kennis over dit onderwerp, die duidelijk even naar een volgend nivo moet worden geholpen, stel ik de vraag even aan jullie.
Mede ook omdat zoeken met google best lastig is, gezien het me kennelijk niet lukt om de juiste zoekwoorden te formuleren.
Zowel de XML, als het PHP script en de HTML die de hele boel uiteindelijk toont, is in eigen ontwikkeling. Dus in theorie kan (bijna) alles. Zij het dat ik geen echte HTML/PHP programmeur ben en het moet doen met de antieke PHP4.

Welke mogelijkheden heb ik nog, naast de hierboven omschreven varianten, die "vloeiend" refreshen?

Het gaat trouwens om het weergeven van een playlist van een radio station.
Een voorbeeld van hoe ik het nu geimplementeerd heb zie je hier.
Met een IFRAME en een meta refresh. En zoals je ziet, als je even 15 seconden wacht, zie je elke 15 seconden je browser wat doen. En daar wil ik vanaf.

[Woy]

Ook geprobeerd met een <DIV> en een stukje JavaScript wat met een timer de innerHtml van de betreffende DIV aanpast. (en daar gewoon een IFRAME inzet).

Waarom zet je daar met javascript weer een IFrame in? Je kunt toch gewoon de innerHtml ( of innerText ) van de DIV zetten met de content die je via een HttpRequest ophaalt. Dit is immers gewoon hoe AJAX werkt.

[Bozozo]

Jij bent op zoek naar AJAX

[Verwijderd]

Volgens mij is iframe redelijk uit de tijd wat betreft webapplicaties (ik gruwel in ieder geval van die dingen). Ik denk dat wat je beschrijft het beste bewerkstelligt kan worden met Ajax.

Ik heb zelf nog steeds niet de tijd gevonden om met Ajax te spelen (de techniek wel te verstaan ) en kan dus geen voorbeeld code geven, maar ik lees dat jou doel is om een playlist refreshen dus dat betreft over het algemeen een beperkt deel van de website en kan IMHO prima met Ajax gebeuren.

[Gomez12]

Simpel begin lijkt me een checksum van je data berekenen en zolang deze checksum gelijk is doet je javascript gewoon helemaal niets...

[Verwijderd]

Flash zal ook aan je eisen voldoen en is in mijn ogen redelijk eenvoudig (ieder heeft natuurlijk zijn eigen voorkeur). Nadeel hiervan is wel dat de gebruiker flash moet hebben geinstalleerd op de computer (over het algemeen heeft bijna iedereen dit, maar de iPhone bijv. nog niet). Voordeel is dat je allemaal effectjes kan toevoegen als er bijvoorbeeld een weiziging in het xml bestand heeft plaatsgevonden (maar dit is natuurlijk optitioneel).

[Verwijderd]

"Simpel begin lijkt me een checksum van je data berekenen en zolang deze checksum gelijk is doet je javascript gewoon helemaal niets..."

Dit kan ajax zelf al, als je een LAST-MODIFIED of een ETAG zet op je dynamische bestand zal ajax/webserver een status code Not Modified (20x, zoek zelf op) geven.

Als je content op een externe hostname staat, kan je een javascript bestand op die hostname neer zetten.

@WebSterz, dit kan prima met javascript, is lightweight en je hebt het sneller ontwikkeld. De kans dat iemand javascript heeft is dan ook een stuk groter.

[Gomez12]

Verwijderd schreef op donderdag 03 september 2009 @ 20:44:
"Simpel begin lijkt me een checksum van je data berekenen en zolang deze checksum gelijk is doet je javascript gewoon helemaal niets..."

Dit kan ajax zelf al, als je een LAST-MODIFIED of een ETAG zet op je dynamische bestand zal ajax/webserver een status code Not Modified (20x, zoek zelf op) geven.

Toch knap dat ajax, zit ik altijd te klooien met server side talen etc die eigen LAST-Modified / Etag headers aanmaken etc, blijkt dit gewoon al in ajax te kunnen.

Maarja ik dacht dan ook enkel dat ajax gewoon een hippe naam was voor een stel technieken gecombineerd en ik wist niet dat het buiten een naam zijn ook echt iets kon doen...

[Eijkb]

Aanrader: Jquery. Dat is een javascript library: http://jquery.com/

Wat jij wilt vandaag in 10 minuten gemaakt:

code:

$("#div").load("pagina.php");
        
var refreshId = setInterval(function() 
{$("#div").load("pagina.php");}, 10000);

In pagina.php wordt de XML weergegeven (via simplexml http://nl3.php.net/manual/en/book.simplexml.php)

[dev10]

En met jQuery kun je allerlei leuke effectjes toevoegen als je het bestand aan het laden bent, zodat het in ieder geval niet knippert enzo.

[remco_k]

@Vrieler;
Ik heb ook een hekel aan IFRAMES (of frames in het algemeen), dus probeer ze zoveel mogelijk te voorkomen, dat is me nu alleen (nog) niet gelukt en daar wordt dus aan gewerkt.

Eijkb schreef op donderdag 03 september 2009 @ 22:03:
Aanrader: Jquery. Dat is een javascript library: http://jquery.com/

Wat jij wilt vandaag in 10 minuten gemaakt:

code:

$("#div").load("pagina.php");
        
var refreshId = setInterval(function() 
{$("#div").load("pagina.php");}, 10000);

Thanks! (ook voor de voorgaande AJAX ideetjes).
Ik had natuurlijk weleens van AJAX gehoord, maar geen idee waar het voor diende. Heb me even ingelezen.
Ik denk dat ik eerst de Jquery optie even ga proberen, omdat hij (voor dit moment) de meest simpele implementatie lijkt te hebben.

In pagina.php wordt de XML weergegeven (via simplexml http://nl3.php.net/manual/en/book.simplexml.php)

Ik zit vast aan PHP4. Dus geen SimpleXml voor mij.
Maakt ook niet uit, want het parsen van de Xml is het probleem niet.

[remco_k]

remco_k schreef op vrijdag 04 september 2009 @ 13:20:
Ik denk dat ik eerst de Jquery optie even ga proberen, omdat hij (voor dit moment) de meest simpele implementatie lijkt te hebben.

En dat heb ik effe gedaan. Inderdaad rete simpel en werkt erg mooi!
@Eijkb; bedankt voor de tip.

Natuurlijk is de uiteindelijke implementatie (waarvan de content nog expirimenteel is - dus schiet me niet af als je wat raars ziet staan), hier te zien.
http://www.radiostadmontfoort.nl/ (onder het kopje "Nu op RSM").