From da78a9e329e272dedb2400b79a3bdeebff387d47 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:17 -0500 Subject: initial commit --- files/it/web/api/xmlhttprequest/index.html | 173 +++++ .../xmlhttprequest/onreadystatechange/index.html | 119 ++++ files/it/web/api/xmlhttprequest/open/index.html | 115 ++++ .../web/api/xmlhttprequest/readystate/index.html | 152 +++++ .../xmlhttprequest/usare_xmlhttprequest/index.html | 741 +++++++++++++++++++++ .../api/xmlhttprequest/xmlhttprequest/index.html | 50 ++ 6 files changed, 1350 insertions(+) create mode 100644 files/it/web/api/xmlhttprequest/index.html create mode 100644 files/it/web/api/xmlhttprequest/onreadystatechange/index.html create mode 100644 files/it/web/api/xmlhttprequest/open/index.html create mode 100644 files/it/web/api/xmlhttprequest/readystate/index.html create mode 100644 files/it/web/api/xmlhttprequest/usare_xmlhttprequest/index.html create mode 100644 files/it/web/api/xmlhttprequest/xmlhttprequest/index.html (limited to 'files/it/web/api/xmlhttprequest') diff --git a/files/it/web/api/xmlhttprequest/index.html b/files/it/web/api/xmlhttprequest/index.html new file mode 100644 index 0000000000..634bd2ea10 --- /dev/null +++ b/files/it/web/api/xmlhttprequest/index.html @@ -0,0 +1,173 @@ +--- +title: XMLHttpRequest +slug: Web/API/XMLHttpRequest +tags: + - AJAX API HTTP XMLHttpRequest +translation_of: Web/API/XMLHttpRequest +--- +
{{outdated()}}
+ +

Questo oggetto è il cuore di AJAX: è infatti lo strumento che JavaScript utilizza per accedere a un documento XML.

+ +

Il W3C ha pubblicato una bozza di standard per questo oggetto il 5 aprile 2006.

+ +

Seguono alcuni link:

+ + + + + +
{{APIRef("XMLHttpRequest")}}
+ +

XMLHttpRequest è una API (interfaccia alla progammazione) la quale fornisce al client le funzionalità di trasferire bidirezionalmente dati tra esso ed il server in maniera sincrona od asincrona senza che il browser richieda al server una porzione di dati senza necessariamente effettuar l'aggiornamento della pagina.

+ +

Nonostante il nome dato, XMLHttpRequest, originariamente sviluppato da Microsoft e successivamente adottato dalle altre case di sviluppo browser attraverso il suo standard, supporta protocolli HTTP (inclusi quelli di tipo file ed ftp) oltre che l'XML.

+ +

Struttura di controllo

+ +
+
{{domxref("XMLHttpRequest.XMLHttpRequest", "XMLHttpRequest()")}}
+
La struttura di controllo viene inizializzata con la funzione XMLHttpRequest() e necessita la sua chiamata prima di ogni altro suo metodo.
+
+ +

Proprietà

+ +

XMLHttpRequest eredita le proprietà di {{domxref("XMLHttpRequestEventTarget")}} e di {{domxref("EventTarget")}}:

+ +
+
{{domxref("XMLHttpRequest.onreadystatechange")}}
+
E' un {{domxref("EventHandler")}} chiamato al mutare di un readyState (stato di un evento).
+
{{domxref("XMLHttpRequest.readyState")}} {{readonlyinline}}
+
Restituisce un unsigned short, rappresentante lo stato della richiesta.
+
{{domxref("XMLHttpRequest.response")}} {{readonlyinline}}
+
Restituisce dati di tipo {{domxref("ArrayBuffer")}}, {{domxref("Blob")}}, {{domxref("Document")}},  oggetti JavaScript, od una {{domxref("DOMString")}}, a seconda del valore {{domxref("XMLHttpRequest.responseType")}}. la quale descrive l'entità del corpo della richiesta.
+
{{domxref("XMLHttpRequest.responseText")}} {{readonlyinline}}
+
Restituisce una {{domxref("DOMString")}} la quale contiene l'esito della chiamata sotto forma testuale oppure null se la richiesta non ha riscontri o nel caso non sia stata ancora operata.
+
{{domxref("XMLHttpRequest.responseType")}}
+
E' un valore enumerato il quale definisce il tipo del risultato della chiamata.
+
{{domxref("XMLHttpRequest.responseURL")}} {{readonlyinline}}
+
Restituisce l'URL serializzato dell'esito della chiamata (in una stringa vuota se l'URL è vacante).
+
{{domxref("XMLHttpRequest.responseXML")}} {{readonlyinline}}
+
Restituisce un {{domxref("Documento")}} contenente l'esito della chiamata (di tipo null nei casi in cui la richiesta non abbia esito, non sia stata inviata, o non possa essere convertita in XML o HTML). Not available in workers.
+
{{domxref("XMLHttpRequest.status")}} {{readonlyinline}}
+
Restituisce un dato di tipo unsigned short rappresentante lo stato dell'esito della chiamata.
+
{{domxref("XMLHttpRequest.statusText")}} {{readonlyinline}}
+
Restituisce una {{domxref("DOMString")}} contentente l'esito (in forma di stringa) fornita dal server HTTP. A differenza di {{domxref("XMLHTTPRequest.status")}}, include l'intero testo del messaggio in risposta (es. "200 OK").
+
{{domxref("XMLHttpRequest.timeout")}}
+
Restituisce un unsigned long rappresentante il numero (espresso in millisecondi) rimanente alla chiamata prima che questa venga automaticamente soppressa.
+
{{domxref("XMLHttpRequestEventTarget.ontimeout")}}
+
E' un {{domxref("EventHandler")}} (gestore di eventi) che può occorrere quando una richiesta termina in timeout. {{gecko_minversion_inline("12.0")}}
+
{{domxref("XMLHttpRequest.upload")}} {{readonlyinline}}
+
{{domxref("XMLHttpRequestUpload")}}, rappresenta un processo di upload.
+
{{domxref("XMLHttpRequest.withCredentials")}}
+
Fornisce uno stato {{jsxref("Boolean")}} che indica quando //that indicates whether or not cross-site Access-Control requests should be made using credentials such as cookies or authorization headers.
+
 
+
+

Proprietà non-standard

+
+
{{domxref("XMLHttpRequest.channel")}}{{ReadOnlyInline}}
+
{{Interface("nsIChannel")}}. Definisce il canale utilizzato dall'oggetto quando effettua la chiamata.
+
{{domxref("XMLHttpRequest.mozAnon")}}{{ReadOnlyInline}}
+
Restituisce un dato boolenao, true nel caso la chiamata venga inviata priva di cookie e/o dati di autenticazione nell'header.
+
{{domxref("XMLHttpRequest.mozSystem")}}{{ReadOnlyInline}}
+
Restituisce un dato booleano true nel caso in cui gli stessi parametri di origine non siano comparati dalla chiamata.
+
{{domxref("XMLHttpRequest.mozBackgroundRequest")}}
+
Restituisce un valore booleano indicante se l'oggetto rappresenta una chiamata attiva latente.
+
{{domxref("XMLHttpRequest.mozResponseArrayBuffer")}}{{gecko_minversion_inline("2.0")}} {{obsolete_inline("6")}} {{ReadOnlyInline}}
+
E' un ArrayBuffer. contentente il risultato della chiamata in forma di un array JavaScript tipizzato.
+
{{domxref("XMLHttpRequest.multipart")}}{{obsolete_inline("22")}}
+
Questa funzione Gecko-only , booleana, è stata rimossa a partire da Firefox/Gecko 22. In sostituzione si veda Server-Sent Events, Web Sockets, o responseText per il monitoraggio dei progressi degli eventi.
+
+

Gestori degli eventi

+ +

onreadystatechange come proprietà dell'istanza XMLHttpRequest è supportata in ogni browser.

+ +

In virtù di ciò, un numero sempre maggiore di trigger degli eventi è stata implementata in vari browser (onload, onerror, onprogress, etc.). Ognuno di questi è supportato da Firefox, in particolare si veda nsIXMLHttpRequestEventTarget e Using XMLHttpRequest.

+ +

Molte versioni recenti di browser, Firefox e derivate incluse, supportano la ricezione degli eventi XMLHttpRequest mediante le API standard addEventListener in aggiunta alle proprietà aggiuntive applicate ai metodi dei gestori degli eventi.

+ +

Metodi

+
+
     {{domxref("XMLHttpRequest.abort()")}}
+
 
+
Interrompe la chiamata se è stata già inviata.
+
{{domxref("XMLHttpRequest.getAllResponseHeaders()")}}
+
Restituisce tutti gli header in risposta, separati da CRLF, sottoforma di stringa o null se non viene ricevuto nessun risultato.
+
{{domxref("XMLHttpRequest.getResponseHeader()")}}
+
Restituisce la stringa contenente il testo dell'header specifico o null se anche il risultato non è stato ricevuto o l'header non esiste.
+
{{domxref("XMLHttpRequest.open()")}}
+
Inizializza una chiamata. Questa funzione è derivante da codice Javascript; per inizializzare una chiamata dal codice nativo si veda openRequest().
+
{{domxref("XMLHttpRequest.overrideMimeType()")}}
+
Revoca il MIME type inviato dal server.
+
{{domxref("XMLHttpRequest.send()")}}
+
Invia la richiesta. Se la richiesta è asincrona (come è di default) questo metodo risponde non appena terminato l'invio della richiesta attiva.
+
{{domxref("XMLHttpRequest.setRequestHeader()")}}
+
Stabilisce il valore di un header HTTP di richiesta. E' preferibile chiamare setRequestHeader()dopo open(), ma prima di send().
+
+

Metodi non-standard

+
+
{{domxref("XMLHttpRequest.init()")}}
+
Inizializza l'oggetto da usare in codice C++.
+
+
Attenzione: Questo metodo non deve essere eseguito da JavaScript.
+
+
{{domxref("XMLHttpRequest.openRequest()")}}
+
Inizializza una richiesta. Questo metodo è derivante da codice nativo; per inizializzare una richiesta da JavaScript si utilizzi invece open().
+
{{domxref("XMLHttpRequest.sendAsBinary()")}}{{deprecated_inline()}}
+
Una variante del metodo send() il quale invia dati binari.
+
+

Specifiche

+ + + + + + + + + + + + + + +
SpecificheStatoCommenti
{{SpecName('XMLHttpRequest')}}{{Spec2('XMLHttpRequest')}}Live standard, ultima versione
+
+
+ +

Compatibilità

+ +

 

+ + + +
{{Compat("api.XMLHttpRequest")}}
+ +

Voci correlate

+ + diff --git a/files/it/web/api/xmlhttprequest/onreadystatechange/index.html b/files/it/web/api/xmlhttprequest/onreadystatechange/index.html new file mode 100644 index 0000000000..1bbfb02852 --- /dev/null +++ b/files/it/web/api/xmlhttprequest/onreadystatechange/index.html @@ -0,0 +1,119 @@ +--- +title: XMLHttpRequest.onreadystatechange +slug: Web/API/XMLHttpRequest/onreadystatechange +translation_of: Web/API/XMLHttpRequest/onreadystatechange +--- +
{{APIRef}}
+ +

UN EventHandler  che è invocato ogni volta che l'attributo readyState cambia. la callback è invocata dal thread dell'interfaccia utente. 

+ +

La proprietà XMLHttpRequest.onreadystatechange  contiene l'event handler che deve essere invocato quando l'evento {{event("readystatechange")}} si verifica, ovvero ogni volta in cui la proprietà {{domxref("XMLHttpRequest.readyState", "readyState")}} del {{domxref("XMLHttpRequest")}} viene modificata.

+ +
+

Warning: This should not be used with synchronous requests and must not be used from native code. .

+
+ +

L'evento readystatechange non si verificherà se una richiesta XMLHttpRequest viene cancellata utilizzando il metodo abort().

+ +
+

UPDATE: it's firing in the latest version of browsers (Firefox 51.0.1, Opera 43.0.2442.991, Safari 10.0.3 (12602.4.8), Chrome 54.0.2840.71, Edge, IE11). Example here - just reaload page few times.

+
+ +

Syntax

+ +
XMLHttpRequest.onreadystatechange = callback;
+ +

Values

+ + + +

Example

+ +
var xhr = new XMLHttpRequest(),
+    method = "GET",
+    url = "https://developer.mozilla.org/";
+
+xhr.open(method, url, true);
+xhr.onreadystatechange = function () {
+  if(xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
+    console.log(xhr.responseText);
+  }
+};
+xhr.send();
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('XMLHttpRequest', '#handler-xhr-onreadystatechange')}}{{Spec2('XMLHttpRequest')}}WHATWG living standard
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatChrome(1)}}{{CompatVersionUnknown}}{{CompatGeckoDesktop(1.0)}}{{CompatIe(7)}}[1]{{CompatVersionUnknown}}{{CompatSafari(1.2)}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}1.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Internet Explorer version 5 and 6 supported ajax calls using ActiveXObject().

diff --git a/files/it/web/api/xmlhttprequest/open/index.html b/files/it/web/api/xmlhttprequest/open/index.html new file mode 100644 index 0000000000..b4786aecc6 --- /dev/null +++ b/files/it/web/api/xmlhttprequest/open/index.html @@ -0,0 +1,115 @@ +--- +title: XMLHttpRequest.open() +slug: Web/API/XMLHttpRequest/open +translation_of: Web/API/XMLHttpRequest/open +--- +

{{APIRef('XMLHttpRequest')}}

+ +

Il metodo XMLHttpRequest.open() inizializza una richiesta. Questo metodo è utilizzato da codice JavaScript; invece, per inizializzare una richiesta da codice nativo, usare openRequest().

+ +
Nota: Chiamare questo metodo da una richiesta già attiva (una in cui open() o openRequest() è stata già chiamata) è equivalente a chiamare abort().
+ +

Sintassi

+ +
XMLHttpRequest.open(metodo, url)
+XMLHttpRequest.open(metodo, url, async)
+XMLHttpRequest.open(metodo, url, async, utente)
+XMLHttpRequest.open(metodo, url, async, utente, password)
+
+ +

Parameters

