[Ajax] Reload periodico di un elemento

[Hardcore]

Salve, premesso che sono agli inizi, ho guardato sui due manuali su cui studio e non ho trovato la risposta che cercavo.

Il programma Ajax che ho fatto è qualcosa di semplicissimo,fa una richiesta al file query.php, il quale spara fuori del codice html con una tabella di una
Select * from tabella

dopo di che inserisco il tutto in un <div id="abc"> </div> tramite l'innerHtml

e funziona tutto perfettamente.

Quello che vorrei fare è un aggiornamento periodico, tipo ogni 20s. Vorrei che se io inserisco dei valori nella tabella, entro 20s questi appaiano anche nella pagina col codice ajax.
Non ho però trovato niente che permetta ciò, e so benissimo che deve esserci qualcosa di simile -.-

[San Vegeta]

ci sono svariati metodi.
Il piu' semplice è avere un iframe (il quale ha un url associato) e tramite javascript fare il reload dell'iframe ogni tot secondi.
Altrimenti dai un id univoco a un contenitore (<div id="container">) e fai una funzione javascript che si collega al tuo script php e mette l'output nel div, sempre ogni tot secondi

qui (http://www.webmaster-talk.com/javascript-forum/53064-div-content-refresh.html) trovi qualche esempio... comunque basta googlare, è strapieno di esempi già pronti

[Hardcore]

Grazie!!!
Ho provato a cercare ma trovavo solo delle domande, senza le risposte

[San Vegeta]

posta il codice della pagina (o solo il frammento interessato) e appena ho tempo ti scrivo il codice che implementa la funzionalità

[NoeX]

usi qualche framework js in particolare ?

[Hardcore]

nono, è per un esame, devo scrivere tutto in js puro.

alla fine ho semplicemente fatto una cosa di questo genere




function start(){

getAjax(); //Crea l'oggetto XMLHttpRequest
var obj=document.getElementById("div_1");
xmlHttp.open("GET","prova.php?Name=Pippo");

xmlHttp.onreadystatechange= function(){

if(xmlHttp.readyState == 4 && xmlHttp.status==200) {

obj.InnerHtml=xmlHttp.responseText;

}

xmlHttp.send(null);

setTimeout("start()",10000);


}


}

[Amiag]

Quello che hai fatto si chiama polling ed è la soluzione piu semplice al problema.
Da un occhiata qua o metti "comet" su google : http://en.wikipedia.org/wiki/Comet_%28programming%29

ps occhio che da quel che leggo dal codice che hai postato le due righe
xmlHttp.send(null);
setTimeout("start()",10000);
dovrebbero star fuori dalla funzione onreadystatechange non dentro

[Hardcore]

sisi stanno fuori, ho riportato il codice a mente di corsa

[Hardcore]

Continuo invece ad avere il tutto funzionante su Firefox ma non su explorer.

eppure ho




try{

xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");

}catch (e){

try {

xmlHttp= new ActiveXObject("Microsoft.XMLHTTP");
}catch (e) {}

}




Ma niente con IE non va una sega

[San Vegeta]

metti dei popup ovunque così tracci quale è l'istruzione che non funziona, poi ci aggiorni e vediamo di aiutarti :)

[NoeX]

Quello che hai fatto si chiama polling ed è la soluzione piu semplice al problema.

Che altra soluzione polling a parte c'è per JS ?
Scemo io che non ho letto il link di Comet ('without the browser explicitly requesting it...')

Però scusa alla fine c'è sempre il client che manda la richiesta al web server...
Il web server non può mica mandare i dati così, senza una richiesta...

quel explicitly è ambiguo





Continuo invece ad avere il tutto funzionante su Firefox ma non su explorer.
eppure ho


try{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}catch (e){
try {
xmlHttp= new ActiveXObject("Microsoft.XMLHTTP");
}catch (e) {}
}

Ma niente con IE non va una sega
Provato col debugger JS di IE8 ?

[Tanek]

Qui ho solo il backup molto vecchio del mio progetto e questa settimana sono ancora in ferie quindi non posso controllare (con gioia anche :P ), è IE only però conta che magari l'ho aggiornato e soprattutto questo ricarica una combo, non una pagina (però la questione è ovviamente molto simile):


function createXmlHttpReq(handler)
{
var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
xmlhttp.onreadystatechange = handler;
return xmlhttp;
}

var myRequest = null;

function loadHttp(url)
{
myRequest = createXmlHttpReq(myHandler);
myRequest.open("GET", url);
myRequest.send(null);
}

function myHandler()
{
if(myRequest != null && myRequest.readyState == 4 && myRequest.status == 200)
document.getElementById('---IdDellaCombo---').innerHTML = myRequest.responseText;
}


edit: aggiungo soprattutto che (sempre con gioia :P ) ho il cervello spento rispetto al lavoro quindi non sono sicuro di niente di quello che ti sto scrivendo, però spero possa aiutarti :)

[Amiag]

Che altra soluzione polling a parte c'è per JS ?
Scemo io che non ho letto il link di Comet ('without the browser explicitly requesting it...')
Però scusa alla fine c'è sempre il client che manda la richiesta al web server...
Il web server non può mica mandare i dati così, senza una richiesta...

