|
Home -> Articoli -> Ajax
AJAX
Introduzione ad Ajax
AJAX significa esattamente Asynchronous JavaScript And XML (JavaScript asincrono ed XML), e non è una tecnologia ma un sistema di sviluppo di applicazioni Web lato server che sfrutta le caratteristiche di Javascript lato client ed XML per velocizzare i processi di richiesta ed esposizione dei dati.
Essendo uno standard si tratta di un sistema cross-browser (compatibile con tutti i browser Web) in cui, però, l'oggetto XMLHttpRequest assume comportamenti differenti e, in taluni casi, anche nomi differenti, pur trattandosi sempre dello stesso oggetto.
In Microsoft Internet Explorer, ad esempio, l'oggetto XMLHttpRequest viene istanziato come ActiveX, mentre in browser come Firefox, Opera, Netscape, Safari ed altri, il suo supporto è nativo.
Il suo funzionamento è estremamente semplice ed equivale, in via filosofica, all'invio di dati attraverso un modulo HTML attraverso i metodi GET e/o POST.
La differenza sta nei tempi di attesa praticamente inesistenti, dato che i dati sono già caricati in memoria in elementi come array Javascript o nell'XML, fisico o generato "al volo" che sia.
L'oggetto XMLHttpRequest permette di effettuare la richiesta di una risorsa (con HTTP) ad un server web in modo indipendente dal browser. Nella richiesta è possibile inviare informazioni, ove opportuno, sotto forma di variabili di tipo GET o di tipo POST in maniera simile all'invio dati di un form.
La richiesta è asincrona, il che significa che non bisogna necessariamente attendere che sia stata ultimata per effettuare altre operazioni, stravolgendo sotto diversi punti di vista il flusso dati tipico di una pagina web.
Generalmente infatti il flusso è racchiuso in due passaggi alla volta, richiesta dell'utente (link, form o refresh) e risposta da parte del server per poi passare, eventualmente, alla nuova richiesta da parte dell'utente (vedi figura sottostante).
Altro incomodo di questo ciclo è l'attesa che trascorre tra una richiesta dell'utente e la risposta del server. Con l'aggiunta di AJAX si perde questa linearità e mentre l'utente è all'interno della stessa pagina le richieste sul server possono essere numerose e completamente indipendenti (vedi figura sottostante).
Ciò che resta del vecchio flusso, il tempo di attesa, passa spesso in secondo piano ed in molti tipi di interazione è praticamente impercettibile. Ma attenzione poichè questo tempo è anche uno dei maggiori problemi dell'utilizzo di AJAX, sia per gli sviluppatori sia per i navigatori.
Javascript ed Ajax
Vediamo ora i principali argomenti Javascript legati ad AJAX in fase di restituzione dei dati richiesti.
Ipotiziamo un elemento di testo HTML che fungerà da area di restituzione di un risultato:
<div id="risultato"></div>
Vediamo come agire con Javascript per impostare un testo predefinito:
<script type="text/javascript">
window.onload = function()
{
var testo = document.getElementById("risultato");
testo.innerHTML = "Hello, World!";
}
</script>
|
Si tratta di uno script molto semplice ma è importante comprenderne infondo il meccanismo per entrare a pieno nella forma-mentis di AJAX. Al caricamento della pagina si recupera l'elemento HTML attraverso il suo ID utilizzando il metodo getElementById dell'oggetto document e si imposta un valore grazie alla proprietà di lettura e scrittura innerHTML.
Gli oggetti XMLHttpRequest ed XMLHTTP
Lo scopo degli oggetti XMLHttpRequest ed XMLHTTP, che in qualche modo sono l'uno sinonimo dell'altro, è quello di esaudire una richiesta HTTP remota basata su XML.
Vedremo che comunque AJAX non si basa solo su documenti XML ma si limita ad attingere dati da una fonte che per eccellenza è il formato XML, ma si può trattare di un file di testo, di un formato Excel, di un database o di un semplice array, che sarà proprio la base dell'esempio della guida.
XHLHTTP è un oggetto molto meno recente di XMLHttpRequest ma le funzionalità sono le stesse, anche se i nomi di proprietà e metodi cambiano e possono avere potenziale più o meno differente.
Le principali proprietà di entrambi, comunque, sono le seguenti:
- readyState, verifica lo stato di un oggetto e può assumere valori da 0 a 4:
| 0 = Uninitialized: l'oggetto esiste ma non è stato istanziato; |
| 1 = Open: l'oggetto è aperto; |
| 2 = Sent: la richiesta è stata inviata; |
| 3 = Receiving: i dati stanno arrivando a destinazione; |
| 4 = Loaded: operazione completata. |
- responseText, restituisce il risultato di una richiesta HTTP in formato testuale.
- responseXML, restituisce il risultato di una richiesta HTTP in formato XML.
- status, restituisce lo stato di una transazione; contiene decine di numeri di successo e di errore che sono simili a quelle di un Web Server, ovvero esiste 404 (File Not Found), 500 (Internal Server Error) e così via.
Vediamo adesso i principali metodi:
- abort, termina preventivamente la richiesta HTTP.
- getResponseHeaders, restituisce le intestazioni della richiesta.
- open, apre la richiesta.
- send, invia la richiesta.
- setRequestHeader, imposta le intestazioni della richiesta.
Ad esempio il metodo open accetta i seguenti parametri:
oggetto.open(metodo, url, asincrono, username, password);
dove per metodo si intende il metodo di invio e relativa ricezione dei dati, ovvero GET o POST; la URL è quella del documento XML o quel che sia che si sta richiedendo; asincrono è un valore booleano ed accetta i valori ture o false ed username e password sono valori opzionali che vanno specificati solo se il documento è esplicitamente protetto.
Esempi di Ajax
Dynamic Ajax Content: inclusione di testo da un file esterno al click; possibilità di scegliere di caricare o meno il CSS del testo.
Ajax Includes Script: semplice inclusione di testo da un file esterno.
Cerca nel sito 
|