+ +
+
metodo
+
Il metodo HTTP da utilizzare, come "GET", "POST", "PUT", "DELETE", ecc. Campo ignorato per URL non-HTTP(S).
+
url
+
{{domxref("DOMString")}} che rappresenta l'URL a cui inviare la richiesta.
+
async {{optional_inline}}
+
Un parametro opzionale Booleano, true in maniera predefinita, indicante se effettuare o meno l'operazione in modalità asincrona. Se questo valore è false, il metodo send() non ritornerà finchè la risposta non sarà ricevuta. Se true, la notifica di una transazione completata è fornita utilizzando gli event listener. Questo must essere true se l'attributo multipart è true, o partirà un eccezione. +
Nota: Da Gecko 30.0 {{geckoRelease("30.0")}}, le richieste sincrone sul thread principale sono state deprecate a causa di effetti negativi sull'esperienza utente.
+
+
utente {{optional_inline}}
+
Il valore opzionale del nome dell'utente da utilizzare per scopi di autenticazione; il valore predefinito è null.
+
password {{optional_inline}}
+
La password opzionale da utilizzare per scopi di autenticaziones; il valore predefinito è null.
+
+ +

Specifiche

+ + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName('XMLHttpRequest', '#the-open()-method', 'open()')}}{{Spec2('XMLHttpRequest')}}WHATWG living standard
+ +

Compatibilità fra browser

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FunzionalitàChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(1)}}{{CompatVersionUnknown}}{{ CompatVersionUnknown}}{{CompatIe('5')}}[1]
+ {{CompatIe('7')}}		{{CompatVersionUnknown}}{{CompatSafari('1.2')}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FunzionalitàAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Supporto di base{{ CompatVersionUnknown}}1.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{ CompatVersionUnknown}}{{ CompatVersionUnknown}}{{ CompatVersionUnknown}}
+
+ +

[1] Questa funzionalità è stata implementata attraverso ActiveXObject(). Internet Explorer implementa lo standard XMLHttpRequest dalla versione 7.

+ +

Vedi anche

+ +

Utilizzare XMLHttpRequest

diff --git a/files/it/web/api/xmlhttprequest/readystate/index.html b/files/it/web/api/xmlhttprequest/readystate/index.html new file mode 100644 index 0000000000..a37fa1e1db --- /dev/null +++ b/files/it/web/api/xmlhttprequest/readystate/index.html @@ -0,0 +1,152 @@ +--- +title: XMLHttpRequest.readyState +slug: Web/API/XMLHttpRequest/readyState +translation_of: Web/API/XMLHttpRequest/readyState +--- +

{{APIRef('XMLHttpRequest')}}

+ +

la proprietà XMLHttpRequest.readyState restituisce lo stato nel quale si trova il client di una richiesta XMLHttpRequest. Un client XHR si può trovare in uno degli stati seguenti:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ValueStateDescription
0UNSENTIl Client è stato creato, ma il metodo open() della XHR non è stato ancora invocato.
1OPENEDIl metodo open() è stato invocato.
2HEADERS_RECEIVEDIl metodo send() della XHR è stato invocato, e sono già disponibili lo status della risposta HTTP ed il suo header. 
3LOADINGSta avvenendo il download dei dati; responseText contiene dati parziali.
4DONEL'operazione è stata completata.
+ +
+
UNSENT
+
Il Client è stato creato, ma il metodo open() della XHR non è stato ancora invocato.
+
OPENED
+
Il metodo open() della XHR è stato invocato. In questo stato è possibile settare l' header della richiesta HTTP utilizzando il metodo setRequestHeader(); può essere invocato il metodo send(), che inizia il fetch della richiesta.
+
HEADERS_RECEIVED
+
Il metodo send() è stato invocato e sono stati ricevuto gli headers della risposta; è possibile conoscere il codice della risposta HTTP ed i suoi metadati.
+
LOADING
+
Sta avvenendo il download del body della risposta HTTP; se il responseType è "text" o vuoto, responseText conterrà un testo parziale.
+
DONE
+
L'operazione di fetch è terminata; Questo può significare sia che il trasferimento dei dati è stato un successo e questi sono completamente disponibili o che è fallito.
+
+ +
+

The state names are different in Internet Explorer. Instead of UNSENT, OPENED, HEADERS_RECEIVED, LOADING and DONE, the names READYSTATE_UNINITIALIZED (0), READYSTATE_LOADING (1), READYSTATE_LOADED (2), READYSTATE_INTERACTIVE (3) and READYSTATE_COMPLETE (4) are used.

+
+ +

Example

+ +
var xhr = new XMLHttpRequest();
+console.log('UNSENT', xhr.readyState); // readyState sarà pari a 0
+
+xhr.open('GET', '/api', true);
+console.log('OPENED', xhr.readyState); // readyState sarà pari a 1
+
+xhr.onprogress = function () {
+    console.log('LOADING', xhr.readyState); // readyState sarà pari a 3
+};
+
+xhr.onload = function () {
+    console.log('DONE', xhr.readyState); // readyState sarà pari a 4
+};
+
+xhr.send(null);
+
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('XMLHttpRequest', '#states')}}{{Spec2('XMLHttpRequest')}}WHATWG living standard
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(1)}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.0")}}[1]{{CompatIe(7)}}{{CompatVersionUnknown}}{{CompatSafari("1.2")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}1.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
diff --git a/files/it/web/api/xmlhttprequest/usare_xmlhttprequest/index.html b/files/it/web/api/xmlhttprequest/usare_xmlhttprequest/index.html new file mode 100644 index 0000000000..4f55ac07ff --- /dev/null +++ b/files/it/web/api/xmlhttprequest/usare_xmlhttprequest/index.html @@ -0,0 +1,741 @@ +--- +title: Usare XMLHttpRequest +slug: Web/API/XMLHttpRequest/Usare_XMLHttpRequest +translation_of: Web/API/XMLHttpRequest/Using_XMLHttpRequest +--- +

Per inviare una richiesta HTTP, crea  un oggetto {{domxref("XMLHttpRequest")}}, apri un URL, ed invia la richiesta. Dopo che la transazione è completata, l'oggetto conterrà informazioni utili come il testo di risposta e lo stato HTTP. Questa pagina illustra alcuni dei più comuni e oscuri casi d'uso di questo potente oggetto XMLHttpRequest.

+ +
function reqListener () {
+  console.log(this.responseText);
+}
+
+var oReq = new XMLHttpRequest();
+oReq.onload = reqListener;
+oReq.open("GET", "http://www.example.org/example.txt");
+oReq.send();
+ +

Tipi di Richieste

+ +

Una richiesta inviata con XMLHttpRequest può essere restituita in due modi, sincrona o asincrona. Il tipo di richiesta viene deciso dall'argomento opzionale async (il terzo argomento) che viene impostato nel metodo open() di {{domxref("XMLHttpRequest.open()")}}. Se l'argomento è true o se non è specificato, il XMLHttpRequest è processato in maniera asincrona, in caso contrario è processato in maniera sincrona. Una discussione dettagliata è una dimostrazione di queste due tipologie di richieste possono essere trovate nella pagina richieste sincrone ed asincrone. In generale, dovresti usare raramente le richieste sincrone, se mai ne farai uso.

+ +
Nota: Da Gecko 30.0 {{ geckoRelease("30.0") }}, le richieste sincrone sul thread principale sono state deprecate a causa degli effetti negativi sull'esperienza utente.
+ +

