auto oppdatering ved nytt innlegg

marves · 19. juni 2009

Jeg ønsker at websiden skal oppdatere seg når et nytt innlegg er lagt inn.

Ser for meg at:

* Det er en fil som heter verdi.txt som bare innehiolder verdien 0

* Når noen legger til noe nytt skrives +1, så tallet øker

* et php script leser denne filen ved faste intervaller og setter verdien i en variabel

* javascriptet skal sammenligne den eksisterende verdien i variabelen til den nye fra verdi.txt.

* er det en ny verdi vil siden oppdatere seg

om dere skjønner...

problemet er at seg ikke er en kløpper på javascript og får det bare til å funke delvis...

oppdatering.html

j0achim · 21. august 2009

Ajax er det du er på jakt etter. Hvordan en velger å implementere kode er forsåvidt det samme.

Du har en side som gjør spørring mot en annen side. Å lese en text fil gjennom javascript i seg selv vil aldri fungere siden javascript kjører lokalt i browseren til den som viser siden.

Men det man gjør er å sette en timer i javascriptet som looper, og en gang i blandt sender en page request til server, uten å reloade hele siden men bare deler av content, i dette tilfellet, en ny post.

Det som gjør Ajax så greit er at først når oppdatert kode er generert blir den vist, så brukeren får en følelse av at siden helt dynamisk oppdaterer seg på en fin og "smooth" måte.

Noter deg at Ajax bruker litt båndbredde. Siden javascriptet kontinuerlig spør server om oppdatert kode.

Et tullete script her, men bare for å vise hvordan Ajax kan brukes:

Index.html

<html>
<head>
<title>Ajax eksempel</title>
</head>
<body>
	<p id="request"></p>
</body>
</html>

<script type="text/javascript">	
var sleep=500;	
var xmlhttp = false;
var xmlhttp2 = false;
document.getElementById("request").innerHTML = "Laster...";

/* Henter data fra server */
function ajax_read(url) {
if(window.XMLHttpRequest){
	xmlhttp=new XMLHttpRequest();
	if(xmlhttp.overrideMimeType){
		xmlhttp.overrideMimeType('text/xml');
	}
} else if(window.ActiveXObject){
	try{
		xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
	} catch(e) {
		try{
			xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
		} catch(e){
		}
	}
}
if(!xmlhttp) {
	alert('Giving up :( Cannot create an XMLHTTP instance');
	return false;
}
xmlhttp.onreadystatechange = function() { 
	if (xmlhttp.readyState==4) {
		document.getElementById("request").innerHTML = xmlhttp.responseText;

		/* Du ser kansje r=Math.random() dette kommer av cache */
		intUpdate = setTimeout("ajax_read('Q.php?r=" + Math.random() + "')", sleep);
	}
}
xmlhttp.open('GET',url,true);
xmlhttp.send(null);
}

/* Starter scriptet og sørger for at det looper. */
var intUpdate = setTimeout("ajax_read('Q.php')", sleep);

</script>

Q.php

<?php
// Poster.
echo date("H:i:s");
?>

Endret 21. august 2009 av j0achim

Logg inn

auto oppdatering ved nytt innlegg

Anbefalte innlegg

marves

Lenke til kommentar

Videoannonse

j0achim

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Hvem er aktive 0 medlemmer