Internet Explorer comunque esiste
E non lo possiamo ignorare poichè più o meno l'ottanta percento delle persone lo utilizza. Per forutna non serve modificare che una singola funzione per rendere il nostro codice compatibile con IE, la CreateXmlHttpReq2. Ecco la versione compatibile:
// Create the XML HTTP request object. We try to be
// more cross-browser as possible.
function CreateXmlHttpReq2(handler) {
var xmlhttp = null;
try {
xmlhttp = new XMLHttpRequest();
} catch(e) {
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch(e) {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}
xmlhttp.onreadystatechange = handler;
return xmlhttp;
}
Questa funzione tenta di risolvere un certo numero di problemi con diverse versioni di Internet Explorer, e un problema con una vecchia versione del browser Mozilla. Come potete vedere il modo in cui viene creato l'oggetto per la richiesta HTTP e il modo in cui viene settato l'handler variano nei diversi browser, ma gli oggetti sono molto simili e l'handler non deve essere modificato per gestire l'uno o l'altro. Ciò è importantissimo: abbiamo isolato il codice non compatibile tra i diversi browser in un'unica funzione!
C'è un secondo problema con IE in realtà, fa il caching delle richieste HTTP fatte in questo modo, dunque se sono effettuate utilizzando la stessa URL più volte, anche se lo script PHP richiamato produce diversi risultati, il risultato ottenuto sarà sempre lo stesso. Per evitare questo problema invece di richiedere qualcosa come script.php basta richiedere script.php?rand=numeroCasualie. In questo modo inganniamo IE facendogli credere che ogni volta si tratta di una richiesta diversa ed evitiamo il problema della cache. Per generare un numero casuale in Javascript si utilizza la funzione Math.random, dunque per evitare il problema della cache di IE tutto quello che dovremmo modificare nello script di sopra è la riga in cui la richiesta viene settata utilizzando il metodo open. Nello script originale usavamo:
myRequest.open("GET","primo.php");
Mentre sarebbe opportuno utilizzare:
myRequest.open("GET","primo.php&rand="+escape(Math.random()));
Un esempio completo che funziona su tutti i browser
A questo punto siamo pronti per riscrivere l'esempio di sopra con alcune modifiche. Per prima cosa utilizzeremo la funzione CreateXmlHttpReq2 compatibile con IE, secondo utilizzeremo il parametro casuale nella richiesta per evitare la cache e terzo modificheremo lo script PHP in modo da ritornare il tempo in secondi, così possiamo vedere che i dati cambiano ad ogni invio. Infine questa volta useremo un DIV per visualizzare il risultato dinamicamente utilizzando innerHTML.
Il codice integrale è il seguente.
Il PHP del file secondo.php è il seguente semplice script:
<?
if (isset($_GET['nome'])) {
$n = strtolower($_GET['nome']);
$name['giorgio'] = "Bianchi";
$name['vittorio'] = "Rossi";
$name['augusto'] = "Verdi";
if (isset($name[$n])) {
echo("Il cognome di $n è $name[$n]");
} else {
echo("Non conosco il cognome di $n");
}
echo("
tempo corrente in secondi: ".time()."");
}
?>
Per testare l'esempio sopra provate a immettere i nomi Giorgio, Vittorio, Augusto e premere Visualizza congome, poi provate a mettere un altro nome che non è contenuto nell'array del programma secondo.php, ad esempio Alessio. Avete capito bene come funziona il codice? Complimenti, ora potete dire di sapere come funziona Ajax, e anche spargere la voce sul fatto che le basi sono molto semplici. Ma non illudetevi, Ajax è facile, chiunque può imparare ad usarlo. Quasi tutta la programmazione è così, alla portata di tutti. La differenza che potete fare voi è che se avete talento e voglia potete diventare dei grandi programmatori, capaci di utilizzare astrazioni più potenti che vi rendono il lavoro più facile e veloce. La seconda parte di questo articolo, che è la motivazione per cui la prima parte è stata scritta, si sofferma proprio su questo: l'astrazione, ma prima permettetemi una breve digressione su XML.
| << Precedente | Indice | Successivo >> |