Lezioni AJAX- I metodi XMLHttpRequest II

send
Il secondo metodo da utilizzare per effettuare una richiesta in GET è il send().
Sintassi di send()

send(data)

Tecnicamente parlando, per effettuare una semplice richiesta GET “fantasma” ad una pagina esterna sono sufficienti queste 2 linee di codice.

Listato 4. Inviare un valore nullo con send() e il metodo GET

// inizializzo la richiesta in GET
ajax.open(“get”, “cartella/ajax.html?leggi=Dante”, true);
// effettuo la richiesta
ajax.send(null);

Per una chiamata POST le cose funzionano diversamente. Bisogna infatti impostare comunque degli headers prima di effettuarla. Questi headers sono una serie di coppie chiave/valore specifici per uno scambio dati via internet.

Nel caso di un invio dati in POST, bisogna quindi specificare la coppia con nome content-type e valore application/x-www-form-urlencoded ed usare send() per inviare le variabili spedendo anche queste come coppie chiave/valore. Questo a differenza del metodo GET, in cui le variabili potevano essere contenute nell’indirizzo.

Listato 5. Inviare le variabili con il metodo POST

// inizializzo la richiesta in post
ajax.open(“post”, “cartella/ajax.html, true);
// imposto il giusto header
ajax.setRequestHeader(“content-type”, “application/x-www-form-urlencoded”);
// effettuo la richiesta inviando la variabile leggi con contenuto Dante
ajax.send(“leggi=Dante”);

Per chiudere la connessione con il server, oltre al tipo di contenuti è consigliabile impostare un’altro header dal nome connection e con contenuto pari a close.

Listato 6. Chiudere la connessione

// ulteriore header consigliato per richieste get o post
// da scrivere prima di utilizzare send
ajax.setRequestHeader(“connection”, “close”);

Per inviare più di una varibile, è necessario separarle con una ‘e’ commerciale (&), sia col metodo POST sia col GET.

Uno degli errori più comuni è quello di usare caratteri speciali come ‘&’ all’interno delle variabili. Il server infatti non può distinguere quali ‘e’ commerciali sono parte delle variabile e quali sono effettivamente separatori, così separa anche il contenuto delle stringhe inviate. Vediamo un esempio per chiarire il problema.

Listato 7. Esempio di errore comune nell’inviare dati

// dati da inviare
var attori = “Pippo & Pluto”,
titolo = “Caccia all’ errore.”;
// link per la lettura dati
var link = “films.html?”;
// assegno gli attori ed il titolo [modo errato]
link += “attori=” + attori;
link += “&”; // è necessario separare le coppie
link += “titolo=” + titolo;
/** il link per intero sarà questo:
films.html?attori=Pippo & Pluto&titolo=Caccia all’ errore
*/
ajax.open(“get”, link, true);

Questo codice non genererà un errore JavaScript e nemmeno sul server, ma le variabili ricevute da quest’ultimo saranno precisamente: la variabile attori, contenente il valore “Pippo”, la variabile Pluto senza alcun valore ed infine la variabile titolo con il contenuto esatto ma solo per caso.

La variabile attori infatti contiene il separatore, bisogna quindi normalizzare il contenuto di tutte le variabili prima di uno scambio dati. La funzione escape(), esterna al contesto ajax, assolve proprio questo compito e trasforma il contenuto delle variabili permettendo al server di ricevere le giuste coppie chiave/valore. Si applica sia con GET sia con POST.

Listato 8. Filtrare le variabili con escape()

// assegno gli attori ed il titolo [modo corretto]
link += “attori=” + escape(attori);
link += “&”; // è necessario separare le coppie
link += “titolo=” + escape(titolo);

Vedremo che send() può essere anche usato, a seconda delle esigenze, dopo aver assegnato una funzione al parametro onreadystatechange che verrà preso in esame nella prossima lezione, oppure dopo aver impostato degli headers attraverso il metodo setRequestHeader().

abort
Se abbiamo bisogno di interrompere le operazioni di invio o ricezione, possiamo usare abort(), ad esempio subito dopo una operazione di send. Questo metodo non ha bisogno di parametri e che termina immediatamente la trasmissione dati.

getAllResponseHeaders e getResponseHeader
Questi due metodi servono per fornire, una volta effettuata l’operazione, le informazioni sugli headers rilasciati dal server che ha risposto alla chiamata.

Listato 9. Ottenere i messaggi di risposta del server

// lista di tutti gli headers restituiti dal server
alert(ajax.getAllResponseHeaders());
// informazioni su un singolo header
alert(ajax.getResponseHeader(“content-type”));

Va sottolineato che questi ultimi due metodi non sono utilizzabili subito dopo l’invio dei dati (send), ma solo una volta ricevuta la risposta dal server. Queste istruzioni possono essere quindi inserite all’interno della funzione che gestirà l’evento onreadystatechange che si verifica alla ricezione della risposta.

Share on Facebook