|
|||||||||||
Guida AjaxLa tecnologia del Web 2.0
Per rendere l'idea di cosa è Ajax, facciamo un esempio pratico. Navigando in un Sito web, vogliamo visualizzare la pagina "contatti", quindi clicckiamo sul link "contatti". A questo punto il browser invierà la richiesta della pagina "contatti" al sever che, ricevuta la richiesta, la elabora e spedisce la pagina al client il quale, ricevuta la nuova pagina, ricarica tutto il contenuto della pagina a video e mostra la pagina "contatti". Ma riflettendo, noi abbiamo richiesto la pagina contatti, ma quando riceviamo la risposta dal server, ci viene spedita la pagina nel suo insieme: menù di navigazione, immagini, codici javascript per gestirle e poi... anche la parte che riguarda i contatti. Non sarebbe molto più rapido lasciare così come sono il menù (che è sempre quello), le immagini (che sono sempre quelle), ecc. e caricare solo la parte della pagina che si riferisce ai contatti?
Decisamente si, sarebbe molto più veloce!
Bene, Ajax serve esattamente a questo! Tramite Ajax noi siamo in grado di richiedere al server solo un pezzo della pagina e, una volta giunta la risposta dal server, ricaricare nel client solo la parte della pagina richiesta. Nel nostro caso, quindi, ricaricheremo solo il riquadro "contatti". Questo velocizza di moltissimo la navigazione. AJAX è l'acronimo di Asynchronous JavaScript And XML, ovvero "asincronia tra Javascript ed XML". In realtà come già detto, non si tratta di un nuovo linguaggio ma la capacità di Javascript nell'aggiornare parte di una pagina HTML senza che questa venga caricata nuovamente, attraverso una richieste tramite il "protocollo HTTP". Per effettuare una richiesta HTTP al server utilizzando JavaScript, si utilizza un'istanza di una classe che fornisce detta funzionalità. Tale classe è stata introdotta originariamente in Internet Explorer come oggetto ActiveX e si chiamava XMLHTTP. Successivamente Mozilla, Safari e altri browser hanno implementato la classe XMLHttpRequest, che supporta gli stessi metodi e le stesse proprietà della classe di Microsoft. La richiesta può essere inviata sotto forma di variabili di tipo GET o di tipo POST come per l'invio dei Form. La richiesta è asincrona, il che significa che non bisogna necessariamente attendere che sia stata ultimata per effettuare altre operazioni. AJAX non lavora sulle pagine, ma sui dati. Il server restituisce i dati processati, e solo la parte relativa a questi dati sarà cambiata (per fare questo usa Javascipt). Quindi non dovendo ogni volta inviare e ricevere intere pagine dal server, le applicazioni che usano la tecnologia AJAX risultano molto veloci. ![]() Tipologie di interazioni AJAXSemplici
// from http://javascript.html.it/guide/leggi/95/guida-ajax/ function myGetElementById(idElemento) { // 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(idElemento); // altrimenti è necessario usare un vecchio sistema else elemento = document.all[idElemento]; // restituzione elemento return elemento; }
Invio delle RichiesteOttenere l’oggetto XMLHttpRequestFunzionalità da estrarre con funzioni ad hoc per ottenere cross-browser compatibility
// ad esempio invocata in corrispondenza dell'evento onload myAjaxApp = function() { var xhr = myGetXMLHttpRequest(); if ( xhr ) { /* applicazione in versione AJAX */ } else { /* versione non AJAX o avviso all’utente */ } } // Controllo supporto Browser per richiamare l'oggetto XmlHttpRequest function myGetXmlHttpRequest() { var xhr = false; var activeXoptions = new Array( "Microsoft.XmlHttp", "MSXML4.XmlHttp","MSXML3.XmlHttp", "MSXML2.XmlHttp", "MSXML.XmlHttp" ); // prima come oggetto nativo try { xhr = new XMLHttpRequest(); } catch (e) { } // poi come oggetto activeX dal più al meno recente if ( ! xhr ) { var created = false; for ( var i = 0 ; i < activeXoptions.length && !created ; i++ ) { try { xhr = new ActiveXObject( activeXoptions[i] ); created = true; } catch (e) { } } } return xhr; } Lettura delle RisposteProprietà di XMLHttpRequestStato e risultati della richiesta vengono memorizzati dall’interprete Javascript all’interno dell’oggetto XmlHttpRequest durante la sua esecuzione.Lista dei parametri comunemente supportati dai vari browser:
Proprietà readyStateVariabile di tipo intero, con valori che vanno da 0 a 4.
Attenzione:
Proprietà onreadystatechangeL'esecuzione del codice non si blocca sulla send() in attesa dei risultati.Occorre registrare una funzione che sia richiamata dal sistema:
Proprietà statusValore intero corrispondente al codice HTTP dell’esito della richiesta.
Proprietà responseText e responseXMLContengono i dati restituiti dal server.
Metodi getResponseHeader( ) e getAllResponseHeaders( )Lettura degli header HTTP che descrivono la risposta del server..
La funzione di "callback" (1)Legge lo stato di avanzamento della richiesta
La funzione di "callback" (2)Assegnata all'attributo onreadystatechange di XMLHttpRequestvar xhr = // .. etc etc
Chiusura della funzione di "callback"È costituita dalla funzione stessa e dall'insieme di tutte le variabili a cui essa può accedere (scope)
var xhr = // .. etc etc var textHolder = new Object(); ... xhr.onreadystatechange = function() { if ( xhr.readyState == 4 ) /* ...omissis */ alert( textHolder.testo ); /* ...omissis */ function myPopup( oggettoAjax, contenitoreDiTesto ) { if ( oggettoAjax.readyState == 4 )/* ...omissis */ alert( contenitoreDiTesto.testo ); /* ...omissis */ } ... var xhr = // .. etc etc var textHolder = new Object(); ... |
Come ritieni i contenuti del Sito Web ?
Giudizio Utenti: 4,3
(Eccellente)
201 voti... dai il tuo giudizio!
|
||||||||||
|