jQuery Ajax

Nello sviluppo web moderno, le chiamate alle API esterne e gli aggiornamenti dinamici dei contenuti sono caratteristiche essenziali. Ajax, acronimo di asynchronous JavaScript and XML, è un modo per inviare e ricevere dati senza ricaricare la pagina.

jQuery è una popolare libreria JavaScript che semplifica le attività più comuni e fornisce funzionalità aggiuntive. In jQuery, il metodo .ajax consente agli sviluppatori di effettuare facilmente chiamate Ajax, impostando opzioni quali il metodo HTTP, l'URL e le funzioni di callback per la gestione dei successi o degli errori.

Inoltre, jQuery offre metodi di convenienza per tipi specifici di richieste Ajax, come .get, .post e .load. L'uso di Ajax in combinazione con jQuery può migliorare notevolmente l'esperienza dell'utente su un sito web, consentendo il recupero e l'aggiornamento dei dati senza soluzione di continuità.

JavaScript include funzionalità di invio di richieste http asincrone utilizzando l'oggetto XMLHttpRequest. Ajax utilizza questa capacità di JavaScript per inviare richieste http asincrone e ottenere i dati xml come risposta (anche in altri formati) e aggiornare la parte di una pagina web (utilizzando JavaScript) senza ricaricare o aggiornare l'intera pagina web.

La libreria jQuery include vari metodi per inviare richieste Ajax. Questi metodi utilizzano internamente l'oggetto XMLHttpRequest di JavaScript.

Metodi jQuery AjaxCategoria	Descrizione
ajax()	Invia la richiesta http asincrona al server.
get()	Invia una richiesta http GET per caricare i dati dal server.
post()	Invia la richiesta http POST per inviare o caricare i dati sul server.
getJSON()	Invia la richiesta http GET per caricare i dati codificati in formato JSON dal server.
getScript()	Invia una richiesta http GET per caricare il file JavaScript dal server e poi lo esegue.
load()	Invia una richiesta http per caricare il contenuto html o testo dal server e aggiungerli agli elementi DOM.

jQuery ajax()

Sintassi:

$.ajax(url);

$.ajax(url,[opzioni]);

url: l'URL a cui si desidera inviare o recuperare i dati.
opzioni: opzioni di configurazione per la richiesta Ajax. Un parametro di opzioni può essere specificato usando il formato JSON. Questo parametro è opzionale.

La seguente tabella elenca tutte le opzioni disponibili per la configurazione della richiesta Ajax.

Opzioni	Descrizione
accepts	Il tipo di contenuto inviato nell'intestazione della richiesta che dice al server che tipo di risposta accetterà in cambio.
async	Per impostazione predefinita, tutte le richieste vengono inviate in modo asincrono. Impostare false per renderle sincrone.
beforeSend	Una funzione di callback da eseguire prima dell'invio della richiesta Ajax.
cache	Un booleano che indica la cache del browser. L'impostazione predefinita è vera.
complete	Una funzione di richiamo da eseguire al termine della richiesta.
contentType	Una stringa che contiene un tipo di contenuto quando si invia un contenuto MIME al server.Default è "application/x-wwww-form-urlencoded; charset=UTF-8".
crossDomain	Un valore booleano che indica se una richiesta è un dominio incrociato.
data	Un dato da inviare al server. Può essere un oggetto JSON, una stringa o un array.
dataType	Il tipo di dati che ti aspetti di ricevere dal server.
error	Una funzione di richiamo da eseguire quando la richiesta fallisce.
global	A Boolean indicating whether to trigger a global Ajax request handler or not. Default is true.
headers	Un oggetto di coppie di intestazioni aggiuntive di chiave/valore da inviare insieme alla richiesta.
ifModified	Permettere che la richiesta abbia successo solo se la risposta è cambiata rispetto all'ultima richiesta. Questo si fa controllando l'intestazione dell'ultima richiesta. Il valore predefinito è falso.
isLocal	Permettere che l'ambiente attuale sia riconosciuto come locale.
jsonp	Sovrascrivi il nome della funzione di richiamata in una richiesta JSONP. Questo valore sarà usato al posto di 'callback' nella parte 'callback=?' della stringa della query nell'url.
jsonpCallback	Stringa contenente il nome della funzione di richiamata per una richiesta JSONP.
mimeType	Stringa contenente un tipo di mimo per sovrascrivere il tipo di mimo XMLHttpRequest.
password	Una password da utilizzare con XMLHttpRequest in risposta ad una richiesta di autenticazione di accesso HTTP.
processData	Un booleano che indica se i dati assegnati all'opzione dati saranno convertiti in una stringa di query. L'impostazione predefinita è vera.
statusCode	Un oggetto JSON contenente codici HTTP numerici e funzioni da chiamare quando la risposta ha il codice corrispondente.
success	Una funzione di callback da eseguire quando la richiesta Ajax ha successo.
timeout	Un valore numerico in millisecondi per il timeout della richiesta.
type	Un tipo di richiesta http, ad esempio POST, PUT e GET. L'impostazione predefinita è GET.
url	Una stringa contenente l'URL a cui viene inviata la richiesta.
username	Un nome utente da utilizzare con XMLHttpRequest in risposta ad una richiesta di autenticazione di accesso HTTP.
xhr	Un richiamo per la creazione dell'oggetto XMLHttpRequest.
xhrFields	Un oggetto di coppie fieldName-fieldValue da impostare sull'oggetto nativo XMLHttpRequest.
contentType	Una stringa che contiene un tipo di contenuto quando si invia un contenuto MIME al server.Default è "application/x-wwww-form-urlencoded; charset=UTF-8".