Gestire le risposte

+ +

Ci sono vari tipi di attributi di risposta definite dallo standard W3C sul costruttore XMLHttpRequest. Questi sono in grado di fornire al client che effettua la richiesta importanti informazioni sullo stato della risposta. In alcuni casi in cui si lavora con risposte di tipo non testuale possono riguardare alcuni elementi di analisi e manipulazioni come evidenziato dai paragrafi seguenti.

+ +

Analizzare e modificare la proprietà  responseXML

+ +

Se si usa l'oggetto XMLHttpRequest per ricevere il contenuto di un documento XML remoto, la proprietà responseXML dell'oggetto stesso sarà assegnata a un oggetto DOM contentente un il documento XML a cui è stata effettuata una operazione di parsing. Se si lavora con tale proprietà può essere difficile analizzare e modificare tale proprietà. Di seguito sono riportate i quattro principali metodi per lavorare con tale documento XML:

+ +
    +
  1. Utilizzare XPath per indirizzare (cioè puntare a) parti di esso.
    2. +
  2. Usare JXON per convertire il documento in un albero JavaScript Object.
    3. +
  3. Effettuare il Parsing e la serializzazione XML manualmente su stringhe e oggetti.
    4. +
  4. Utilizzare un XMLSerializer per serializzare alberi DOM su stringhe o file.
    5. +
  5. RegExp possono essere utilizzate se si conosce sempre il contenuto del documento XML a priori. In tal caso, se si utilizzano delle espressioni regolari con coscienza dei ritorni di riga, può essere necessario o consigliato di rimuovere le interruzioni di riga. In ogni caso è sempre sconsigliato utilizzare questo metodo e di considerarlo solo come "ultima spiaggia" in quanto se il documento XML dovesse cambiare anche in modo irrisorio questa metodologia potrebbe fallire.
    6. +
+ +

Analizzare e manipolare una proprietà responseText contenentente un documento HTML

+ +
Nota: La W3C XMLHttpRequest specification permette il parse del codice HTML tramite la proprietà XMLHttpRequest.responseXML. SI legga l'articolo a riguardo HTML in XMLHttpRequest per dettagli.
+ +

Se si utilizza l'oggetto XMLHttpRequest per ottenere il contenuto di una pagina HTML remota, la proprietà responseText conterrà un amalgama di tutti i tag HTML. Ciò può essere difficile da manipolare e analizzare. Ci sono principalmente tre divere metodologie per analizzare questo insieme:

+ +
    +
  1. Utilizzare la proprietà XMLHttpRequest.responseXML.
    2. +
  2. Iniettare il contenuto nel corpo di un document fragment attraverso la proprietà fragment.body.innerHTML e navigare il codice DOM del fragment.
    3. +
  3. Ancora una volta RegExp possono essere utlizzate se si conosce sempre il contenuto della risposta HTML. Questo metodo è, comuqnue, sconsigliato perchè anche una piccola modifica del codice HTML sorgente potrebbe protare questa metodologia a fallire.
    4. +
+ +

Gestire dati binari

+ +

Nonostante l'oggetto XMLHttpRequest è principalmente utilizzato per ricevere e inviare dati testuali, può essere utilizzato per inviare e ricevere dati dal contenuto binario. Esistono svariati metodi ben testati per fare sì che l'oggetto in questione invii dati binari. Questi metodo prevedono l'utilizzo del metodo .overrideMimeType(...) sull'oggetto.

+ +
var oReq = new XMLHttpRequest();
+oReq.open("GET", url, true);
+// riceve dei dati non porcessati come una stringa binaria
+oReq.overrideMimeType("text/plain; charset=x-user-defined");
+/* ... */
+
+ +

La XMLHttpRequest Level 2 Specification aggiunge un nuovo attributo responseType che permette di inviare e ricevere dati binari in modo molto più semplice.

+ +
var oReq = new XMLHttpRequest();
+
+oReq.open("GET", url, true);
+oReq.responseType = "arraybuffer";
+oReq.onload = function(e) {
+  var arraybuffer = oReq.response; // non responseText
+  /* ... */
+}
+oReq.send();
+
+ +

Per più esempi si veda la pagina Sending and Receiving Binary Data.

+ +

Monitoraggio del progresso

+ +

L'oggetto XMLHttpRequest fornisce la possibilità di ascoltare svariati eventi che possono occorrere mentre la richiesta è processata. Questo inclulde periodici aggiornamenti sul progresso, notificazione di errori e così via.

+ +

Il supporto agli eventi di monitoraggio del progresso DOM dell'oggetto XMLHttpRequest ripetta le API specification progress events: tali eventi implementano l'interfaccia {{domxref("ProgressEvent")}}.

+ +
var oReq = new XMLHttpRequest();
+
+oReq.addEventListener("progress", updateProgress, false);
+oReq.addEventListener("load", transferComplete, false);
+oReq.addEventListener("error", transferFailed, false);
+oReq.addEventListener("abort", transferCanceled, false);
+
+oReq.open();
+
+// ...
+
+// progress on transfers from the server to the client (downloads)
+function updateProgress (oEvent) {
+  if (oEvent.lengthComputable) {
+    var percentComplete = oEvent.loaded / oEvent.total;
+    // ...
+  } else {
+    // Impossibile elaborare il progresso perche' non si conosce la grandezza totale
+  }
+}
+
+function transferComplete(evt) {
+  alert("Trasferimento completato!");
+}
+
+function transferFailed(evt) {
+  alert("E' avvenuto un errore nel trasferimento");
+}
+
+function transferCanceled(evt) {
+  alert("Il trasferimento è stato cancellato dall'utente");
+}
+ +

Le linee 3-6 aggiungono degli event listener per i vari eventi che sono inviati mentre si performa un trasferimento di dati con l'oggetto XMLHttpRequest.

+ +
Nota: Quando si assegnano degli event listeners è necessario farlo prima di chiamare il metodo open() sulla richiesta. Se ciò non viene effettuato gli eventi non vengono inviati.
+ +

L'event handler per il progresso, specificato dalla funzione updateProgress() in questo esempio, riceve il numero totale di byte da trasferire e il numero di byte trasferiti finora nei campi total e loaded rispettivamente. In ogni caso, se il campo lengthComputable risulta falsa, la lunghezza totale risulta sconosciuta e sarà riportata come zero.

+ +

Gli eventi di progresso esistono sia per il download che per l'upload. Gli eventi di download sono notificati sull'oggetto XMLHttpRequest stesso, come indicato dall'esempio sopra. Quelli di upload, invece, sono notificati sull'attributo XMLHttpRequest.upload come mostrato sotto:

+ +
var oReq = new XMLHttpRequest();
+
+oReq.upload.addEventListener("progress", updateProgress, false);
+oReq.upload.addEventListener("load", transferComplete, false);
+oReq.upload.addEventListener("error", transferFailed, false);
+oReq.upload.addEventListener("abort", transferCanceled, false);
+
+oReq.open();
+
+ +
Nota: Gli eventi di progresso non sono disponibili per il protocollo file://.
+ +
Nota: Correntemente ci sono dei bug aperti per gli eventi di progresso che affliggono la versione 25 di Firefox su OS X e Linux.
+ +
+

