XMLHttpRequest in JavaScript

Codegrind Team•Aug 23 2024

XMLHttpRequest (XHR) è un’interfaccia JavaScript che permette di eseguire richieste HTTP asincrone ai server web. È una delle tecnologie fondamentali che consentono lo sviluppo di applicazioni web dinamiche e interattive, consentendo di caricare dati dal server senza ricaricare la pagina. Anche se oggi viene spesso sostituita da API più moderne come fetch, XMLHttpRequest rimane una parte essenziale della storia del web e viene ancora utilizzata in molti progetti. In questa guida esploreremo come funziona XMLHttpRequest, come utilizzarlo per fare richieste HTTP e gestire le risposte del server.

Cos’è XMLHttpRequest?

XMLHttpRequest è un oggetto JavaScript che consente di interagire con server in modo asincrono. Può essere utilizzato per recuperare dati da un URL senza dover ricaricare completamente la pagina. Questo approccio è comunemente usato nelle applicazioni web per aggiornare dinamicamente il contenuto della pagina senza interrompere l’esperienza utente.

Funzionalità Principali

Richieste HTTP: Permette di eseguire richieste HTTP GET, POST, PUT, DELETE, e altre.
Asincronia: Supporta operazioni asincrone, evitando che la pagina si blocchi durante l’attesa della risposta.
Gestione delle Risposte: Fornisce meccanismi per gestire le risposte del server, inclusi diversi formati di dati come JSON, XML, testo e altro.

Creazione di una Richiesta XMLHttpRequest

1. Creazione dell’Oggetto XMLHttpRequest

Il primo passo è creare un’istanza dell’oggetto XMLHttpRequest.

let xhr = new XMLHttpRequest();

2. Configurazione della Richiesta

Successivamente, configura la richiesta utilizzando il metodo open(). Questo metodo specifica il tipo di richiesta (GET, POST, ecc.), l’URL di destinazione e se la richiesta deve essere asincrona.

xhr.open("GET", "https://api.esempio.com/dati", true);

3. Invio della Richiesta

Dopo aver configurato la richiesta, inviala usando il metodo send().

xhr.send();

4. Gestione della Risposta

Per gestire la risposta del server, puoi utilizzare la proprietà onreadystatechange o l’evento load.

Esempio Completo di Richiesta GET

let xhr = new XMLHttpRequest();

xhr.open("GET", "https://api.esempio.com/dati", true);

xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log("Risposta ricevuta:", xhr.responseText);
  }
};

xhr.send();

In questo esempio, la richiesta viene eseguita in modo asincrono e la risposta viene gestita quando readyState raggiunge 4 (completato) e status è 200 (successo).

Proprietà di XMLHttpRequest

`readyState`

La proprietà readyState rappresenta lo stato della richiesta XMLHttpRequest. Può assumere i seguenti valori:

0: Non inizializzato (l’oggetto è stato creato, ma open() non è stato chiamato).
1: Aperto (è stato chiamato open() ma non send()).
2: Ricevuto (sono stati ricevuti gli header della risposta).
3: Caricamento (sta ricevendo i dati della risposta).
4: Completato (l’intera risposta è stata ricevuta).

`status`

La proprietà status contiene il codice di stato HTTP della risposta. Ad esempio:

200: Successo.
404: Non trovato.
500: Errore interno del server.

`responseText` e `responseXML`

responseText: Contiene la risposta del server sotto forma di stringa di testo.
responseXML: Contiene la risposta del server come un documento XML (se la risposta è XML).

Esempio di Richiesta POST

Per inviare dati al server, puoi utilizzare una richiesta POST. Ecco un esempio:

let xhr = new XMLHttpRequest();
xhr.open("POST", "https://api.esempio.com/dati", true);
xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");

xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log("Risposta ricevuta:", xhr.responseText);
  }
};

let data = JSON.stringify({ nome: "Mario", età: 30 });
xhr.send(data);

In questo esempio, i dati JSON vengono inviati al server utilizzando il metodo POST. setRequestHeader viene utilizzato per impostare l’header della richiesta.

Gestione degli Errori

È importante gestire gli errori nelle richieste XMLHttpRequest per assicurarsi che l’applicazione risponda correttamente in caso di problemi.

Gestione degli Errori di Rete

Puoi gestire gli errori di rete utilizzando l’evento onerror:

xhr.onerror = function () {
  console.error("Errore di rete durante la richiesta");
};

Timeout delle Richieste

Puoi impostare un timeout per le richieste in modo da evitare che rimangano in sospeso troppo a lungo:

xhr.timeout = 5000; // Timeout di 5 secondi

xhr.ontimeout = function () {
  console.error("La richiesta ha superato il tempo massimo di attesa");
};

Caricamento di File con XMLHttpRequest

XMLHttpRequest può essere utilizzato anche per caricare file su un server. Ecco un esempio di come farlo:

let fileInput = document.querySelector('input[type="file"]');
let file = fileInput.files[0];

let xhr = new XMLHttpRequest();
xhr.open("POST", "https://api.esempio.com/upload", true);

xhr.upload.onprogress = function (event) {
  if (event.lengthComputable) {
    let percentComplete = (event.loaded / event.total) * 100;
    console.log(`Caricamento: ${percentComplete}% completato`);
  }
};

xhr.onload = function () {
  if (xhr.status === 200) {
    console.log("File caricato con successo");
  } else {
    console.error("Errore durante il caricamento del file");
  }
};

xhr.send(file);

In questo esempio, upload.onprogress viene utilizzato per monitorare l’avanzamento del caricamento del file.

Best Practices per l’Uso di XMLHttpRequest

Gestione degli Stati: Controlla sempre readyState e status per assicurarti che la richiesta sia completata con successo prima di elaborare la risposta.
Asincronia: Utilizza richieste asincrone per evitare di bloccare il thread principale, migliorando la reattività dell’applicazione.
Error Handling: Implementa la gestione degli errori per affrontare situazioni come problemi di rete, timeout, o risposte inaspettate.
CORS: Se la tua richiesta è verso un dominio diverso, assicurati che il server supporti il CORS (Cross-Origin Resource Sharing).

Conclusione

XMLHttpRequest è uno strumento potente e flessibile per eseguire richieste HTTP asincrone dal client al server. Anche se oggi esistono alternative più moderne come fetch, XMLHttpRequest rimane una scelta valida per molte applicazioni, soprattutto per la sua compatibilità con tutti i principali browser. Comprendere come utilizzare correttamente XMLHttpRequest ti permetterà di creare applicazioni web più dinamiche e interattive, migliorando l’esperienza utente e la reattività del tuo sito.