XMLHttpRequest

XMLHttpRequest

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

Alcuni link utili

Indice tutorial JavaScript

Le funzioni di callback

Esempi funzioni di callback

Come utilizzare le callback e setTimeout

Cifrario di Cesare online

Come realizzare un convertitore da decimale a binario, ottale ed esadecimale

Come creare PDF con JavaScript

PDF da un form con JavaScript

AJAX JavaScript

AJAX JavaScript

AJAX è l’acronimo di Asynchronous JavaScript and XML e possiamo dire che ad oggi è la tecnologia più utilizzata per lo sviluppo di applicazioni web interattive.

Con programmazione asincrona intendiamo una forma di programmazione parallela che eseguirà del codice e quando avrà terminato lo comunicherà al programma principale

AJAX è utilizzato nelle applicazioni dove occorre aggiornare i dati senza ricaricare la pagina web o per chiamare dati in formato JSON o XML.

Lo scambio dei dati in JavaScript avviene tramite una chiamata asincrona ottenuta utilizzando l’oggetto built-in XMLHttpRequest.

Una volta ricevuti i dati dal server occorre poi manipolarli in base alle proprie esigenze.

In JavaScript però questo processo è un po’ complicato, ecco perché si utilizza anche la libreria jQuery per ottenere dei dati dal server. Vedremo più avanti come realizzare questo procedimento.

Come funziona una chiamata AJAX in JavaScript

1. L’utente invia una richiesta dalla sua pagina web. Questa richiesta va all’oggetto XMLHttpRequest tramite una chiamata ajax in javascript.

2. L’oggetto XMLHttpRequest invia poi la richiesta al server web che rappresenta ad esempio l’apertura da un file di testo, da un file pdf ecc. O ancora da un database, ricordiamo che una delle tecnologie più utilizzate nel web oggi è PHP-MYSQL.

3. Il server recupera i dati.

4. I dati quindi, se la richiesta va a buon fine, vengono poi visualizzati nella pagina web, secondo le specifiche indicate.

Conclusioni

In questa lezione abbiamo semplicemente introdotto AJAX in JavaScript, nella prossima vedremo l’utilizzo dell’oggetto XMLHttpRequest e di qualche metodo e proprietà di questo oggetto.

Passeremo poi all’utilizzo di AJAX con jQuery, in quanto risulta molto più semplice ed intuitivo.

Alcuni link utili

Indice tutorial JavaScript

Le funzioni di callback

Esempi funzioni di callback

Come utilizzare le callback e setTimeout

Cifrario di Cesare online

Come realizzare un convertitore da decimale a binario, ottale ed esadecimale

Come creare PDF con JavaScript

PDF da un form con JavaScript