Nota: A partire da {{Gecko("9.0")}}, gli eventi di progresso possono essere lanciati per ogni parte di dato ricevuta, inclusa l'ultima parte dove l'ultimo pacchetto è ricevuto e la connesione chiusa prima che l'evento di progresso sia notificato. In questo caso l'evento di progresso è notificato automaticamente quando occorre l'evento di "load" per tale pacchetto. Questo permette di creare un monitoraggio affidabile solamente osservando gli eventi di progresso.

+
+ +
+

Nota: A partire da  {{Gecko("12.0")}}, se l'evento di progresso è chiamato con un responseType di tipo moz-blob, il valore di risposta sarà un {{domxref("Blob")}} contenente i dati ricevuti fino a quel punto.

+
+ +

Si puà anche rilevare tutti e tre le tipologie di terminazione del caricamento(abort, load o error) utilizzando l'evento loadend:

+ +
req.addEventListener("loadend", loadEnd, false);
+
+function loadEnd(e) {
+  alert("Trasferimento terminato (anche se non sappiamo come).");
+}
+
+ +

Si noti che non c'è modo di essere sicuri di conoscere con le informazioni ricevute dall'evento loadend quali condizioni hanno causato il termine dell'operazione. In ogni caso si può usare questo per gestire operazioni che devono essere eseguite al termine del trasferimento.

+ +

Inviare form e caricare file

+ +

Istanze di un oggetto XMLHttpRequest possono essere usate per inviare form in principalmente due modi:

+ + + +

