XMLHttpRequest, open, send, onreadystatechange

L’oggetto XMLHttpRequest, che abbiamo accennato già nella scorsa lezione, consente di accedere a documenti di vario tipo caricati su un server, come ad esempio file di testo, pdf, documenti XML, JSON, ecc.

XMLHttpRequest – Esempio di recupero dati da un file con AJAX

Facciamo dunque un esempio su come recuperare un file, che sta su un server, utilizzando i metodi e le proprietà di questo oggetto.

A questo scopo ho caricato sul server un file pdf di nome ajax.pdf che contiene questo semplice codice:

<p>AJAX permette lo scambio di dati con un server</p>
<p>Ricavo i dati dal file di testo caricato su Coding Creativo</p>

Dopo, nella pagina web inserisco un div, assegnando un id, che serve a visualizzare il testo contenuto nel file pdf. Poi inserisco un pulsante che al click carica il contenuto di questo file, usando semplicemente il metodo onclick direttamente sul pulsante.

Quindi lato html ho inserito questo semplice codice di esempio:

<p>Qui si visualizzeranno i dati ricavati dal file di testo caricato sul server, dopo aver cliccato sul pulsante</p>
<div id="dati-file" style="background:yellow">
<button type="button" onclick="load()">Carica dati</button>
</div>

Poi, lato JavaScript creo una funzione load che richiama questo file dal server, tramite l’oggetto XMLHttpRequest.

Funzione load in JavaScript

function load() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("dati-file").innerHTML = 
      this.responseText;
    }
  };
  xhttp.open("GET", "ajax.pdf", true);
  xhttp.send();
}

Innanzitutto creo un’istanza dell’oggetto XMLHttpRequest e lo salvo in una variabile di nome xhttp.

Come spiegato prima, questo oggetto mi permette di inviare la richiesta e controllare la risposta in applicazioni AJAX.

Metodi dell’oggetto XMLHttpRequest

L’oggetto XMLHttpRequest ha alcuni metodi, tra cui il metodo open che serve per aprire la connessione con il server e accetta 3 argomenti.

Il primo argomento è il tipo di richiesta, può essere ad esempio GET o POST, come secondo argomento accetta il percorso del file da chiedere al server, mentre come terzo argomento accetta un valore booleano, true o false che sta ad indicare se la connessione è asincrona o sincrona.

Allora come primo parametro indico GET, come secondo parametro metto il nome del file ajax.pdf che è il nome del nostro file caricato sul server, mentre come terzo parametro indico true. Chiaramente se si utilizza AJAX si intende già utilizzare una connessione asincrona, quindi solo in rari casi vedrete il terzo parametro a false.

Poi richiamo il metodo send che serve a mandare la richiesta al server.

Proprietà di XMLHttpRequest

Dopo richiamo la proprietà onreadystatechange, a cui assegno una funzione, che serve a monitorare il cambiamento della proprietà readyState.

La proprietà readyState controlla se il server ha ricevuto la richiesta e assume nel corso della richiesta cinque valori:

0 indica che la richiesta non è stata ancora inizializzata

1 indica che la connessione è stata abilitata

2 indica che il server ha ricevuto la richiesta

3 indica che il server sta processando la richiesta

4 indica che il server ha terminato di processare la richiesta inviando la risposta al client

Quindi questa proprietà cambia valore e quando arriva a 4 vuol dire che il server ha già inviato la risposta.

La risposta del server, indicata dalla proprietà status, è un codice di stato che può assumere alcuni valori (200, 404, 301, ecc…). Il codice di stato 200 indica che il server ha trovato la risorsa e quindi, nel nostro caso, vuol dire che è stato trovato il file ajax.pdf.

Infine la proprietà responseText serve a leggere tutto il contenuto del file pdf.

Prova l’esempio

Qui si visualizzeranno i dati ricavati dal file pdf caricato sul server, dopo aver cliccato sul pulsante

Chiaramente posso ottenere informazioni anche da altri tipi di file, come detto prima.

Secondo esempio XMLHttpRequest

Proviamo adesso ad inviare una richiesta al server di un file che in realtà non esiste, semplicemente perché ad esempio abbiamo sbagliato a digitare il suo nome. Visualizziamo il codice di stato restituito.

<p>Qui si visualizzeranno i dati ricavati dal file pdf caricato sul server, dopo aver cliccato sul pulsante oppure si visualizzerà un codice di stato se il file non viene trovato.</p>
<div id="dati-file" style="background:yellow">
<button type="button" onclick="load()">Carica dati</button>
</div>

Lato JavaScript scriviamo poi questa funzione:

function load() {
  var xhttp = new XMLHttpRequest();
  xhttp.open("GET", "ajax2.pdf", true);
  xhttp.send();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("dati-file").innerHTML =
      this.responseText;
    }
  };
}

In questo caso il file non esiste e dunque, dopo un po’ di tempo, visualizzeremo nella pagina il codice di stato 404.

Prova l’esempio

Qui si visualizzeranno i dati ricavati dal file pdf caricato sul server, dopo aver cliccato sul pulsante oppure si visualizzerà un codice di stato se il file non viene trovato.

Per maggiori dettagli su proprietà e metodi dell’oggetto XMLHttpRequest vi indico questo link: https://developer.mozilla.org/it/docs/Web/API/XMLHttpRequest

Lezione precedente: introduzione ad AJAX

Lezione successiva: AJAX e JSON