JavaScript avanzato - HTML5 con CSS e JavaScript - page 170

ror , onload , ontimeout e onloadend . Utilizzando opportunamente questi eventi,
possiamo adattare l'interfaccia grafica della nostra applicazione per mostrare in tempo
reale all'utente lo stato di avanzamento della richiesta al server: che percentuale è stata
completata, quanto tempo stimiamo manchi al completamento dell'operazione e così via.
L'esempio più tipico di questo tipo di utilizzo è la trasmissione o la ricezione di un file.
Trasferimento di file
Utilizzando le File API, l'applicazione può accedere al contenuto di un file locale selezio-
nato da un utente attraverso un controllo di tipo <input type= " file " /> . In più, uti-
lizzando le API per il supporto al Drag&Drop e l'oggetto Data Transfer, abbiamo anche la
possibilità di leggere un file trascinato direttamente dal desktop in un'area specifica della
pagina.
Il metodo send di XMLHttpRequest può ricevere come parametro un oggetto di ti-
po Blob , FormData (coppie di tipo chiave/valore) o file e inviarne il contenuto in modo
progressivo. L'esempio 8.12 mostra come inviare un file e altre informazioni al server.
Esempio 8.12
var formData = new FormData();
formData.append("Id", 1);
formData.append("userfile", fileInput.files[0]);
var request = new XMLHttpRequest();
request.open("POST", "fileupload.handler");
request.send(formData);
Nel codice dell'esempio 8.12 , creiamo un oggetto di tipo FormData e poi lo popoliamo
con una lista di coppie chiave valore, dove la prima coppia contiene un numero mentre la
seconda contiene un file selezionato dall'utente. Successivamente invochiamo il metodo
send , passando in input l'oggetto FormData creato.
Chiamate cross-domain
Usando le impostazioni predefinite XMLHttpRequest può inviare e ricevere dati esclu-
sivamente da URL nello stesso dominio della pagina che ha istanziato l'oggetto. Questa re-