XMLHttpRequest

ci sono diversi modi per comunicare con un server da parte di una applicazione che gira in un browser e che ha bisogno di aver risposta per una singola richiesta: uno è Fetch API e l'altro sono le classiche richieste asincrone XML che ci accingiamo a vedere (e che non si usano soltanto per XML!).

XMLHttpRequest è un oggetto utilizzabile nei programmi Javascript per interagire con un server remoto comunicando tramite singole interazioni richiesta/risposta.

Microsoft ha sviluppato inizialmengte questo oggetto (perché di un oggetto si tratta) prima del 2000, successivamente nel 2006 ne è stata publicata una bozza di standard dal World Wide Web Consortium. Come il nome suggerisce è stato inventato per trasferire contenuto XML ma attualmente viene usato per diversi formati di file.

Lo scopo per cui viene usato è solitamente quello di trasferire informazioni senza cambiare l'intera pagina e senza bloccare l'utente in attesa di una risposta: viene inviata la richiesta al server e la pagina continua ad essere normalmente interattiva, all'arrivo della risposta questa verrà elaborata (in maniera asincrona) magari per aggiornare la pagina.

Breve riferimento

Quelle sotto sono le proprietà e i metodi più utili, per avere informazioni più dettagliate oltre che sulla pagina dello standard è possibile consultare MDN o w3schools.

onreadystatechange: è una funzione che viene chiamata ogni volta che cambia lo stato della richiesta
open(metodo, risorsa): definisce quale metodo di HTTP (es: get o post) va usato e quale è la risorsa da recuperare
send: è il metodo che serve per inviare la richiesta
readyState: una variabile che contiene l'attuale stato dell'oggetto
responseText: contiene la risposta del server o null in caso di errore
status: lo stato della risposta

Un esempio

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Richiesta via http</title> <script type="text/javascript"> "use strict"; // conterrà la richiesta, deve essere globale perché // viene usata in due diverse funzioni let httpRequest; function statoCambiato(){ // lo stato è cambiato ma non è detto che sia già arrivata // la risposta (potrebbe ad esempio essere lo stato HEADERS_RECEIVED): controllo // sarebbe necessario anche controllare il valore contenuto in status if (httpRequest.readyState === XMLHttpRequest.DONE) { if(httpRequest.status == 200){ // scrivo la risposta nel paragrafo identificato da "risposta" document.getElementById("risposta").innerHTML = httpRequest.responseText; }else{ // scrivo il codice dell'errore nel paragrafo identificato da "risposta" document.getElementById("risposta").innerHTML = "errore "+httpRequest.status; } } } function premuto(){ // creo l'oggetto httpRequest = new XMLHttpRequest(); // imposto la funzione da chiamare ogni volta che ci sarà // un cambiamento di stato httpRequest.onreadystatechange = statoCambiato; // inizializzo la richiesta httpRequest.open('GET', 'info.txt'); // invio la richiesta al server httpRequest.send(); } </script> </head> <body>  <p onclick="premuto()" id="risposta">premi qui</p> </body> </html>

Invio dei dati al server

Nella URL

Il metodo più semplice per inviare dei dati al server (ad esempio dei parametri di ricerca) è quello di usare il metodo GET e scriverli direttamente nella URL: dopo il nome dello script va in inserito un "?" e si possono concatenare usando una "&"

Un esempio chiarirà tutto il da farsi: poniamo di voler inviare allo script "cercatore.php" due parametri per fare la ricerca: il primo è il nome dell'utente "bruce" e il secondo è il nome della localita in cui risiede. La nostra URL sarà: cercatore.php?nome=bruce&localita=gotham

Da tener presente che alcuni caratteri nelle URL non possono essere inseriti perché riservati quindi va usata la funzione encodeURI(uri) ad esempio scrivendoURLDaInviare = encodeURI(miaStringa)

Nel body

Spesso capita di dover però inviare molti dati ad un metodo POST e in questo caso dobbiamo inserirli nel body. Questa cosa non è difficile da fare usando XMLHttpRequest: basta specificare POST come metodo e passarli come parametro a send(), in poche parole:

httpRequest.open('POST', 'script.php');
httpRequest.send(corpoDelMessaggio);