XMLHttpRequest

richieste asincrone via javascript

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'); // non voglio avere dati presenti nella cache locale httpRequest.setRequestHeader( 'Cache-Control', 'no-cache'); // invio la richiesta al server httpRequest.send(); } </script> </head> <body> <!-- l'attributo onclick indica al browser il codice javascript da eseguire quando l'utente fa click sull'elemento (un paragrafo in questo caso) --> <p onclick="premuto()" id="risposta">premi qui</p> </body> </html>