AJAX - Invia una richiesta a un server
L'oggetto XMLHttpRequest viene utilizzato per scambiare dati con un server.
Invia una richiesta a un server
Per inviare una richiesta a un server, utilizziamo i metodi open() e send() dell'oggetto XMLHttpRequest:
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) |
RICEVERE o POSTARE?
GET è più semplice e veloce di POST e 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 richiesta GET:
Esempio
xhttp.open("GET", "demo_get.asp", true);
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(), true);
xhttp.send();
Se desideri inviare informazioni con il metodo GET, aggiungi le informazioni all'URL:
Esempio
xhttp.open("GET", "demo_get2.asp?fname=Henry&lname=Ford", true);
xhttp.send();
Richieste POST
Una semplice richiesta POST:
Esempio
xhttp.open("POST", "demo_post.asp", true);
xhttp.send();
Per eseguire il POST di dati come un modulo HTML, aggiungi un'intestazione HTTP con setRequestHeader(). Specifica i dati che desideri inviare nel metodo send():
Esempio
xhttp.open("POST", "demo_post2.asp", true);
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 |
L'URL - Un file su un server
Il parametro url del metodo open() è 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
La proprietà onreadystatechange
Con l'oggetto XMLHttpRequest è possibile definire una funzione da eseguire quando la richiesta riceve una risposta.
La funzione è definita nella proprietà onreadystatechange dell'oggetto XMLHttpResponse:
Esempio
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML = this.responseText;
}
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
Il file "ajax_info.txt" utilizzato nell'esempio sopra, è un semplice file di testo e si presenta così:
<h1>AJAX</h1>
<p>AJAX is not a programming language.</p>
<p>AJAX is a
technique for accessing web servers from a web page.</p>
<p>AJAX stands for
Asynchronous JavaScript And XML.</p>
Imparerai di più su onreadystatechange in un capitolo successivo.
Richiesta sincrona
Per eseguire una richiesta sincrona, modifica il terzo parametro nel metodo open() su 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 funzione onreadystatechange:
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à.
XMLHttpRequest sincrono è in fase di rimozione dallo standard Web, ma questo processo può richiedere molti anni.
I moderni strumenti per sviluppatori sono incoraggiati a segnalare l'utilizzo di richieste sincrone e possono generare un'eccezione InvalidAccessError quando si verifica.