Aiace for dummies
Posted Novembre 14th, 2006 by adminse ne parla tanto negli ultimi tempi, se ne è accennato anche a lezione alcuni giorni fa
come una tecnologia utile per gli sviluppi futuri del web nella sua versione 2.
Quasi dimenticavo, AJAX stà per Advanced Javascript And XML e consiste in diverse chiamate a funzioni Javascript per permettere al broswer di caricate i contenuti in maniera asincrona (senza bisogno di ricaricare la pagina)
Andiamo ad iniziare:
<html>
<head>
<script>
//si crea un 'oggetto' XMLHttpRequest (in realtà non si tratta proprio di un oggetto,
//poichè non supportati da javascript ma di un API)
if(window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
E’ proprio l’oggetto XMLHttpRequest che crea la magia di Ajax.
in pratica non abbiamo fatto altro che creare il nostro oggetto per un broswer come Internet Explorer (Microsoft.XMLHTTP)
o per qualsiasi altro broswer (XMLHttpRequest).
//chiamiamo la nostra funzione
function requestContent(url) {
xmlhttp.open("GET",url,true);
xmlhttp.onreadystatechange =statusListener;
xmlhttp.send(null);
}
la funzione requestContent inizia la chiamata tramite l’URL che le passeremo quindi i parametri del metodo open della nostra XMLHttpRequest sono il metodo GET, in quanto stiamo richiedendo dei dati,
ovviamente l’url che indica il documento con i dati da visualizzare ed infine il flag indica che la richiesta deve essere gestita in modo asincrono (realizzando la magia :D) l’attributo OnReadyStateChange è il gestore degli eventi che viene chiamato ad ogni cambiamento di stato e che lancia la funzione statusListener.
function statusListener() {
if (xmlhttp.readyState == 1) {
document.getElementById('contenuto').innerHTML=" mi stò caricando...";
}
…dicevamo la nostra funzione statusListener tramite l’attributo readyState controlla lo stato
della nostra istanza di XMLHttpRequest se il valore restituito è 1 cioè aperto (gli altri sono 0 = non inizializzato, 2 = richiesta inviata, 3 = risposta in ricezione, 4 = risposta ricevuta) e modifica il contenuto del div ‘contenuto’ (come sono fantasioso eh?)
con la stringa “mi stò caricando…” (il metodo getElementById non fà altro che trovare un elemento all’interno dell’albero html e il metodo innerHTML modifica l’Html dell’elemento).
if (xmlhttp.readyState == 4) {
//xmlhttp.responseText is the content of document requested
document.getElementById('contenuto').innerHTML=xmlhttp.responseText;
}
}
ed infine se lo stato è 4 (cioè? dovreste saperlo!!!) il testo del div ‘contenuto’ è modificato con il contenuto del documento richiesto tramite la nostra XMLHttpRequest ed il suo metodo responseText che appunto fornisce la risposta
del server alla chiamata asincrona in formato stringa altro metodo interessante è responseXML tramite il quale il server restituisce la risposta in formato XML pronta per essere parsata tramite DOM.
E adesso l’HTML…
</head>
<body>
<a href='javascript:requestContent("1.html");'>1.html</a>
<a href='javascript:requestContent("2.html");'>2.html</a>
<div id="contenuto">
Questo verrà sostituito con il contenuto di 1.html o 2.html senza che il broswer si ricarichi
</div>
</body>
</html>
Niente di speciale qui, al click chiamiamo
la funzione requestContent per le pagine 1.html o 2.html.
Spero di essere stato utile con questo tutorial base su AJAX magari ne scriverò qualcun altro mostrando le su potezialità in combinata con un linguaggio server-side
Qui trovate l’esempio realizzato nel tutorial
One Response to “Aiace for dummies”
Dicembre 8th, 2006 at 12:19 pm
[...] questo codice dovrebbe essere familiare se avete letto il tutorial su Ajax base, altrimenti fatelo Comunque crea l’istanza di XMLHTTP a seconda del browser e con un minimo di gestione degli errori [...]
Leave a Reply