Fabio Donatantonio

Resta connesso

Software Developer / Adjunct Professor

Ajax con JQuery

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

Fabio Donatantonio

Fabio Donatantonio. Analista e sviluppatore full-stack di applicazioni web in linguaggio PHP. Professore a Contratto per le cattedre di Fondamenti di Informatica e Archivistica Digitale presso Università degli Studi eCampus. Dal 2008 curatore del sito www.donatantonio.net, da sempre appassionato di programmazione, mare, sigari e... musica.

1 Comment

  1. JQuery, il metodo .html() | Fabio Donatantonio

    18th Lug 2011 - 23:39

    […] migliorare la funzione precedente è necessario introdurre Ajax (leggi articolo Ajax con jQuery). Il nuovo codice HTML sarà generato da uno script lato server, opportunamente […]

Leave a reply

Your email address will not be published. Required fields are marked *

 

Didattica

Università degli Studi eCampus
Data Evento
05/07/2019
11:30
Esame Archivistica Digitale e Informatica per le Scienze Umane - Cds Filologia Moderna - Lettere - Novedrate(CO)
05/07/2019
11:30
Esame Introduzione all'Archivistica Digitale e all'Informatica per le Scienze Umane - Cds Letteratura, Arte, Musica e Spettacolo - Lettere - Novedrate(CO)
05/07/2019
11:30
Esame Abilità Informatiche e Telematiche - Cds Design e Discipline della Moda - Lettere - Novedrate(CO)
12/07/2019
11:30
Esame Introduzione all'Archivistica Digitale e all'Informatica per le Scienze Umane - Cds Letteratura, Arte, Musica e Spettacolo - Lettere - Roma
12/07/2019
11:30
Esame Archivistica Digitale e Informatica per le Scienze Umane - Cds Filologia Moderna - Lettere - Roma
12/07/2019
11:30
Esame Abilità Informatiche e Telematiche - Cds Design e Discipline della Moda - Lettere - Roma
Risorse
Guida HTML/CSS per principianti (link)
Introduzione agli ipertesti (link)
Esercizi guidati in Java (link)
Intelligenza artificiale (link)
Libri
Fondamenti di Informatica (2011) (link)
Informatica per le Scienze Umane (2011) (link)
Fondamenti di Informatica (2014) (link)
Pagina Docente
uniecampus.it - Scheda Docente (link)
Contatti
fabio.donatantonio[at]uniecampus.it

JWhisper, sviluppato presso il Dipartimento di Informatica Applicata dell'Università degli Studi di Salerno:

Stay Connected

Twitter

Le mie foto

Foto di Fabio Donatantonio
×