AJAX - richiesta XMLHttp
L'oggetto XMLHttpRequest viene utilizzato per richiedere dati da un server.
Invia una richiesta a un server
Per inviare una richiesta a un server, utilizziamo i metodi open() e send() XMLHttpRequestdell'oggetto:
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
| Method | Description |
|---|---|
| open(method, url, async) | Specifies the type of request method: the type of request: GET or POST url: the server (file) location async: true (asynchronous) or false (synchronous) |
| send() | Sends the request to the server (used for GET) |
| send(string) | Sends the request to the server (used for POST) |
L'URL - Un file su un server
Il parametro url del open()metodo è un indirizzo di un file su un server:
xhttp.open("GET", "ajax_test.asp", true);
Il file può essere qualsiasi tipo di file, come .txt e .xml, o file di scripting del server come .asp e .php (che possono eseguire azioni sul server prima di inviare la risposta).
Asincrono: vero o falso?
Le richieste del server devono essere inviate in modo asincrono.
Il parametro async del metodo open() deve essere impostato su true:
xhttp.open("GET", "ajax_test.asp", true);
Inviando in modo asincrono, JavaScript non deve attendere la risposta del server, ma può invece:
- eseguire altri script in attesa della risposta del server
- gestire la risposta dopo che la risposta è pronta
Il valore predefinito per il parametro async è async = true.
Puoi rimuovere in sicurezza il terzo parametro dal tuo codice.
XMLHttpRequest sincrono (async = false) non è consigliato perché JavaScript interromperà l'esecuzione fino a quando la risposta del server non sarà pronta. Se il server è occupato o lento, l'applicazione si bloccherà o si arresterà.
RICEVERE o POSTARE?
GETè più semplice e veloce di POSTe può essere utilizzato nella maggior parte dei casi.
Tuttavia, utilizzare sempre le richieste POST quando:
- Un file memorizzato nella cache non è un'opzione (aggiorna un file o un database sul server).
- Invio di una grande quantità di dati al server (il POST non ha limiti di dimensioni).
- Inviando l'input dell'utente (che può contenere caratteri sconosciuti), POST è più robusto e sicuro di GET.
OTTIENI Richieste
Una semplice GETrichiesta:
Esempio
xhttp.open("GET", "demo_get.asp");
xhttp.send();
Nell'esempio sopra, potresti ottenere un risultato memorizzato nella cache. Per evitare ciò, aggiungi un ID univoco all'URL:
Esempio
xhttp.open("GET", "demo_get.asp?t=" + Math.random());
xhttp.send();
Se vuoi inviare informazioni con il GETmetodo, aggiungi le informazioni all'URL:
Esempio
xhttp.open("GET", "demo_get2.asp?fname=Henry&lname=Ford");
xhttp.send();
Il modo in cui il server utilizza l'input e il modo in cui il server risponde a una richiesta è spiegato in un capitolo successivo.
Richieste POST
Una semplice POSTrichiesta:
Esempio
xhttp.open("POST", "demo_post.asp");
xhttp.send();
Per eseguire il POST di dati come un modulo HTML, aggiungi un'intestazione HTTP con setRequestHeader(). Specifica i dati che vuoi inviare nel send()metodo:
Esempio
xhttp.open("POST", "ajax_test.asp");
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("fname=Henry&lname=Ford");
| Method | Description |
|---|---|
| setRequestHeader(header, value) | Adds HTTP headers to the request header: specifies the header name value: specifies the header value |
Richiesta sincrona
Per eseguire una richiesta sincrona, modificare il terzo parametro nel open()metodo in false:
xhttp.open("GET", "ajax_info.txt", false);
A volte async = false vengono utilizzati per test rapidi. Troverai anche richieste sincrone nel codice JavaScript precedente.
Poiché il codice attenderà il completamento del server, non è necessaria una onreadystatechange
funzione:
Esempio
xhttp.open("GET", "ajax_info.txt", false);
xhttp.send();
document.getElementById("demo").innerHTML = xhttp.responseText;
XMLHttpRequest sincrono (async = false) non è consigliato perché JavaScript interromperà l'esecuzione fino a quando la risposta del server non sarà pronta. Se il server è occupato o lento, l'applicazione si bloccherà o si arresterà.
I moderni strumenti per sviluppatori sono incoraggiati a segnalare l'utilizzo di richieste sincrone e possono generare un'eccezione InvalidAccessError quando si verifica.