Come effettuare chiamate Ajax con jQuery
In questo tutorial vedremo come effettuare una richiesta in Ajax con jQuery in pochissime righe di codice, senza avere più l’incubo delle incompatibilità dovute alle diverse implementazioni del motore javascript nei vari Browser (IE in primis).
Nello specifico analizzeremo la funzione: jQuery.ajax(), che rappresenta una delle tante funzioni messe a disposizione da questo favoloso framework, rendendo l’utilizzo delle richieste Ajax conciso e veloce.
1. Come utilizzare jQuery: io preferisco utilizzare le CDN di Google, così il download del framework non appesantirà ulteriormente il caricamento della vostra pagina:
[javascript]
[/javascript]
2. Adesso passiamo all’inizializzazione di jQuery: questo tipo di inizializzazione funziona in ogni circostanza , di conseguenza non è necessario preoccuparsi di eventuali conflittualità con altri script:
[javascript]
//Va inserito nel tag
[/javascript]
3. Adesso utilizzeremo insieme alla nostra richiesta in Ajax un’altra funzione jQuery().on(), utilizzata per associare ad un determinato evento di un generico elemento del DOM un’azione es.
[javascript]
//Questa funzione associa ad ogni elemento della pagina una funzione che restituisce un messaggio con scritto a.
jQuery(‘a’).on(‘click’,function(){ alert(‘elemento a’); });
[/javascript]
4. Ora siamo in grado di scrivere la funzione che ci permetterà di inviare le nostre richieste in Ajax:
[javascript]
[/javascript]
5. Passiamo ora alla penultima fase, nella quale inseriremo l’html che vi riporto in versione integrale:
[javascript]
[/javascript]
6. L’ultimo passo è la creazione di un banale script php al quale invieremo le richieste, che in caso di esito positivo restituiranno un messaggio contenente il valore del nostro input:
[php]
[/php]
Prima di lasciarvi vi ricordo l’esempio, scaricabile di seguito, per funzionare deve essere eseguito su un server LAMP, poichè anche se javascript è un linguaggio lato client, le richieste ajax vengono effettuate tramite protocollo http. Per ulteriori info: Utenti Windows: WAMP – Utenti Mac: MAMP.
Download