Il secondo modo (utilizzando l'oggetto FormData) è il più semplice e veloce, ma ha lo svantaggio che i dati raccolto non possono essere trasformati in stringa.
+ Il primo modo, invece, è più complesso, ma è anche in cambio più potente e flessibile.

+ +

Usando l'oggetto XMLHttpRequest

+ +

Inviare form senza le API dell'oggetto FormData non richiede l'utilizzo di altre API tranne nel caso di FileReader nel caso si voglia caricare più di un file.

+ +

Una breve introduzione del metodo submit

+ +

Un html {{ HTMLElement("form") }} può essere inviata in quattro possibili modi:

+ + + +

Ora, si consideri di inviare una form contenente solo due campi, chiamati foo e baz. Se si sta utilizzando il metodo POST il server riceverà una stringa simile a una delle seguenti tre linee a seconda del tipo di encoding utilizzato:

+ + + +

Invece, se si utilizza un metodo GET una stringa simile alla seguente sarà semplicemente aggiunta all'URL:

+ +
?foo=bar&baz=The%20first%20line.%0AThe%20second%20line.
+ +

Un piccolo framwork vanilla

+ +

Tutte queste cose sono eseguite automaticamente dal web browser ogni volta che si esegue il submit di una {{ HTMLElement("form") }}. Ma se si vuole fare lo stesso usando JavaScript bisogna istruire l'interprete su tutte le operazioni da eseguire. Inviare delle form in AJAX puro risulta troppo complesso per essere spiegato qui; per questa ragione abbiamo creato un framework completo (ma comunque puramente didattico) che possa essere usato in tutti e quattro i metodi di submit e anche per caricare dei file.

+ +
+
<!doctype html>
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+<title>Sending forms with pure AJAX &ndash; MDN</title>
+<script type="text/javascript">
+
+"use strict";
+
+/*\
+|*|
+|*|  :: XMLHttpRequest.prototype.sendAsBinary() Polyfill ::
+|*|
+|*|  https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest#sendAsBinary()
+\*/
+
+if (!XMLHttpRequest.prototype.sendAsBinary) {
+  XMLHttpRequest.prototype.sendAsBinary = function(sData) {
+    var nBytes = sData.length, ui8Data = new Uint8Array(nBytes);
+    for (var nIdx = 0; nIdx < nBytes; nIdx++) {
+      ui8Data[nIdx] = sData.charCodeAt(nIdx) & 0xff;
+    }
+    /* send as ArrayBufferView...: */
+    this.send(ui8Data);
+    /* ...or as ArrayBuffer (legacy)...: this.send(ui8Data.buffer); */
+  };
+}
+
+/*\
+|*|
+|*|  :: AJAX Form Submit Framework ::
+|*|
+|*|  https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest
+|*|
+|*|  This framework is released under the GNU Public License, version 3 or later.
+|*|  http://www.gnu.org/licenses/gpl-3.0-standalone.html
+|*|
+|*|  Syntax:
+|*|
+|*|   AJAXSubmit(HTMLFormElement);
+\*/
+
+var AJAXSubmit = (function () {
+
+  function ajaxSuccess () {
+    /* console.log("AJAXSubmit - Success!"); */
+    alert(this.responseText);
+    /* you can get the serialized data through the "submittedData" custom property: */
+    /* alert(JSON.stringify(this.submittedData)); */
+  }
+
+  function submitData (oData) {
+    /* the AJAX request... */
+    var oAjaxReq = new XMLHttpRequest();
+    oAjaxReq.submittedData = oData;
+    oAjaxReq.onload = ajaxSuccess;
+    if (oData.technique === 0) {
+      /* method is GET */
+      oAjaxReq.open("get", oData.receiver.replace(/(?:\?.*)?$/, oData.segments.length > 0 ? "?" + oData.segments.join("&") : ""), true);
+      oAjaxReq.send(null);
+    } else {
+      /* method is POST */
+      oAjaxReq.open("post", oData.receiver, true);
+      if (oData.technique === 3) {
+        /* enctype is multipart/form-data */
+        var sBoundary = "---------------------------" + Date.now().toString(16);
+        oAjaxReq.setRequestHeader("Content-Type", "multipart\/form-data; boundary=" + sBoundary);
+        oAjaxReq.sendAsBinary("--" + sBoundary + "\r\n" + oData.segments.join("--" + sBoundary + "\r\n") + "--" + sBoundary + "--\r\n");
+      } else {
+        /* enctype is application/x-www-form-urlencoded or text/plain */
+        oAjaxReq.setRequestHeader("Content-Type", oData.contentType);
+        oAjaxReq.send(oData.segments.join(oData.technique === 2 ? "\r\n" : "&"));
+      }
+    }
+  }
+
+  function processStatus (oData) {
+    if (oData.status > 0) { return; }
+    /* the form is now totally serialized! do something before sending it to the server... */
+    /* doSomething(oData); */
+    /* console.log("AJAXSubmit - The form is now serialized. Submitting..."); */
+    submitData (oData);
+  }
+
+  function pushSegment (oFREvt) {
+    this.owner.segments[this.segmentIdx] += oFREvt.target.result + "\r\n";
+    this.owner.status--;
+    processStatus(this.owner);
+  }
+
+  function plainEscape (sText) {
+    /* how should I treat a text/plain form encoding? what characters are not allowed? this is what I suppose...: */
+    /* "4\3\7 - Einstein said E=mc2" ----> "4\\3\\7\ -\ Einstein\ said\ E\=mc2" */
+    return sText.replace(/[\s\=\\]/g, "\\$&");
+  }
+
+  function SubmitRequest (oTarget) {
+    var nFile, sFieldType, oField, oSegmReq, oFile, bIsPost = oTarget.method.toLowerCase() === "post";
+    /* console.log("AJAXSubmit - Serializing form..."); */
+    this.contentType = bIsPost && oTarget.enctype ? oTarget.enctype : "application\/x-www-form-urlencoded";
+    this.technique = bIsPost ? this.contentType === "multipart\/form-data" ? 3 : this.contentType === "text\/plain" ? 2 : 1 : 0;
+    this.receiver = oTarget.action;
+    this.status = 0;
+    this.segments = [];
+    var fFilter = this.technique === 2 ? plainEscape : escape;
+    for (var nItem = 0; nItem < oTarget.elements.length; nItem++) {
+      oField = oTarget.elements[nItem];
+      if (!oField.hasAttribute("name")) { continue; }
+      sFieldType = oField.nodeName.toUpperCase() === "INPUT" ? oField.getAttribute("type").toUpperCase() : "TEXT";
+      if (sFieldType === "FILE" && oField.files.length > 0) {
+        if (this.technique === 3) {
+          /* enctype is multipart/form-data */
+          for (nFile = 0; nFile < oField.files.length; nFile++) {
+            oFile = oField.files[nFile];
+            oSegmReq = new FileReader();
+            /* (custom properties:) */
+            oSegmReq.segmentIdx = this.segments.length;
+            oSegmReq.owner = this;
+            /* (end of custom properties) */
+            oSegmReq.onload = pushSegment;
+            this.segments.push("Content-Disposition: form-data; name=\"" + oField.name + "\"; filename=\""+ oFile.name + "\"\r\nContent-Type: " + oFile.type + "\r\n\r\n");
+            this.status++;
+            oSegmReq.readAsBinaryString(oFile);
+          }
+        } else {
+          /* enctype is application/x-www-form-urlencoded or text/plain or method is GET: files will not be sent! */
+          for (nFile = 0; nFile < oField.files.length; this.segments.push(fFilter(oField.name) + "=" + fFilter(oField.files[nFile++].name)));
+        }
+      } else if ((sFieldType !== "RADIO" && sFieldType !== "CHECKBOX") || oField.checked) {
+        /* field type is not FILE or is FILE but is empty */
+        this.segments.push(
+          this.technique === 3 ? /* enctype is multipart/form-data */
+            "Content-Disposition: form-data; name=\"" + oField.name + "\"\r\n\r\n" + oField.value + "\r\n"
+          : /* enctype is application/x-www-form-urlencoded or text/plain or method is GET */
+            fFilter(oField.name) + "=" + fFilter(oField.value)
+        );
+      }
+    }
+    processStatus(this);
+  }
+
+  return function (oFormElement) {
+    if (!oFormElement.action) { return; }
+    new SubmitRequest(oFormElement);
+  };
+
+})();
+
+</script>
+</head>
+<body>
+
+<h1>Sending forms with pure AJAX</h1>
+
+<h2>Using the GET method</h2>
+
+<form action="register.php" method="get" onsubmit="AJAXSubmit(this); return false;">
+  <fieldset>
+    <legend>Registration example</legend>
+    <p>
+      First name: <input type="text" name="firstname" /><br />
+      Last name: <input type="text" name="lastname" />
+    </p>
+    <p>
+      <input type="submit" value="Submit" />
+    </p>
+  </fieldset>
+</form>
+
+<h2>Using the POST method</h2>
+<h3>Enctype: application/x-www-form-urlencoded (default)</h3>
+
+<form action="register.php" method="post" onsubmit="AJAXSubmit(this); return false;">
+  <fieldset>
+    <legend>Registration example</legend>
+    <p>
+      First name: <input type="text" name="firstname" /><br />
+      Last name: <input type="text" name="lastname" />
+    </p>
+    <p>
+      <input type="submit" value="Submit" />
+    </p>
+  </fieldset>
+</form>
+
+<h3>Enctype: text/plain</h3>
+
+<form action="register.php" method="post" enctype="text/plain" onsubmit="AJAXSubmit(this); return false;">
+  <fieldset>
+    <legend>Registration example</legend>
+    <p>
+      Your name: <input type="text" name="user" />
+    </p>
+    <p>
+      Your message:<br />
+      <textarea name="message" cols="40" rows="8"></textarea>
+    </p>
+    <p>
+      <input type="submit" value="Submit" />
+    </p>
+  </fieldset>
+</form>
+
+<h3>Enctype: multipart/form-data</h3>
+
+<form action="register.php" method="post" enctype="multipart/form-data" onsubmit="AJAXSubmit(this); return false;">
+  <fieldset>
+    <legend>Upload example</legend>
+    <p>
+      First name: <input type="text" name="firstname" /><br />
+      Last name: <input type="text" name="lastname" /><br />
+      Sex:
+      <input id="sex_male" type="radio" name="sex" value="male" /> <label for="sex_male">Male</label>
+      <input id="sex_female" type="radio" name="sex" value="female" /> <label for="sex_female">Female</label><br />
+      Password: <input type="password" name="secret" /><br />
+      What do you prefer:
+      <select name="image_type">
+        <option>Books</option>
+        <option>Cinema</option>
+        <option>TV</option>
+      </select>
+    </p>
+    <p>
+      Post your photos:
+      <input type="file" multiple name="photos[]">
+    </p>
+    <p>
+      <input id="vehicle_bike" type="checkbox" name="vehicle[]" value="Bike" /> <label for="vehicle_bike">I have a bike</label><br />
+      <input id="vehicle_car" type="checkbox" name="vehicle[]" value="Car" /> <label for="vehicle_car">I have a car</label>
+    </p>
+    <p>
+      Describe yourself:<br />
+      <textarea name="description" cols="50" rows="8"></textarea>
+    </p>
+    <p>
+      <input type="submit" value="Submit" />
+    </p>
+  </fieldset>
+</form>
+
+</body>
+</html>
+
+ +

Per testarlo, create una pagina chiamata register.php (al quale fanno riferimento gli attributi action di queste form) e inserite il seguente contenuto.

+ +
<?php
+/* register.php */
+
+header("Content-type: text/plain");
+
+/*
+NOTE: You should never use `print_r()` in production scripts, or
+otherwise output client-submitted data without sanitizing it first.
+Failing to sanitize can lead to cross-site scripting vulnerabilities.
+*/
+
+echo ":: data received via GET ::\n\n";
+print_r($_GET);
+
+echo "\n\n:: Data received via POST ::\n\n";
+print_r($_POST);
+
+echo "\n\n:: Data received as \"raw\" (text/plain encoding) ::\n\n";
+if (isset($HTTP_RAW_POST_DATA)) { echo $HTTP_RAW_POST_DATA; }
+
+echo "\n\n:: Files received ::\n\n";
+print_r($_FILES);
+
+
+ +

La sintassi per attivare lo script è semplicemente:

+ +
AJAXSubmit(myForm);
+ +
Nota: Questo framework utilizza l'API FileReader per eseguire l'upload dei file. QUesta è una API recente e non ancora implementata nei browser come IE9 o inferiori. Per questa ragione l'upload AJAX-only è considerato una  tecnica sperimentale. Se non si ha bisogno dell'upload di file binari questo framework funzionera egregiamente nella maggior parte dei browser.
+ +
Nota: Il modo migliore per inviare dei contenuti binari è attraverso ArrayBuffers o Blobs attraverso il metodo send() e possibilmente il metodo readAsArrayBuffer() dell'API FileReader. Ma, siccome l'obiettivo di questo script è di fuonzionare con dei dati  stringifiabli, si è usato il metodo sendAsBinary() assieme al metodo readAsBinaryString() delle API FileReader. Per questo, lo script sopra funziona sono quando si stanno gestendo file di piccole dimensioni. Se non si intende caricare del contenuto binario, considerare anche l'utilizzo delle API FormData.
+ +

Usare oggetti FormData

+ +

Il costruttore FormData permette di compliare una serie di coppie chiave/valore da inviare utilizzando una XMLHttpRequest. Si utilizza principalmente per inviare dati in una form, ma può essere usato indipendentemente dalle form per inviare dei dati con chiavi. I dati trasmessi sono gli stessi del formato utilizzato dal metodo submit() che le form usano per inviare i dati se il tipo encoding indicato è "multipart/form-data". Gli oggetti FormData possono essere utilizzati in uno svariato numero possibile con una XMLHttpRequest. Per esempi o speigazioni di come utilizzare una FormData con XMLHttpRequest si veda la pagina Usare l'oggetto FormData. Per fini didattici di seguito una traduzione dell'esempio precedente modificato per accettare l'API delle FormData. Si noti la brevità del codice.

+ +
+
<!doctype html>
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+<title>Sending forms with FormData &ndash; MDN</title>
+<script type="text/javascript">
+"use strict";
+
+function ajaxSuccess () {
+  alert(this.responseText);
+}
+
+function AJAXSubmit (oFormElement) {
+  if (!oFormElement.action) { return; }
+  var oReq = new XMLHttpRequest();
+  oReq.onload = ajaxSuccess;
+  if (oFormElement.method.toLowerCase() === "post") {
+    oReq.open("post", oFormElement.action, true);
+    oReq.send(new FormData(oFormElement));
+  } else {
+    var oField, sFieldType, nFile, sSearch = "";
+    for (var nItem = 0; nItem < oFormElement.elements.length; nItem++) {
+      oField = oFormElement.elements[nItem];
+      if (!oField.hasAttribute("name")) { continue; }
+      sFieldType = oField.nodeName.toUpperCase() === "INPUT" ? oField.getAttribute("type").toUpperCase() : "TEXT";
+      if (sFieldType === "FILE") {
+        for (nFile = 0; nFile < oField.files.length; sSearch += "&" + escape(oField.name) + "=" + escape(oField.files[nFile++].name));
+      } else if ((sFieldType !== "RADIO" && sFieldType !== "CHECKBOX") || oField.checked) {
+        sSearch += "&" + escape(oField.name) + "=" + escape(oField.value);
+      }
+    }
+    oReq.open("get", oFormElement.action.replace(/(?:\?.*)?$/, sSearch.replace(/^&/, "?")), true);
+    oReq.send(null);
+  }
+}
+</script>
+</head>
+<body>
+
+<h1>Sending forms with FormData</h1>
+
+<h2>Using the GET method</h2>
+
+<form action="register.php" method="get" onsubmit="AJAXSubmit(this); return false;">
+  <fieldset>
+    <legend>Registration example</legend>
+    <p>
+      First name: <input type="text" name="firstname" /><br />
+      Last name: <input type="text" name="lastname" />
+    </p>
+    <p>
+      <input type="submit" value="Submit" />
+    </p>
+  </fieldset>
+</form>
+
+<h2>Using the POST method</h2>
+<h3>Enctype: application/x-www-form-urlencoded (default)</h3>
+
+<form action="register.php" method="post" onsubmit="AJAXSubmit(this); return false;">
+  <fieldset>
+    <legend>Registration example</legend>
+    <p>
+      First name: <input type="text" name="firstname" /><br />
+      Last name: <input type="text" name="lastname" />
+    </p>
+    <p>
+      <input type="submit" value="Submit" />
+    </p>
+  </fieldset>
+</form>
+
+<h3>Enctype: text/plain</h3>
+
+<p>The text/plain encoding is not supported by the FormData API.</p>
+
+<h3>Enctype: multipart/form-data</h3>
+
+<form action="register.php" method="post" enctype="multipart/form-data" onsubmit="AJAXSubmit(this); return false;">
+  <fieldset>
+    <legend>Upload example</legend>
+    <p>
+      First name: <input type="text" name="firstname" /><br />
+      Last name: <input type="text" name="lastname" /><br />
+      Sex:
+      <input id="sex_male" type="radio" name="sex" value="male" /> <label for="sex_male">Male</label>
+      <input id="sex_female" type="radio" name="sex" value="female" /> <label for="sex_female">Female</label><br />
+      Password: <input type="password" name="secret" /><br />
+      What do you prefer:
+      <select name="image_type">
+        <option>Books</option>
+        <option>Cinema</option>
+        <option>TV</option>
+      </select>
+    </p>
+    <p>
+      Post your photos:
+      <input type="file" multiple name="photos[]">
+    </p>
+    <p>
+      <input id="vehicle_bike" type="checkbox" name="vehicle[]" value="Bike" /> <label for="vehicle_bike">I have a bike</label><br />
+      <input id="vehicle_car" type="checkbox" name="vehicle[]" value="Car" /> <label for="vehicle_car">I have a car</label>
+    </p>
+    <p>
+      Describe yourself:<br />
+      <textarea name="description" cols="50" rows="8"></textarea>
+    </p>
+    <p>
+      <input type="submit" value="Submit" />
+    </p>
+  </fieldset>
+</form>
+
+</body>
+</html>
+
+ +
Nota: Come si è detto,gli oggetti {{domxref("FormData")}} non sono stringifiabli. Se si desidera porre in stringa dei dati inviati, utilizzare il precedente esempio in AJAX puro. Si noti che ci sono degli elementi file nel campo {{ HTMLElement("input") }}, quando si invia una form attraverso l'API FormData API non è necessario utilizzare le API FileReader: i file sono automaticamente caricati.
+ +

Get last modified date

+ +
function getHeaderTime () {
+  alert(this.getResponseHeader("Last-Modified"));  /* A valid GMTString date or null */
+}
+
+var oReq = new XMLHttpRequest();
+oReq.open("HEAD" /* use HEAD if you only need the headers! */, "yourpage.html", true);
+oReq.onload = getHeaderTime;
+oReq.send();
+ +

Do something when last modified date changes

+ +

Let's create these two functions:

+ +
function getHeaderTime () {
+
+  var
+    nLastVisit = parseFloat(window.localStorage.getItem('lm_' + this.filepath)),
+    nLastModif = Date.parse(this.getResponseHeader("Last-Modified"));
+
+  if (isNaN(nLastVisit) || nLastModif > nLastVisit) {
+    window.localStorage.setItem('lm_' + this.filepath, Date.now());
+    isFinite(nLastVisit) && this.callback(nLastModif, nLastVisit);
+  }
+
+}
+
+function ifHasChanged(sURL, fCallback) {
+  var oReq = new XMLHttpRequest();
+  oReq.open("HEAD" /* use HEAD - we only need the headers! */, sURL, true);
+  oReq.callback = fCallback;
+  oReq.filepath = sURL;
+  oReq.onload = getHeaderTime;
+  oReq.send();
+}
+ +

Test:

+ +
/* Let's test the file "yourpage.html"... */
+
+ifHasChanged("yourpage.html", function (nModif, nVisit) {
+  alert("The page '" + this.filepath + "' has been changed on " + (new Date(nModif)).toLocaleString() + "!");
+});
+ +

If you want to know whether the current page has changed, please read the article about document.lastModified.

+ +

Cross-site XMLHttpRequest

+ +

Modern browsers support cross-site requests by implementing the web applications working group's Access Control for Cross-Site Requests standard.  As long as the server is configured to allow requests from your web application's origin, XMLHttpRequest will work.  Otherwise, an INVALID_ACCESS_ERR exception is thrown.

+ +

Bypassing the cache

+ +

A, cross-browser compatible approach to bypassing the cache is to append a timestamp to the URL, being sure to include a "?" or "&" as appropriate.  For example:

+ +
http://foo.com/bar.html -> http://foo.com/bar.html?12345
+http://foo.com/bar.html?foobar=baz -> http://foo.com/bar.html?foobar=baz&12345
+
+ +

Since the local cache is indexed by URL, this causes every request to be unique, thereby bypassing the cache.

+ +

You can automatically adjust URLs using the following code:

+ +
var oReq = new XMLHttpRequest();
+
+oReq.open("GET", url + ((/\?/).test(url) ? "&" : "?") + (new Date()).getTime(), true);
+oReq.send(null);
+ +

Security

+ +

{{fx_minversion_note(3, "Versions of Firefox prior to Firefox 3 allowed you to set the preference capability.policy.<policyname>.XMLHttpRequest.open</policyname> to allAccess to give specific sites cross-site access.  This is no longer supported.")}}

+ +

{{fx_minversion_note(5, "Versions of Firefox prior to Firefox 5 could use netscape.security.PrivilegeManager.enablePrivilege(\"UniversalBrowserRead\"); to request cross-site access. This is no longer supported, even though it produces no warning and permission dialog is still presented.")}}

+ +

The recommended way to enable cross-site scripting is to use the Access-Control-Allow-Origin HTTP header in the response to the XMLHttpRequest.

+ +

XMLHttpRequests being stopped

+ +

If you end up with an XMLHttpRequest having status=0 and statusText=null, it means that the request was not allowed to be performed. It was UNSENT. A likely cause for this is when the XMLHttpRequest origin (at the creation of the XMLHttpRequest) has changed when the XMLHttpRequest is then open(). This case can happen for example when one has an XMLHttpRequest that gets fired on an onunload event for a window: the XMLHttpRequest gets in fact created when the window to be closed is still there, and then the request is sent (ie open()) when this window has lost its focus and potentially different window has gained focus. The way to avoid this problem is to set a listener on the new window "activate" event that gets set when the old window has its "unload" event fired.

+ +

Using XMLHttpRequest from JavaScript modules / XPCOM components

+ +

Instantiating XMLHttpRequest from a JavaScript module or an XPCOM component works a little differently; it can't be instantiated using the XMLHttpRequest() constructor. The constructor is not defined inside components and the code results in an error. The best way to work around this is to use the XPCOM component constructor.

+ +
const XMLHttpRequest = Components.Constructor("@mozilla.org/xmlextras/xmlhttprequest;1", "nsIXMLHttpRequest");
+
+ +

Unfortunately in versions of Gecko prior to Gecko 16 there is a bug which can cause requests created this way to be cancelled for no reason.  If you need your code to work on Gecko 15 or earlier, you can get the XMLHttpRequest constructor from the hidden DOM window like so.

+ +
const { XMLHttpRequest } = Components.classes["@mozilla.org/appshell/appShellService;1"]
+                                     .getService(Components.interfaces.nsIAppShellService)
+                                     .hiddenDOMWindow;
+var oReq = new XMLHttpRequest();
+ +

See also

+ +
    +
  1. MDN AJAX introduction
    2. +
  2. HTTP access control
    3. +
  3. How to check the security state of an XMLHTTPRequest over SSL
    4. +
  4. XMLHttpRequest - REST and the Rich User Experience
    5. +
  5. Microsoft documentation
    6. +
  6. Apple developers' reference
    7. +
  7. "Using the XMLHttpRequest Object" (jibbering.com)
    8. +
  8. The XMLHttpRequest Object: W3C Specification
    9. +
  9. Web Progress Events specification
    10. +
  10. +
diff --git a/files/it/web/api/xmlhttprequest/xmlhttprequest/index.html b/files/it/web/api/xmlhttprequest/xmlhttprequest/index.html new file mode 100644 index 0000000000..bb54418a41 --- /dev/null +++ b/files/it/web/api/xmlhttprequest/xmlhttprequest/index.html @@ -0,0 +1,50 @@ +--- +title: XMLHttpRequest() +slug: Web/API/XMLHttpRequest/XMLHttpRequest +translation_of: Web/API/XMLHttpRequest/XMLHttpRequest +--- +
{{draft}}{{APIRef('XMLHttpRequest')}}
+ +

Il costruttore XMLHttpRequest() crea una nuova {{domxref("XMLHttpRequest")}}.

+ +

Per ulteriori dettagli sull'utilizzo di XMLHttpRequest, si veda Come usare XMLHttpRequest.

+ +

Sintassi

+ +
constrichiesta = new XMLHttpRequest();
+
+ +

Parametri

+ +

Nessuno.

+ +

Valore di ritorno

+ +

Un nuovo oggetto {{domxref("XMLHttpRequest")}}. Prima di chiamare {{domxref("XMLHttpRequest.send", "send()")}}, che invia la richiesta al server, l'oggetto va predisposto inizializzandolo, chiamando almeno {{domxref("XMLHttpRequest.open", "open()")}}.

+ +

Sintassi non-standard di Firefox

+ +

Firefox 16 ha aggiunto al costruttore un parametro non-standard che permette di abilitare la modalità anonima (si veda {{Bug("692677")}}). Assegnare il valore true alla flag mozAnon equivale all'atto pratico al costruttore AnonXMLHttpRequest() descritto nelle versioni precedenti delle specifiche di XMLHttpRequest.

+ +
constrichiesta = new XMLHttpRequest(dizParametri);
+ +

Parametri (non-standard)

+ +
+
objParameters {{gecko_minversion_inline("16.0")}}
+
Sono disponibili due flag: +
+
mozAnon
+
Booleano: assegnando true a questa flag il browser non esporrà né l'{{Glossary("origine")}} né le credenziali dell'utente durante il recupero delle risorse. Ciò significa soprattutto che non verrà inviato alcun {{Glossary("Cookie", "cookie")}} a meno di non aggiungerlo esplicitamente attraverso setRequestHeader.
+
mozSystem
+
Booleano: assegnando true a questa flag vengono permesse connessioni inter-sito senza il consenso del server di destinazione dato attraverso {{Glossary("CORS")}}. Richiede anche mozAnon: true, ovvero non si possono inviare cookie od altre credenziali dell'utente usando questo metodo. Questa flag funziona solo in app con privilegi, cioé sottoposte a riesame ({{Bug("692677")}}); non funziona su qualsivoglia pagine caricate da Firefox.
+
+
+
+ +

Voci correlate

+ + -- cgit v1.2.3-54-g00ecf