Inserire loader durante chiamata ajax

[againhere]

ciao a tutti, in giro per la rete ho trovato questo codice per una chiamata ajax (sto imparando)
e mi chiedevo, come posso visualizzare un messaggio del tipo "attendi", nel frangente di tempo che aspetto che mi vengano restituiti i dati?
grazie a tutti

 <script>
 
 //Funzione per la gestione asincrona AJAX
function xmlhttpPost(strURL) {
//Inizializzo l'oggetto xmlHttpReq
var xmlHttpReq = false;
var self = this;
// qui valutiamo la tipologia di browser utilizzato per selezionare la tipologia di oggetto da creare.
// Se sono in un browser Mozilla/Safari, utilizzo l'oggetto XMLHttpRequest per lo scambio di dati tra browser e server.
if (window.XMLHttpRequest) {
self.xmlHttpReq = new XMLHttpRequest();
}
// Se sono in un Browser di Microsoft (IE), utilizzo Microsoft.XMLHTTP 
//che rappresenta la classe di riferimento per questo browser
else if (window.ActiveXObject) {
self.xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
}
//Apro il canale di connessione per regolare il tipo di richiesta.
//Passo come parametri il tipo di richiesta, url e se è o meno un operazione asincrona (isAsync)
self.xmlHttpReq.open('POST', strURL, true);


//setto l'header dell'oggetto
self.xmlHttpReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');


/* Passo alla richiesta i valori del form in modo da generare l'output desiderato*/
self.xmlHttpReq.send(recuperaValore());


/* Valuto lo stato della richiesta */
self.xmlHttpReq.onreadystatechange = function() {


/*Gli stai di una richiesta possono essere 5
* 0 - UNINITIALIZED
* 1 - LOADING
* 2 - LOADED
* 3 - INTERACTIVE
* 4 - COMPLETE*/


//Se lo stato è completo 
if (self.xmlHttpReq.readyState == 4) {
/* Aggiorno la pagina con la risposta ritornata dalla precendete richiesta dal web server.Quando la richiesta è terminata il responso della richiesta è disponibie come responseText.*/
aggiornaPagina(self.xmlHttpReq.responseText);
}
}
}
/*Questa funzione recupera i dati dal form.*/
function recuperaValore() {
var form = document.forms['form'];
var id_utente = form.id_utente.value;
var nome_utente = form.nome_utente.value;
valore = 'id_utente=' + escape(id_utente);
valore2 = 'nome_utente=' + escape(nome_utente); 
return valore, valore2;
}
/*Questa funzione viene richiamata dall'oggetto xmlHttpReq per l'aggiornamento asincrono dell'elemento risultato*/
function aggiornaPagina(stringa){
document.getElementById("risultato").innerHTML = stringa;
}</script>

[calculus]

Una chiamata Ajax è asincrona, quindi vuol dire che una volta che l'hai inviata al server (tramite il metodo send) puoi fare altre cose in attesa che finisca (nel metodo onreadystatechange).

Quindi l'idea potrebbe essere dopo la send visualizza un loader e sul onreadystatechange nascondi il loader.

Se stai imparando ti conviene dare un'occhiata a JQuery che ti semplifica molto la vita.
Ad esempio il codice sopra usando jquery diventa:

$.post(url, dati_del_form, function(result){
// qui faccio quello che voglio con il risultato.
});

Tutto diventa più semplice.

[Al_katraz984]

$.post(url, dati_del_form, function(result){
// qui faccio quello che voglio con il risultato.
});

Tutto diventa più semplice.

hahahahaha si semplicissimo, con una libreria alle spalle per 4 righe di codice..


tornando in topic,
potresti inserire una gif negli stati della chiamata.. tipo:

if (self.xmlHttpReq.readyState == 0) {
  document.getElementById( 'loader' ).appendChild( tuaGifLoader );
} 

[againhere]

hahahahaha si semplicissimo, con una libreria alle spalle per 4 righe di codice..


tornando in topic,
potresti inserire una gif negli stati della chiamata.. tipo:

if (self.xmlHttpReq.readyState == 0) {
  document.getElementById( 'loader' ).appendChild( tuaGifLoader );
} 

grazie mille ora il problema è... come lo spengo??

[againhere]

hahahahaha si semplicissimo, con una libreria alle spalle per 4 righe di codice..


tornando in topic,
potresti inserire una gif negli stati della chiamata.. tipo:

if (self.xmlHttpReq.readyState == 0) {
  document.getElementById( 'loader' ).appendChild( tuaGifLoader );
} 

grazie mille ora il problema è... come lo spengo??

[carlomarx]

