jQuery offre tra le sue funzione native il supporto completo ad AJAX permettendoci di realizzare operazioni che si svolgono tutte all’interno della stessa pagina. La funzione jQuery load, più precisamente, carica dei dati dal server e li posiziona, nel codice HTML, dentro all’elemento indicato.
La funzione load()
La struttura della funzione si presenta così:
.load( url, [ data ], [ complete(responseText, textStatus, XMLHttpRequest) ] )
url: è la stringa che contiene l’indirizzo al quale viene inviata la nostra richiesta AJAX
data: indica una stringa che viene inviata al server con una richiesta
complete(responseText, textStatus, XMLHttpRequest): è la funzione di callback che viene eseguita quando la richiesta è stata completata
L’utilizzo più comune per un webdesigner: importare pagine dentro ad un’altra
L’utilizzo più classico della funzione load per chi si occupa di webdesign, e non di sviluppo puro, è quello di importare elementi di una pagina dentro ad un’altra, per evitare ad esempio il ri-caricamento della pagina. L’esempio più classico è quello di un menù in cui, al click, anzichè venire ridirezionati, viene importato il contenuto della pagina dentro ad un preciso contenitore utilizzando la sintassi:
$('#switchedContent').load('home.html #container');In questo modo il contenuto della pagina home.html localizzato dentro al contenitore con id #container verrà caricato all’interno del contenitore #switchedContent della pagina in cui abbiamo eseguito l’azione jQuery load.
Uno schema d’uso potrebbe essere il seguente:
E’ evidente che sarà necessario rendere univoca l’associazione tra l’elemento cliccato e la pagina da caricare. Un modo potrebbe essere quello di inserire nel link del menù l’indirizzo alla pagina di interesse, prelevare quindi questo valore dell’attributo href con la funzione .attr() e, attraverso l’uso del return false, impedire al browser (al click) di raggiungere realmente quella pagina eseguendo invece l’azione AJAX.
Per i più nerd linko un approfondimento sugli usi e misusi del return false che potete consultare visitando:
jQuery Events: Stop (Mis)Using Return False
Passare dati al server
Un’altra opzione molto importante lato sviluppo, offerta dalla funzione load(), è quella di poter inviare dei dati, ad esempio ad una pagina .php, e ricevere quindi un contenuto sulla base del parametro passato. La sintassi da utilizzare sarà:
$("#objectID").load("test.php", { 'choices[]': ["Jon", "Susan"] } );In questo modo stiamo inviando alla pagina test.php l’array choices[]. A seconda di quello che ci sarà scritto nella nostra pagina php, il valore ricevuto darà il via ad una serie di operazioni che forniranno un risultato specifico in risposta. Tale valore verrà quindi restituito alla funzione load e mostrato all’interno dell’oggetto #objectID. Il tutto senza la necessità di caricare alcuna pagina esterna. Fenomenale no?
