Come descritto in altri articoli è possibile implementare in maniera autonoma le chiamate Ajax, realizzando una o più funzioni che con l’utilizzo dell’oggetto XMLHttpRequest e di alcune specifiche Javascript permettano di aggiornare gli elementi che compongono una pagina html.
A volte però, soprattutto in occasione di progetti più ampi e complessi, è utile ricorrere ad un prezioso alleato, il framework JQuery.

JQuery ci fornisce una struttura semplice e snella per implementare chiamare Ajax. La funzione in questione richiede all’utente una serie di informazioni come ad esempio: url della risorsa, parametri in input, tipo di dato restituito e fornisce sottofunzioni per gestire il buono o cattivo esito della richiesta.
Ecco la sintassi per implementare una semplice chiamata Ajax con JQuery:

$.ajax({
     type: "GET",
     dataType: "html",
     url: "pagina.php",
     data: "parametro=valore",
     success: function(dati){
                       // OPERAZIONI DA SVOLGERE IN CASO DI SUCCESSO
     }
     error: function(richiesta,stato,errori){
                   // OPERAZIONI DA SVOLGERE IN CASO DI INSUCCESSO          
     }
});

Il codice appena visto è gia sufficiente per implementare Ajax con JQuery. Andando per ordine, analizziamo ciascun parametro:

TYPE : specifica la modalità di passaggio dei parametri, può essere GET o POST
DATATYPE : specifica il tipo di dato che la chiamata restituisce, può essere html, json, script o xml
URL : specifica l’url dello script lato server a cui effettuare la richiesta
DATA : specifica la stringa contenente gli eventuali parametri da passare allo script lato server
SUCCESS : racchiude la funzione da invocare nel momento in cui la richiesta Ajax vada a buon fine
ERROR : racchiude la funzione da invocare nel momento in cui la richiesta Ajax non vada a buon fine

Vediamo ora un esempio concreto di utilizzo Ajax con JQuery. Realizzeremo una funzione javascript che effettua la chiamata ad un file remoto che ha come unico scopo quello di restituire un testo che va ad aggiornare un div html. Per completare l’esempio, immaginiamo di dover passare un parametro alla pagina lato server.

function AggiornaDIV(id_div){
     // Prelevo il parametro da passare
     var parametro = document.getElementById('parametroDaPassare').value;
     
     // Effettuo la chiamata Ajax
     $.ajax({
          type: "GET",
          dataType: "html",
          url: "pagina.php",
          data: "parametro="+parametro,
          success: function(dati){
               // Aggiorno il contenuto del DIV con i dati ricevuti
               document.getElementById(id_div).innerHTML=dati;
          }
          error: function(richiesta,stato,errori){
               // Visualizzo un messaggio di errore in caso di chiamata fallita
               alert('Errore nella chiamata AJAX:'+errori);          
          }
     });
}

In poche righe di codice si racchiude tutto ciò che ci serve per effettuare una chiamata AJAX. Esistono però numerosi parametri opzionali che in base alle diverse esigenze possono tornare utili per gli sviluppatori, ad esempio quelli più interessanti sono:

ASYNC : definisce se la chiamata deve essere sincrona o asincrona e assume valore true o false
CACHE : indica al browser se forzare o meno il ricaricamento dei dati anche se questi non sono cambiati, assume valore true e false
TIMEOUT : esprire il tempo (in millesecondi) dopo di cui una richiesta non ancora conclusa viene considerata fallita

Parametri come timeout e cache risultano essere molto utili quando si vuol limitare una richiesta Ajax. Mettere in cache l’esito di una richiesta ci permette di non sprecare tempo e impostare un timeout si evitano attese eterne per richieste che non avranno responso.

In conclusione ecco i riferimenti ufficiali:
– Scaricare JQUERY
– Documentazione ufficiale di JQuery