Il metodo ajax() esegue la richiesta http asincrona e riceve i dati dal server. L'esempio seguente mostra come inviare una semplice richiesta Ajax.

$.ajax('/jquery/getdata',
{
success: function (data, status, xhr) {
$('p').append(data);
}
});

Nell'esempio precedente, il primo parametro '/getData' del metodo ajax() è un url dal quale vogliamo recuperare i dati. Il secondo parametro è il parametro delle opzioni in formato JSON dove abbiamo specificato la funzione di callback che verrà eseguita quando la richiesta avrà successo. Puoi configurare altre opzioni come indicato nella tabella qui sopra.

Il metodo ajax() può inviare tutti i tipi di richieste http. L'esempio seguente invia la richiesta http POST al server.

$.ajax('/jquery/submitData', {
type: 'POST',
data: { myData: 'Questi sono i miei dati da inviare.' },
success: function (data, status, xhr) {
$('p').append('stato: ' + status + ', data: ' + data);
},
error: function (jqXhr, textStatus, errorMessage) {
$('p').append('Errore' + errorMessage);
}
});

jQuery get()

Il metodo jQuery get() invia una richiesta http GET asincrona al server e recupera i dati.

Sintassi:

$.get(url, [data],[callback]);

Parametri:

url: richiedi l'url da cui vuoi recuperare i dati.
data: i dati da inviare al server con la richiesta come stringa di interrogazione.
callback: funzione da eseguire quando la richiesta ha successo.

$.get('/prova.txt',
function (data, textStatus, jqXHR) {
alert('stato: ' + textStatus + ', dati:' + data);
});

Nell'esempio precedente, il primo parametro è un url dal quale vogliamo recuperare i dati. Qui vogliamo recuperare i dati da un file txt che si trova su esempiodominio/prova.txt. Se noti non è necessario fornire l'indirizzo di base.

Il secondo parametro è una funzione di callback che verrà eseguita quando questa richiesta GET avrà successo. Questa funzione di callback include tre parametri dati, textStatus e jQuery wrapper dell'oggetto XMLHttpRequest. Data contiene i dati di risposta, textStatus contiene lo stato della richiesta e jqXHR è un oggetto jQuery XMLHttpRequest che puoi usare per un ulteriore processo.

Il metodo jQuery getJSON() invia una richiesta http GET asincrona al server e recupera i dati in formato JSON impostando l'intestazione su application/json, text/javascript. Questo è lo stesso del metodo get(), l'unica differenza è che il metodo getJSON() recupera specificamente i dati JSON mentre il metodo get() recupera qualsiasi tipo di dati.

$.getJSON('/jquery/getjsondata', {name:'Joshua'}, function (data, textStatus, jqXHR){
$('p').append(data.firstName);
});

Il metodo jQuery getScript() invia la richiesta GET al server, recupera il file JavaScript e poi lo esegue. Internamente, il metodo jQuery getScript() chiama il metodo get() e imposta dataType a script.

L'esempio seguente mostra come scaricare un file js usando il metodo getScript().

$.getScript('/demo/mio_script.js', function(script,status,jqxhr){
alert(status);
});

jQuery post()

Il metodo jQuery post() invia una richiesta POST asincrona al server per inviare i dati al server e ottenere la risposta.

Sintassi:

$.post(url,[data],[callback],[type]);

‍url: l'url da cui vuoi inviare e recuperare i dati.
‍data: dati in json da inviare al server.
‍callback: funzione da eseguire quando la richiesta ha successo.
‍type: tipo di dati del contenuto della risposta.

$.post('/jquery/inviodati',
{ mieiDati: 'Sono i miei dati.' },
function(data, status, jqXHR) {
$('p').append('stato: ' + status + ', data: ' + data);
})

Nell'esempio sopra riportato, il primo parametro è un url al quale vogliamo inviare la richiesta http POST e inviare i dati.

Il secondo parametro è un dato da inviare in formato JSON, dove la chiave è il nome di un parametro e il valore è il valore del parametro.

Il terzo parametro è una funzione callback che verrà richiamata quando la richiesta avrà successo. La funzione di callback può avere tre parametri: data, status e jqXHR. Il parametro data è una risposta proveniente dal server.

$.post('/jquery/inviodati',
{ mieiDati: 'Sono i miei dati.' },
function(data, status, xhr) {

$('p').append('stato: ' + status + ', data: ' + data);

}).done(function() { alert('Richiesta effettuata!'); })
.fail(function(jqxhr, settings, ex) { alert('Richiesta fallita, ' + ex); });

<<<

Nessun argomento precedente

>>>

Nessun argomento seguente

Corso JavaScript per principianti a 12,99 su Udemy

Console