Nella lezione precedente abbiamo visto come utilizzare il metodo .ajax() per effettuare delle chiamate asincrone. Oltre a questo metodo, jQuery fornisce anche alcune scorciatoie che permettono di realizzare una chiamata Ajax in maniera ancora più semplice. Le scorciatoie che vederemo in questa lezione non permettono di raggiungere il livello di personalizzazione del metodo .ajax(), ma sono comunque estremamente utili, in quanto sono in grado di far fronte alle principali problematiche dello sviluppo quotidiano.
Le scorciatoie cui facciamo riferimento sono sostanzialmente tre e corrispondono ai metodi:
- .get()
- .post()
- .load()
I primi due metodi sono essenzialmente uguali ma differiscono per il metodo HTTP con cui caricano i dati (GET o POST); il terzo metodo, invece, permette di caricare l’HTML di ritorno della chiamata direttamente dentro un elemento selezionato.
I metodi .get() e .post()
Entrambi questi metodi ammettono 4 parametri:
- url: l’url della risorsa da chiamare;
- data (opzionale): dati passati alla risorsa in formato stringa o oggetto;
- success (opzionale): funzione di callback da eseguire in caso di successo;
- dataType (opzionale): specifica quale tipo di dati ci si aspetta in ritorno.
Valgono per questi parametri le osservazioni già svolte alla lezione precedente.
Vediamo ora alcuni esempi per spiegare meglio il loro utilizzo:
$.get("ajax/utenti.php");Con il codice qui sopra ci limitiamo ad effettuare una chiamata (col metodo GET) ad un file senza passargli dati ne pretendere dei dati in ritorno.
$.get("ajax/utenti.php", { nome: "Mario", cognome: "Rossi" });Con quest’altro codice, invece, abbiamo effettuato una chiamata passando dei dati ma senza richiedere alcuna risposta di ritorno.
$.get("ajax/utenti.php", { nome: "Mario", cognome: "Rossi" }, function(risposta) {
$("#risultato").html(risposta);
});Con quest’ultimo codice, infine, richiediamo anche una risposta che viene inserita, come contenuto HTML, nell’elemento con ID "risultato".
E’ appena il caso di sottolineare che la chiamata con $.post() sarebbe stata identica.
Vediamo, per finire, un ultimo esempio che mostra come processare un modulo con metodo POST passando tutti i valori dei campi in un colpo solo:
$.post("ajax/elabora.php", $("#iscrizione").serialize(), function(){
alert("Dati elaborati");
});Come vedete è stato possibile selezionare tutti i valori del form con ID "iscrizione" semplicemente utilizzando il metodo serialize() grazie al quale tutti i valori inseriti nei vari campi del modulo vengono predisposti in formato stringa da appendere alla URL e prendono questa forma:
campo1=valore1&campo2=valore2&campo3=valore3&...Esattamente come accade per $.ajax(), questi due metodi restituiscono un oggetto jqXHR e pertanto possono essere utilizzati i metodi .done(), .fail() e .always() visti alla lezione precedente.
Il metodo .load()
Il metodo .load() prevede gli stessi parametri dei metodi precedenti, eccetto dataType, in quanto, come vedremo, è sempre e necessariamente "html". A differenza dei metodi visti poco sopra, inoltre, il metodo .load() non si applica all’oggetto jQuery ma ad uno specifico selettore al cui interno viene caricato l’HTML prodotto dalla risorsa.
Per meglio spiegare il funzionamento di questo metodo riprendiamo lo stesso esempio che avevamo fatto con $.get() e implementiamo con .load():
$('#risultato').load("ajax/utenti.php", { nome: "Mario", cognome: "Rossi" });I dati sono passati tramite il metodo POST se scritti con notazione chiave/valore (come nell’esempio), altrimenti vengono passati utilizzando GET.
