Inserire loader durante chiamata ajax

[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);

    };

})();

[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>

[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