Javascript per aggiornare l'immagine di una pagina html (lato client)
Il seguente è uno script Javascript scritto per un progetto di server http su raspberry, che ha la funzione di aggiornare (lato client)
l'immagine scattata dal modulo cam e visualizzata dalla pagina index.html.
La cam scatta una foto ogni trenta secondi e la salva sempre con lo stesso nome (sul raspy), ma chi si è connesso al server
non vedrebbe l'aggiornamento in tempo reale se non vi fosse una chiamata al server (ogni tanto) per aggiornare l'immagine.
<!DOCTYPE html>
<html>
<body>
<img src="Stallman.jpg" alt="raspyexperiment" class="aggiornabile" />
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script type="text/javascript">
//ogni 60 secondi refresha
var refresha_timer = setInterval(refresha_function, 30000);
function refresha_function(){
sorgente = jQuery(".aggiornabile").attr("src");
sorgente = sorgente.split("?", 1);
nuova = sorgente + "?timestamp=" + new Date().getTime();
jQuery(".aggiornabile").attr("src", nuova);
}
</script>
</body>
</html>
l'immagine scattata dal modulo cam e visualizzata dalla pagina index.html.
La cam scatta una foto ogni trenta secondi e la salva sempre con lo stesso nome (sul raspy), ma chi si è connesso al server
non vedrebbe l'aggiornamento in tempo reale se non vi fosse una chiamata al server (ogni tanto) per aggiornare l'immagine.
<!DOCTYPE html>
<html>
<body>
<img src="Stallman.jpg" alt="raspyexperiment" class="aggiornabile" />
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script type="text/javascript">
//ogni 60 secondi refresha
var refresha_timer = setInterval(refresha_function, 30000);
function refresha_function(){
sorgente = jQuery(".aggiornabile").attr("src");
sorgente = sorgente.split("?", 1);
nuova = sorgente + "?timestamp=" + new Date().getTime();
jQuery(".aggiornabile").attr("src", nuova);
}
</script>
</body>
</html>
Interfaccia back-end: implementazione di chiamate Ajax e passaggio di dati in formato JSON
data