Si e no, ovvero la richiesta iniziale parte sempre dal client, ma quella richiesta puo rimanere aperta e il server continuare a scriverci sopra mano a mano che arrivano nuovi dati. Sugli altri browser si può fare gia da un bel po, su IE serve IE8.

Altrimenti cè anche lo streaming tramite IFrame ma non lho mai usato (è quello che usano credo sia Facebook e Gmail per la chat in tempo reale).

[San Vegeta]

quello non è più polling, è pushing. Essendo l'http stateless, si crea lato server un canale dati sempre aperto (quindi vengono sempre prodotti dati) e lato client un parser dei dati ricevuti. Quando i dati sono sporchi, non fa nulla, quando i dati sono riconosciuti il client fa un'azione. E funziona con tutti i browser.
Però ripeto, è pushing.

[NoeX]

Ok, però in questo modo se fosse un sito grosso ipotizziamo con centinaia di migliaia di client il server ce la fà a gestirli tutti ? O_o Vabbè che in questo caso un pò estremo, poi entrerebbe in gioco anche il clustering

Altro link con tanto di codice

http://www.zeitoun.net/articles/comet_and_php/start

[Amiag]

quello non è più polling, è pushing. Essendo l'http stateless, si crea lato server un canale dati sempre aperto (quindi vengono sempre prodotti dati) e lato client un parser dei dati ricevuti. Quando i dati sono sporchi, non fa nulla, quando i dati sono riconosciuti il client fa un'azione. E funziona con tutti i browser.
Però ripeto, è pushing.
Non funziona su internet 7 e inferiori (e penso anche su altri browser piu vecchi), perche il contenuto dellla risposta diventa disponibile solo quando è finita la richiesta e non mano a mano che arriva.


Ok, però in questo modo se fosse un sito grosso ipotizziamo con centinaia di migliaia di client il server ce la fà a gestirli tutti ? O_o Vabbè che in questo caso un pò estremo, poi entrerebbe in gioco anche il clustering
Ti posso rispondere lato Java perche quello conosco, al momento sta cosa è supportata solo in modo proprietario da alcuni server (tomcat, jboss e non ricordo se altri). Ma con le servlet 3.0 diventerà uno standard, ecco il primo link random che ho trovato : http://www.javaworld.com/javaworld/jw-02-2009/jw-02-servlet3.html
Cmq fondamentalmente l'idea è di tenere aperta la connessione ma di liberare le risorse lato server finche non ce un update da mandare, mentre ora c'è un rapporto 1 a 1 tra connessione e risorsa (thread java in questo caso) in questo modo potenzialmente si possono gestire molti piu utenti contemporaneamente.

[San Vegeta]

Non funziona su internet 7 e inferiori (e penso anche su altri browser piu vecchi), perche il contenuto dellla risposta diventa disponibile solo quando è finita la richiesta e non mano a mano che arriva.


allora avremo sbagliato qualcosa noi che ci funzionava anche con ie6 :)

[Amiag]

allora avremo sbagliato qualcosa noi che ci funzionava anche con ie6 :)
Semplicemente avrete usato un Iframe o qualche altro metodo e non una richiesta xmlhttp... oppure N richieste

[Hardcore]

Domanda in questo caso da profondo ignorante.
Ho una tabella su cui ho inserito il listener in caso di click su un determinato pulsante, vorrei che la funzione mostri una nuova finestra con dei campi in cui l'utente possa operare.

Per intenderci ho una tabella con un elenco di azioni, voglio che premendo sul pulsante "acquista" appaia questa nuova finestrella (tipo pop-up) in cui l'utente vada a scegliere la quantità) non ho però idea di come diavolo si chiamino questo genere di finestre.

[San Vegeta]

si chiamano popup -.-'

ascolta, ma non pensi sia il caso di studiarsi un pochettino del dom html?

[Hardcore]

edit: risolto :|

[Hardcore]

Ok nuovo problema, questo particolare

ho un tabella in con dei button , nel form html ho onclick='funzione()'

stranamente, su Firefox non intercetta il primo click, e dopo funziona correttamente

con opera invece funziona benissimo sin dal primo...

qualcosa che mi sfugge sull'incompatibilità di firefox con onclick?

inutile dirlo che ho tantissimi altri button e con questi va tutto alla perfezione con entrambi i browser

[Amiag]

Ok nuovo problema, questo particolare
ho un tabella in con dei button , nel form html ho onclick='funzione()'
stranamente, su Firefox non intercetta il primo click, e dopo funziona correttamente
con opera invece funziona benissimo sin dal primo...
qualcosa che mi sfugge sull'incompatibilità di firefox con onclick?
inutile dirlo che ho tantissimi altri button e con questi va tutto alla perfezione con entrambi i browser
Probabilmente al primo click prende il focus per quello lo ignora.
Cmq prova ad usare <input type="button"> invece che <button>

Poi l'onclick dovrebbe stare a livello di button non a livello di form (non so se ho capito bene)

[Hardcore]