var xmlhttpPost = (function () {

    function reqListener () {
        alert(this.responseText);
        oWait.parentNode && oWait.parentNode.removeChild(oWait);
    }

    function reqError (oEvent) {
        alert("C\'\u00E8 stato un errore durante la chiamata AJAX.");
        oWait.parentNode && oWait.parentNode.removeChild(oWait);
    }

    var oWait = document.createElement("div");

    /* "oWait" e' un div... ci puoi mettere dentro tutto quello che ti pare... */
    oWait.appendChild(document.createTextNode("Attendi..."));

    return function (sURL) {
        var oReq = new XMLHttpRequest();
        oReq.onload = reqListener;
        oReq.onerror = reqError;
        oReq.open("GET", sURL, true);
        oReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        oReq.send(recuperaValore());
        oWait.parentNode || document.body.appendChild(oWait);

    };

})();

[Al_katraz984]

grazie mille ora il problema è... come lo spengo??

quando arrivi qui:

//Se lo stato è completo 
if (self.xmlHttpReq.readyState == 4) {

document.getElementById( 'loader' ).removeChild( tuaGif );

/* Aggiorno la pagina con la risposta ritornata dalla precendete richiesta dal web server.Quando la richiesta è terminata il responso della richiesta è disponibie come responseText.*/
aggiornaPagina(self.xmlHttpReq.responseText);
} 

rimuovi la gif

[againhere]

var xmlhttpPost = (function () {

    function reqListener () {
        alert(this.responseText);
        oWait.parentNode && oWait.parentNode.removeChild(oWait);
    }

    function reqError (oEvent) {
        alert("C\'\u00E8 stato un errore durante la chiamata AJAX.");
        oWait.parentNode && oWait.parentNode.removeChild(oWait);
    }

    var oWait = document.createElement("div");

    /* "oWait" e' un div... ci puoi mettere dentro tutto quello che ti pare... */
    oWait.appendChild(document.createTextNode("Attendi..."));

    return function (sURL) {
        var oReq = new XMLHttpRequest();
        oReq.onload = reqListener;
        oReq.onerror = reqError;
        oReq.open("GET", sURL, true);
        oReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        oReq.send(recuperaValore());
        oWait.parentNode || document.body.appendChild(oWait);

    };

})();

non mi è chiaro, devo eliminare il mio codice e sostituirlo con quello oppure devo aggiungerlo al mio?
ho provato in tutti e due i modi ma niente non va, o meglio funziona ma la scritta attendi alla fine non va via

via //Se lo stato è completo
if (self.xmlHttpReq.readyState == 4) {

document.getElementById( 'loader' ).removeChild( tuaGif );

/* Aggiorno la pagina con la risposta ritornata dalla precendete richiesta dal web server.Quando la richiesta è terminata il responso della richiesta è disponibie come responseText.*/
aggiornaPagina(self.xmlHttpReq.responseText);
}

non so perchè ma non funziona neanche quast'altra soluzione potreste farmi un esempio concreto?
grazie mille =)

[againhere]

up

[carlomarx]

non mi è chiaro, devo eliminare il mio codice e sostituirlo con quello oppure devo aggiungerlo al mio?
ho provato in tutti e due i modi ma niente non va, o meglio funziona ma la scritta attendi alla fine non va via

creati un file chiamato "testo.txt", inseriscilo nella stessa cartella della pagina che ti allego. Scrivici dentro "Ciao mondo".

pagina.html:

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Esempio</title>
<script type="text/javascript">
function recuperaValore () {
    /* non conosco lo scopo di questa funzione... di conseguenza... */
    return "tizio=caio&ciao=mondo";
}

var xmlhttpPost = (function () {

    function reqListener () {
        alert(this.responseText);
        oWait.parentNode && oWait.parentNode.removeChild(oWait);
    }

    function reqError (oEvent) {
        alert("C\'\u00E8 stato un errore durante la chiamata AJAX.");
        oWait.parentNode && oWait.parentNode.removeChild(oWait);
    }

    var oWait = document.createElement("div");

    /* "oWait" e' un div... ci puoi mettere dentro tutto quello che ti pare... */
    oWait.appendChild(document.createTextNode("Attendi..."));

    return function (sURL) {
        var oReq = new XMLHttpRequest();
        oReq.onload = reqListener;
        oReq.onerror = reqError;
        oReq.open("GET", sURL, true);
        oReq.send(recuperaValore());
        oWait.parentNode || document.body.appendChild(oWait);

    };

})();
</script>
</head>

<body>
<p><span style="color: #0000ff; text-decoration: underline; cursor: pointer;" onclick="xmlhttpPost('testo.txt');">Clicca qui</span></p>
</body>
</html>