jQuery Ajax

Ajax sta per "Asynchronous JavaScript e XML".

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); });