Probabilmente al primo click prende il focus per quello lo ignora.
Cmq prova ad usare <input type="button"> invece che <button>

Poi l'onclick dovrebbe stare a livello di button non a livello di form (non so se ho capito bene)

ho tutti i pulsanti come <input type="button" onclick="funzione()">

la cosa è strana in quanto se la funzione fa semplicemente alert("Premuto"), l'onclick funziona bene, se invece la funzione è piu complessa si perde il primo colpo

[San Vegeta]

siccome potrebbe essere tutto e niente, io punto sul javascript che alla prima botta becca un errore

ovviamente senza codice stiamo a parlare di aria fresca :)

[Hardcore]

siccome potrebbe essere tutto e niente, io punto sul javascript che alla prima botta becca un errore

ovviamente senza codice stiamo a parlare di aria fresca :)

Stessa cosa che ho pensato io, ma se poi riclicco, va a eseguire la stessa funzione, e li va tutto bene , dal 2 click in poi è tutto ok

[Hardcore]

Copio e incollo il codice perchè ci sto impazzendo sopra -.-

ho


function get_xml_val(){
var ID;
var xmldoc;
xmlHttp1.open("GET", "prova.xml", true);

xmlHttp1.onreadystatechange = function(){
//alert(xmlHttp1.readyState+" "+ xmlHttp1.status);
if (xmlHttp1.readyState == 4 && xmlHttp1.status == 200) {
//alert(xmlHttp1.responseText);
xmldoc = xmlHttp1.responseXML; //Ottengo il file XML relativo //
//alert(xmldoc);
}
}
xmlHttp1.send(null);

//-------Ottengo i valori dall'xml-----------//
ID=xmldoc.getElementsByTagName("ID");


}



Provato con firebug si ferma a ID=xmldoc.getElementsByTagName("ID"); segnandomi che xmldoc è undefined... se faccio ResponseText ho del codice xml, l'emeto xmldoc facendo uno step by step mi risulta come Document. eppure -.-

Se da firebug, nello script faccio avanti passo passo , tutto funziona -.-

[Amiag]

Quando arrivi alla riga
ID=xmldoc.getElementsByTagName("ID");
la richiesta non è terminata e quindi xmldoc è ancora undefined

Quando vai in debug funziona perche dai il tempo alla richiesta di completare prima di arrivare li

Quella riga la devi mettere dentro l' onreadystatechange dove hai l'altra roba

[San Vegeta]

e poi ricorda che ID=xmldoc.getElementsByTagName("ID"); restituisce un array di elementi

[Hardcore]

Rieccomi, ora alle prese con l'arduo tentativo di rendere il mio codice compatibile con IE 8, cosa che non sta avvenendo come speravo. Il tutto funziona correttamente con Firefox,Opera,Chrome ecc, ma con IE non va un bel niente di niente, il problema che ho con la seguente funzione è lo stesso che ho con le altre analoghe, riporto questa per brevità


//--------Ricarica la tabella status generica ------------//
function refresh_status(){


xmlHttp2.open("GET", "Php_status.php?Alfabeto="+ alfabeto, true);
//alert("Puppa");
xmlHttp2.onreadystatechange = function(){
//alert(xmlHttp.readyState);
if (xmlHttp2.readyState == 4 && xmlHttp2.status == 200) {

var obj = document.getElementById("result");
var div_response=document.createElement("DIV");
while(obj.hasChildNodes()){
obj.removeChild(obj.firstChild);
}

div_response.innerHTML= xmlHttp2.responseText;
obj.appendChild(div_response);


}

}
xmlHttp2.send(null);

}

La funzione deve fare le seguenti cose, chiedere l'esecuzione del file Php_status.php, passandogli il valore di alfabeto che altro non è che un gruppo di tre lettere (Es. ABC) con cui deve iniziare il nome di un Azione, (es. Alcatel,Benetton,Cremonini), la risposta del file php è la tabella in html contenente tutte le azioni e il loro valore, vi accedo tramite responseText.

la funzione refresh status viene invocato ogni 2500ms,in firefox la tabella si aggiorna correttamente, in explorer invece esegue il primo load e basta, non effettua alcun reload. Temo che il problema sia nella gestione dell'innerHtml, ma non ne sono sicuro...


edit: Ho trovato una soluzione scervellandomici sopra, ho scoperto che IE molto probabilmente mette in cache la risposta ottenuta dal server nelle pagine php e non va ad eseguire quindi un aggiornamento. ho inserito quindi il seguente codice


xmlHttp2.open("GET", "Php_status.php?Alfabeto="+ alfabeto+"&t=" + new Date().getTime(), true);

avendo quindi il parametro t che cambia sempre e che è scartato in automtico dal server, facendo sembrare quindi di accedere ogni volta a un url differente.

Con questo accrocchio tutto funziona, mi domando se è questo l'unico modo o esistono sistemi un po più raffinati..

[Amiag]

Si IE mette in cache anche le richieste AJAX ...

La soluzione che hai usato te (aggiungere un parametro random) è quella adottata anche da tanti framework javascript e credo sia l'unica possibile al momento.