Benvenuto! Se sei un nuovo visitatore ti consiglio di iscriverti al mio Feed RSS in modo da essere sempre aggiornato riguardo l'uscita di nuovi articoli oppure sbirciare tra i tutorials ed i progetti.
Per avere un'idea del best-content presente in questo blog puoi leggere il post intitolato "Ed ora è il momento di rilanciare alcune iniziative! (1a parte e 2a parte)".
Buona navigazione e grazie per la visita!

Introduzione

Questo tutorial ha il puro scopo di aprire le porte verso la costruzione di applicazioni dinamiche, veloci che sono alla base del Web 2.0, utilizzando Ajax (che si concretizza solitamente con l'utilizzo dell'oggetto XmlHttpRequest).
L'approccio che cercherò di utilizzare sarà il più semplice possibile in modo da far apprendere facilmente le basi che permetteranno poi al lettore di approfondire l'argomento leggendo le risorse che si trovano ormai ovunque su Internet.

Istanziamo l'oggetto XmlHttpRequest

Questo componente fu creato inizialmente dalla Microsoft (eh si dobbiamo ringraziarla :P) sottoforma di oggetto ActiveX per poi essere implementato (come oggetto nativo) pure da parte di Mozilla e Co.
Dobbiamo tenere conto di ciò nella fase di istanziazione dell'oggetto perchè il Javascript corrispondente per il browser Explorer sarà:

mentre per ogni altro browser sarà:

di conseguenza per permettere un'istanziazione "indipendente" dal browser basterà verificare l'esistenza dell'oggetto in questo modo:

In realtà esistono altri script simili (più lunghi) che tengono conto delle varie implementazioni dei vari browsers web, ma la minestra è la stessa ;)

Analizziamo l'oggetto XmlHttpRequest

Una volta creato l'oggetto di riferimento abbiamo a disposizione una discreta quantità di metodi che elenco qui sotto:

• abort(): Non fa altro che bloccare la richiesta corrente;
• getAllResponseHeaders(): Ritorna il completo set degli headers come stringa (ad esempio il Cache-Control, ecc...);
• getResponseHeader(<label>): Ritorna solo l'header corrispondente alla label;
• open(<metodo>,url[,async[,<username>[,<password>]]])): Con questa funzione prepariamo la connessione indicando se utilizzare come metodo il POST, HEAD o GET ed impostando l'url con cui comunicheremo. Async ci permette di scegliere tra una comunicazione asincrona o meno (quindi decidere se l'utente deve aspettare che la comunicazione finisca per continuare ad interagire con la nostra applicazione); username e password servono per un'eventuale connessione sicura (non so fino a che punto sia sicura visto che username e password saranno visibili a chiunque legga il codice Javascript :P)
• send(<contenuto>): Diamo il via alla nostra trasmissione dati :) Se facciamo un GET il contenuto è inutile (quindi o lo tralasciamo o lo settiamo come null) mentre per il POST dobbiamo riversare sul contenuto i dati da inviare (sottoforma di XML oppure URL Encoded)
• setRequestHeader(<nome>,<valore>): Permette di modificare il valore ad un determinato header a nostra scelta (che verrà poi spedito mediante la nostra richiesta);

Eccovi un esempio di invio dati in GET:

Come potete notare le variabili e in generale i dati da inviare allo script vengono inclusi nell'indirizzo come ormai siamo abituati a fare da anni (utilizzando il GET); a questo punto dopo aver impostato la funzione di callback possiamo inviare i nostri dati passando alcun parametro al metodo send().

Nel caso di un POST le cose cambiano leggermente:

Per eseguire la comunicazione in POST abbiamo dovuto inserire le variabili come contenuto del metodo send() e aggiungere una nuova intestazione che dicesse allo script che gli stiamo passando dei dati nella forma URL Encoded (altrimenti non funziona).
Mmm ho capito, ma che cos'è quella funzione di callback?

La funzione di callback (per l'esattezza un EventListener)

Prima di entrare nel cuore del discorso esaminiamo le proprietà dell'oggetto XmlHttpRequest:

• readyState: Indica lo stato della comunicazione ritornando i possibili seguenti valori:
  • 0: Valore iniziale (stato indefinito);
  • 1: Metodo open() chiamato con successo;
  • 2: Metodo send() eseguito, la richiesta è stata inviata;
  • 3: Trasferimento dati in corso;
  • 4: Trasferimento completato;
• responseText: Ritorno dei dati ricevuti dal server sottoforma di stringa;
• responseXML: Ritorno dei dati ricevuti dal server sottoforma di XML;
• status: Ritorna il codice di stato http, nel caso in cui la comunicazione è avvenuta con successo avremo il codice "200";
• statusText: Ritorna la descrizione relativa al codice di stato http attuale;

La proprietà che ci permette di gestire il trasferimento dei dati ed in generale i cambiamenti di stato è onreadystatechange.
Vediamone l'utilità con un esempio:

Negli esempi precedenti abbiamo indicato di chiamare ad ogni cambiamento di stato la funzione onStateChange che in questo caso ci permette di distinguere l'avvenuto caricamento da una situazione di errore.
Questo è l'utilizzo più comune del metodo ma le varie combinazioni di status e readyState ci permettono di poter gestire una miriade di casistiche.

Utilizziamo i dati ricevuti

Nell'esempio precedente ho messo un commento nel caso in cui la comunicazione sia avvenuta con successo ma è chiaro come in quella posizione debba andare il codice che cambia dinamicamente l'aspetto della pagina.
Un esempio è il seguente:

Con questa semplice riga di codice riversiamo i dati ricevuti nel tag corrispondente all'id "risultato".

Conclusione

Dopo questa breve panoramica generale ho deciso pure di condividere una semplice applicazione Ajax che non fa altro che affidare ad uno script lato server (PHP) la somma di 2 numeri di 4 cifre.

Ora non vi resta che lavorare! :P