Per muovere i primi passi con AJAX non è indispensabile conoscere a fondo (X)HTML, CSS e nemmeno XML. Addirittura è possibile sapere poco anche di Javascript, ma almeno i concetti base sul cosa è una variabile o una funzione e quali sono gli eventi più comuni definibili all'interno dei tag della pagina sono necessari.
Altra cosa utile è sapere che il supporto al "Remote Scripting" non è universale e che è supportata solo dalla versione 5 di Internet Explorer.
A parte quest'ultimo aspetto, un po' fuori contesto, è necessario essere in grado di popolare una parte di una pagina con del testo definito in JavaScript. In particolare bisogna conoscere l'attributo innerHTML di un elemento o le specifiche DOM create appositamente per aggiungere, popolare o modificare elementi della pagina.
Nel primo caso, quello di innerHTML, non si fa altro che sovrascrivere il contenuto di un elemento del documento visualizzato e tutto quello che ci serve è una funzione in grado di restituirci l'elemento richiesto.
Le funzioni più note per fare questo sono 2, getElementById e getElementsByTagName ed entrambe possono essere sfruttate per usare il metodo innerHTML oppure il DOM, non trattato in questa lezione.
Entrando nei dettagli, getElementById è un metodo dell'oggetto document, la pagina visualizzata, e cerca al suo interno un tag HMTL con un attributo, id, assolutamente univoco.
Anche questo metodo non è compatibile con le vecchie versioni di Explorer, ecco quindi una funzione in grado di non restituire errori quando si tenta di gestire un elemento della pagina.
Listato 1. Verificare l'esistenza del metodo getElementById()
function prendiElementoDaId(id_elemento) {
// elemento da restituire
var elemento;
// se esiste il metodo getElementById
// questo if sarà diverso da false, null o undefined
// e sarà quindi considerato valido, come un true
if(document.getElementById)
elemento = document.getElementById(id_elemento);
// altrimenti è necessario usare un vecchio sistema
else
elemento = document.all[id_elemento];
// restituzione elemento
return elemento;
}
Per le interazioni semplici questa funzione sarà la migliore amica di AJAX e sarà l'unica, per ora, presa in considerazione.
Per testare subito quanto scritto sarà necessario avere una pagina web basilare con almeno un elemento con id univoco che, sul caricamento della pagina (evento onload) scriverà del testo attraverso l'uso di innerHTML.
Listato 2. Modificare un testo al caricamento della pagina
<html>
<head>
<title>AJAX, le basi prima dell' utilizzo</title>
<script type="text/javascript">
<!--//
function prendiElementoDaId(id_elemento) {
var elemento;
if(document.getElementById)
elemento = document.getElementById(id_elemento);
else
elemento = document.all[id_elemento];
return elemento;
};
//-->
</script>
</head>
<body onload="prendiElementoDaId('paragrafo').innerHTML = 'Buon giorno <strong>JavaScript</strong>';">
<p id="paragrafo">
testo del paragrafo che verrà cambiato al caricamento del documento
</p>
</body>
</html>
L'utilizzo dell'evento onload, evento definibile asincrono poichè richiamato in un istante di tempo non noto, è indispensabile per capire che se avessimo scritto la procedura prendiElementoDaId( ... ) direttamente nello spazio riservato al JavaScript, ovvero nel tag <head> della pagina, questa avrebbe generato un errore e non avrebbe modificato alcunchè all'interno della stessa. Infatti prima del verificarsi dell'evento onload non è nota al browser nemmeno l'esistenza di un elemento con id="paragrafo"
L'utilizzo dell'evento onload quindi, seppur non abbia molto a che fare con AJAX, va tenuto a mente molto bene poichè sarà alla base di ogni tipo interazione asincrona: dobbiamo avere dati o elementi per operare sugli stessi e finchè non saremo certi di averli sarà completamente inutile tentare di effettuare modifiche su di questi.
Altra nota sul codice visto è la possibilità di scrivere codice HTML allo stesso modo in cui si può scrivere del semplice testo. Questa peculiarità di innerHTML ci permette non solo di creare elementi utili per la rappresentazione dei dati, ma di sfruttarli nella costruzione della pagina.
Per verificare quanto appena detto aggiungiamo altre due funzioni dopo la funzione prendiElementoDaId() e modifichiamo il gestore dell'onload sul tag <body>, scrivendo solo onload="onLoad();".
Listato 3. Inserire e modificare elementi da Javascript
function cambiaTesto() {
prendiElementoDaId('span0').innerHTML = 'testo cambiato';
}
function onLoad() {
prendiElementoDaId('paragrafo').innerHTML = '<span id="span0" onclick="cambiaTesto();">cambia questo testo</span>';
}
A caricamento pagina quindi è possibile creare un elemento html, uno <span>, con un id univoco, "span0" in questo esempio, ed impostare un evento, onclick, in grado di richiamare una funzione che cambierà il testo dell' elemento inserito nel documento attravero l'utilizzo di innerHTML e che non era quindi presente se non dopo l'utilizzo della funzione onLoad().
Sebbene si possa avere, inizialmente, un pò di confusione, questi concetti sono molto utili per creare interazioni base e medie poichè grazie agli stessi si ha la consapevolezza di non avere un limite teorico sui cambiamenti possibili del documento o dell' elemento che sfrutteremo in seguito attraverso l'utilizzo di AJAX.
Se quanto detto fino ad ora è chiaro, si ha già la possibilità di cominciare a sperimentare AJAX, non appena verrà trattato direttamente.