LEZIONE II - La prima "vera" connessione AJAX

Nella prima parte del nostro corso abbiamo appreso come poter effettuare una connessione remota utilizzando JS e il modulo XMLHttpRequest.
Ora che a grandi linee abbiamo visto come va utilizzato questo modulo, vediamo di mettere in pratica con un piccolo esempio il funzionamento del modulo stesso così da comprendere meglio il suo utilizzo.

Prima di addentrarci nella programmazione JS ad oggetti e XML, facciamo un esempio di come si facile e veloce poter caricare da un qualsiasi server un file e poterne fare quello che vogliamo.
Nel nostro esempio vedremo come poter selezionare un file di testo (ASCII) da alcuni link della pagina e visualizzare il suo contenuto all'interno di un DIV.

A fine pagina trovate il link per scaricarvi i file di esempio utilizzati e per accedere ad una pagina dove poter vedere in opera l'esempio.
N.B. i file se provati in locale senza un webserver (Apache o simili) non funziona in quanto XMLHttpRequest necessita di una risposta da parte di un server.

Per iniziare con il nostro primo programmino AJAX, abbiamo bisogno di strutturare la pagina HTML che visualizzerà i risultati del nostro programma:

    <div class='testo'>
        <span>Benvenuti nel primo esempio di programmazione AJAX.</span><br><br>
        Utilizzando i link sottostanti potete caricare nel riquadro grigio uno
        dei 3 file TXT dinamicamente.<br><br>
        <a href='#' onclick="apri('testo1');">Testo di prova 1</a>
        <a href='#' onclick="apri('testo2');">Testo di prova 2</a>
        <a href='#' onclick="apri('testo3');">Testo di prova 3</a>
        <div class='file' id='file'>
            Nessun file caricato
        </div>
    </div>

Come possiamo vedere dall'estratto del nostro codice, ho evidenziato in grasseto le parti importanti e che ci serviranno per portare a termine il nostro programma.
Inanzittutto abbiamo bisogno di un elemento DIV che conterrà i nostri file; per riferimento ho assegnato all'elemento id='file'.
In secondo luogo noterete che i link utilizzano un onclick; questo perchè il nostro programma JS verrà richiamato alla pressione del link.
Lo so vi ho annoiato con queste cose che conoscete benissimo, ma sono cose che comunque devono essere usate nell'utilizzo di AJAX.

Una volta creata la nostra pagina HTML, iniziamo con la stesura del codice JS che fungerà da "connettore" tra la nostra pagin e il server dove risiedono i file.
Come avrete notato dai link sopra, la nostra funzione si chiamerà apri.

A.A.A. attenzione agli amanti dei nomi di funzione scritti in Inglese: non sognatevi di creare una funzione che al posto di "apri" si chiama "open". Questi sono gli errori nei quali tutti, io compreso, incorriamo prima o poi per la scarsa esperienza! "open" è già una istruzione di JS e permette di aprire un pop-up!

Dopo questa precisazione, vediamo come sarà composta la nostra funzione:

function apri( file ) {
    // Imposto la URL
    var URL = "./testi/" + file + ".txt";

allora come prima cosa ho creato la variabile URL con il percorso di dove si trova il file di cui ho bisogno. Non serve che vi dica che la variabile file ha come valore il nome del file che dovremo aprire!

Il percorso che si può utilizzare nella URL che andremo ad aprire potrà essere assoluto (path completo) o relativo. E' buona norma quando si usano percorsi relativi farli precedere da "./" (classico nei sistemi Unix / Linux).

La seconda parte del nostro script conterrà quello che abbiamo visto nella lezione precedente, ovvero l'inizializzazione del nostro modulo:

    // Creo la connessione XMLHttpRequest
    if ( window.XMLHttpRequest ) {
        httpRequest = new XMLHttpRequest();
    } else if ( window.ActiveXObject ) {
        try { httpRequest = new ActiveXObject("MSXML2.XMLHTTP.3.0"); }
        catch (e) {
            try { httpRequest = new ActiveXObject("MSXML2.XMLHTTP"); }
            catch (e) {
                try { httpRequest = new ActiveXObject("Microsoft.XMLHTTP"); }
                catch (e) { httpRequest = false; }
            }
        }
    } else {
        httpRequest = false;
    }

Tralasciando la spiegazione del codice appena scritto (dovreste averla letta nella lezione I), passiamo ora al seguito che contiene i parametri di connessione vera e propria e di "cattura" della risposta del server:

    if ( httpRequest ) {
        try {
            httpRequest.open("POST", URL, false, null, null);
            httpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            httpRequest.send('');
        } catch (e) {
            var risultato = "Impossibile inviare la richiesta al server";
        }
        
        switch ( httpRequest.readyState ) {
            case 1, 2, 3:
                var risultato = "Errore di comunicazione: " + httpRequest.status;
            break;
            
            case 4:
                if ( httpRequest.status != 200 ) {
                    var risultato = "Il server ha ritornato l'errore: " + httpRequest.status;
                } else {
                    var risultato = httpRequest.responseText.replace(/\r?\n/g, "<br>");
                }
            break;
        }
    } else {
        var risultato = "Il browser non supporta connessioni XMLHttpRequest";
    }

A parte quello che abbiamo visto ieri, ho evidenziato la parte di codice che ci restituirà il file che abbiamo richiesto al server.
Come si può notare abbiamo utilizzato responseText invece di responseXML poichè i dati che il server ci ritorna non sono formattati in XML.

La parte successiva al "responseText" è una espressione regolare che non fa altro che sostituire i ritorni a capo del nostro testo e convertirli in "<br>". Questo viene fatto perchè il testo verrà poi visualizzato all'interno di un DIV (se fosse stata una TEXTAREA non sarebbe stato necessario).

Se non avete mai usato le "espressioni regolari" è bene che cominciate ad impararle (se me lo chiedete vi faccio una lezione introduttiva) in quanto vedrete che vi torneranno utili in moltissimi casi.

Ora che abbiamo inviato la richiesta ed ottenuto il risultato, passiamo a riempire il nostro DIV:

    // Creo un oggetto con il div che deve contenere il nostro testo
    var div = document.getElementById('file');
    
    // Stampo il risultato
    div.innerHTML = ( risultato ? risultato : "Nessun file caricato" );

Non credo che non ci sia molto da spiegare cosa fanno queste due righe di codice: assegno ad una variabile l'elemento DIV che conterrà il risultato dopo di ché stampo il risultato all'interno del DIV.

Questo appena visto è uno dei tanti usi che possiamo effettuare con AJAX e quindi con XMLHttpRequest. La maggior parte delle volte queste tecniche vengono utilizzate per interagire con database, ma questo sarà oggetto di un'altra lezione.

Nella prossima lezione vedremo la ricezione di dati in formato XML, quindi cominceremo ad addentrarci nel mondo vero e proprio di AJAX e degli oggetti JS, iniziando quindi un tipo di programmazione più evoluto.

Qui sotto i link dell'argomento trattato oggi:

Per vedere all'opera l'esempio appena spiegato

Per scaricare il file ZIP dell'esempio

Alla prossima!