LEZIONE V - Alternativa a XMLHttpRequest: IFRAME

All'inizio del corso abbiamo visto che ci sono varie possibilità per far interagire il nostro JS con il server, in primis XMLHttpRequest, decisamente più funzionale e pratico, ma è stato accennato che molti utilizzano come veicolo di comunicazione un iframe nascosto.

Nella maggior parte dei programmi JS scritti con tecnica AJAX, vengono utilizzati entrambi i metodi in base a quello che si deve ottenere.
Per esempio un <form></form> per l'invio, oltre che di dati testuali, di file binari non potrà mai essere eseguito con XMLHttpRequest ma solo attraverso un iframe.

Aperta questa parentesi, vediamo un attimino come funziona questa tecnica. Come detto sopra, normalmente l'iframe viene nascosto poichè a noi interessa solo che funga da "trasportatore" dei dati da e verso il server.

La creazione dell'iframe può essere fatta direttamente nella pagina in mezzo all'altro codice HTML, oppure creato dinamicamente solo quando serve.
Nel primo caso basterà inserirlo nel codice:

<iframe id='ajax' style='display:none'></iframe>

Come vedete non serve inserire il percorso di caricamento con src='...', poichè al suo interno verrà caricata una URL solo quando ci servirà.

Nel secondo caso, ovvero quello della creazione dinamica dell'oggetto, il codice potrà essere:

    var ifr = document.createElement('iframe');
    ifr.id = 'ajax';
    ifr.style.display = 'none;
    document.body.appendChild( ifr );

L'ultima istruzione document.body.appendChild non fa altro che inserire prima della chiusura del </body> l'oggetto iframe appena creato.
Una volta che questi ha adempito allo scopo per cui è stato creato, possiamo anche rimuoverlo semplicemente:

document.body.removeChild( document.getElementById('ajax') );

A questo punto basta semplicemente richiamare la URL che ci interessa facendola puntare dentro il nostro iframe:

document.getElementById('ajax').src = 'pagina.php?variabile=' + valore + '&variabile1=' + valore1;

Il nostro iframe, essendo una pagina indipendente dal documento, chiamerà pagina.php passandole gli eventuali parametri e non creerà nessun tipo di refresh al documento.
Come si può vedere il metodo di funzionamento di questa tecnica è molto più semplice e veloce rispetto al metodo XMLHttpRequest, però ha degli svantaggi:

1) non possiamo trasferire dati dal server in formato XML, anzi diciamo che si potrebbe anche fare (se inviamo l'intestazione corretta e il documento formatato), però primo non sappiamo come si comporta il browser nel momento in cui riceve XML (ogni browser ha "la sua reazione"), secondo non sappiamo quando questo documento è stato inviato completamente per essere gestito con JS

2) il risultato della pagina (se c'è) dovrà essere esclusivamente un JS

Dato che il punto 1 non è fatibile, vediamo cosa si intende per "dovrà essere esclusivamente un JS" specificato al punto 2:

- dato per scontato che non abbiamo modo di sapere quando qualcosa verrà caricato nell'iframe, l'unico modo per far si che ci sia una interazione tra il risultato e quello che dobbiamo gestire e stampare un JS che venga interpretato dal browser (che potrebbe essere anche un richiamo ad un JS esistente).
Se per esempio la nostra pagina PHP mi restituisce dei dati che devo stampare a video, questi dovrebbero essere codificati in formato JS, esempio:

<?php
...
    print "<script type='text/javascript'>";
    print "var nome = new Array('Mario','Andrea','Max');";
    print "var eta = new Array(25,34,38);";  
    print "parent.stampaDati( nome, eta );";
    print "</script>";
...
?>

L'ultima riga del codice d'esempio sopra non fa altro che richiamare la funzione JS stampaDati() che si trova nella nostra finestra principale (per quello ho usato parent.) passandole gli array di dati creati in precedenza.
Come potete vedere è obbligatorio racchiudere il nostro codice JS dentro i tag <script></script> poichè un iframe si comporta come una quasiasi finestra del browser quindi interpreta quello che gli viene inviato dal server.

Potrete notare dagli esempi che la tecnica AJAX con iframe è si più veloce da scrivere di XMLHttpRequest, però allo stesso tempo risulta più "ostica" da gestire nello scambio dati server -> client.
Infatti, per essere sfruttata al meglio sarebbe da utilizzare solo per l'invio di FORM dal client verso il server ed al massimo gestire un eventuale errore di invio.
Per questo ultimo scopo, il metodo di funzionamento è semplicissimo e anche qui lo possiamo gestire direttamente dal FORM oppure attraverso JS.

Nel caso di gestione diretta basta mettere come target il nome dell'iframe nel form

<form id='ilform' action='pagina.php' method='post' target='ajax'>

mentre nel caso lo dovessimo gestire con JS, possiamo usare il codice

var frm = document.getElementById('ilform');
frm.setAttribute('target', 'ajax');

Oltre a quello visto sopra (nei difetti), dobbiamo dare anche un bel pregio all'iframe: possiamo vedere gli errori direttamente.
Al contrario di quello che avviene per XMLHttpRequest, dove in caso di errore dobbiamo usare degli alert() o far stampare l'errore da qualche parte nella nostra pagina, per iframe il problema non si pone in quanto basta (in fase di debug del programma) lasciarlo visibile e dargli una dimensione per vedere stampati eventuali errori generati dalla pagina PHP.

Più avanti vedremo, comunque, degli esempi che utilizzeranno entrambe le tecniche di interazione client -> server -> client per lo scambio dati.

Nella prossima lezione vedremo come utilizzare gli oggetti "avanzati" di JS per scrivere il nostro codice e crearci delle funzioni generiche per migliorare e velocizzare la stesura di JS, riutilizzando le stesse funzioni in applicazioni diverse.

Alla prossima lezione!