ArcadiA Club
ArcadiA Club


AAC FORUM     AAC News     AAC Box    



Home Page   Home Page
programmazione.htm   Programmazione - FORUM sezione  Vai al FORUM
 
Username:
Password:
Iscriviti!  |  Recupero password



Iscriviti GRATIS, potrai navigare senza questa
fascia e accedere a contenuti esclusivi:

    E-Mail:

Password:



 

 
- Inviare richieste e form con AJAX e MooTools -
 
COSA SERVE PER QUESTO TUTORIAL
Download |Chiedi sul FORUM | Glossario cognizioni basiche di HTML, JavaScript e del funzionamento di MooTools
L'oggetto Request di MooTools e il metodo form.send()

USARE AJAX CON MOOTOOLS
L'oggetto Request di MooTools e le sue proprietà.

Come abbiamo visto in un precedente articolo fare una richiesta con AJAX non comporta grandi difficoltà, tuttavia con la classe Request di MooTools il tutto risulta ancora più semplice ed efficace:


var ajaxRequest = new Request({
    url: $("urlTextBox").value,
    method: "post",
    data: "parametro1=ciao¶metro2=salve",
    async: true,
    noCache: true,
    headers: {
        "Warning": "just an header"
    },
    onProgress: function(info, xhr) {
        statusDiv.innerHTML = parseInt(info.loaded / info.total * 100, 10) + "%";
    },
    onSuccess: function(responseText, responseXML){
    	statusDiv.innerHTML = "Richiesta terminata con successo: " + responseText;
    },
    onFailure: function(xhr) {
    	statusDiv.innerHTML = "Richiesta fallita: " + xhr.status + " - " + xhr.statusText;
    }
});

ajaxRequest.send();


Questo codice permette di sfruttare tutte le più interessanti funzionalità dell'oggetto Request. Per prima cosa bisogna instanziarlo passandogli tutte le impostazioni, quindi è sufficiente invocare il metodo send per inviare la richiesta. Ma vediamo i parametri uno ad uno:

  • url: l'URL della pagina verso la quale inoltrare la richiesta, deve includere anche i parametri della query (ad esempio "/pagina.aspx?parametro=valore");
  • method: "post" o "get" (per conoscere la differenza riferirsi all'articolo su POST), di default è "post";
  • data: corpo della richiesta, utilizzato solamente in una richiesta con method impostato a "post";
  • async: specifica se effettuare la richiesta in maniera asincrona o meno, nel primo caso (valore true, predefinito) una volta chiamato send l'esecuzione del codice continuerà senza fermarsi, mentre se async è impostato su false verrà interrotta fino al completamento della richiesta;
  • noCache: se impostato su true aggiunge alla fine dell'URL della richiesta un parametro fittizio per impedire ad Internet Explorer di memorizzare in cache il risultato di una richiesta, così da fare sempre un responso appena generato;
  • headers: è un insieme di coppie nome-valore contenente gli header HTTP da inviare, si consideri però che di default l'header Content-Type è già impostato su "www-form-urlencoded" con codifica UTF-8;
  • onProgress: specifica la funzione che deve gestire l'evento di avanzamento della richiesta, in questo caso ce ne serviamo per mostrare una percentuale ad ogni chiamata; il primo parametro (info) ha due attributi, loaded, che indica la quantità di byte caricati, e total, che indica la quantità totale di byte; xhr è invece l'oggetto XMLHttpRequest;
  • onSuccess: specifica la funzione che deve gestire l'evento di corretto completamento della richiesta (responso HTTP 200); i parametri responseText e responseXML contengono rispettivamente il responso in formato stringa o, in caso di dati XML, come oggetto DOM XML;
  • onFailure: specifica la funzione che deve gestire una richiesta non andata a buon termine; tramite l'oggetto XMLHttpRequest è possibile conoscere il codice d'errore e il testo associato al responso;
INVIARE UN FORM CON AJAX
Intercettare l'invio di un form, bloccarlo e inviarlo tramite AJAX.

Un'altra interessante funzionalità di MooTools è la capacità di inviare FORM classici HTML tramite AJAX. Dato il seguente FORM HTML:


<form action="destinazione.htm" id="ajaxForm">	
    <input type="text" name="campo1" value="valore1">
    <input type="hidden" name="campo2" value="valore2">
    <select name="campo3">
        <option value="valore3a" selected>Valore 3A</option>
        <option value="valore3b">Valore 3B</option>
    </select>
    <input type="submit" value="Invia">
</form>

Con il seguente codice è possibile intercettare l'evento di invio del form, fermarlo e quindi inoltrarlo via AJAX:


window.addEvent("domready", function() {
    $('ajaxForm').addEvent('submit', function(event) {
        event.stop();

        this.set("send", {
            onSuccess: function(responseText, responseXML) {
                alert(responseText);
            }
        });

        this.send();

    });
});

Come detto, event.stop() permette di interrompere l'elaborazione dell'evento, poi con impostando sul FORM la proprietà "send", possiamo specificare tutte le opzioni viste precedentemente e infine con this.send() il form viene inviato. Semplice ed efficace.

 

<< INDIETRO by VeNoM00  


Video collegati Visualizza i video di questa pagina
Visualizza video sull'argomento "mootools".
Visualizza video sull'argomento "ajax".
Visualizza video sull'argomento "request".
Visualizza video sull'argomento "mootools ajax request".


Dì la tua: cosa ne pensi?
Esponi il tuo punto di vista e condividilo con migliaia di persone

Oggetto nuova discussione:


Testo del messaggio:

E-Mail:

Quanto fa più dieci:




 





^ TOP  
Linkaci | Segnala errore | Invita | Stampa


pubblicità | privacy | visione | diritti | ufficio stampa | donazioni | scrivici
© 1999-2017 - P.IVA 02284690035 - Grafica, layout e contenuti sono di esclusiva proprietà di ArcadiA Club.

Powered by:
Spazi pubblicitari di alto livello
 

Compra in un click! | Cerca prodotti in offerta: