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 dati in diversi formati.

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>
"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
  if (httpRequest.readyState === XMLHttpRequest.DONE) {

    // controllo lo stato della risposta ricevuta
    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>

<!-- 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>

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);