Interazioni Ajax

Indice

Ora che la maggior parte delle applicazioni web necessita integrare interazioni Ajax, jQuery permette di includerle senza alcuna difficoltà. I seguenti esempi mostrano come sia facile eseguire alcune interazioni comuni in Ajax:
Interazioni comuni in Ajax

Copia codice 

// Carica il contenuto di una pagina HTML in un elemento
$("div#notizie").load("notizie.html");
// Scarica uno script dal server e lo esegue
$.getScript("/percorso/fino/a/mioScript.js");
// Richiesta GET al server con parametri e funzione di risposta
// La richiesta POST es la stessa, cambiando $.get per $.post
$.get("/percorso/fino/allo/scriptDelServer.php",
   {idProdotto: "AX00342", quantita: "3"},
   function(data){
     alert("Si è  aggiunto al carrello: " + data);
   }
);
Inoltre, jQuery include molte altre funzioni per costruire sofisticate richieste Ajax e notificare all’utente l’inizio/l’esecuzione/finalizzazione nelle richieste Ajax.

Effetti visivi
⤽
Tutte le applicazioni web moderne incorporando piccoli effetti visivi e animazioni che, se utilizzati correttamente, migliorano l’interazione con l’applicazione e la sua usabilità. jQuery fornisce una serie di effetti visivi, usati dai progettisti web, dove si possono controllare la durata di ogni effetto attraverso le sue opzioni:
Opzioni di durata di ogni effetto
Copia codice 

$("p").hide();        // Nasconde un elemento
$("p").show();        // Mostra un elemento
$("p").toggle();      // Se era nascosto, lo mostra;
                      // se era visibile, lo nasconde
$("p").show("slow");  // Mostra l'elemento con una
                      // animazione leggera
$("p").slideToggle("fast"); // Dispiega/nasconde l'elemento
                            // con un'animazione veloce
$("p").fadeOut();     // L'elemento sparisce
                      // con una fusione leggera
Altre utilità
⤽
jQuery include molte altre funzioni per facilitare lo sviluppo di applicazioni web, tra i quali:

Copia codice 

// Ottiene il valore della proprietà "color" del CSS
// del primo paragrafo della pagina
$("p").css("color");
// Imposta il valore della proprietà "color" del CSS
$("p").css("color","red");
// Imposta diverse proprietà del CSS su un elemento
$("p").css({color:"red",background:"blue",font-weight:"bold"});
// Nasconde tutti gli elementi in un form
$(mioForm.elements).hide();
// Restituisce "true" se il browser è  una qualche
// versione di Internet Explorer
$.browser.msie
// Restituisce "true" se il browser è  una qualche
// versione di Safari
$.browser.safari
// Ottiene o imposta il valore del elemento "innerHTML"
$("#contenuti").html();
$("#contenuti").html("<h1>Contenuti</h1>Caricando...");
// Aggiunge la classe CSS a tutti gli elementi
// o le rimuove se già era impostato
$("p").toggleClass("selezionato");

Questo articolo mostra solo una frazione delle possibilità dell’eccellente libreria jQuery. Con jQuery, è possibile fare molto di più e molto meglio scrivendo meno codice JavaScript e anche di avere la garanzia assoluta che le applicazioni funzionano altrettanto bene su qualsiasi browser.

Letture di riferimento
La maggior parte delle informazioni e esempi in questo articolo sono state prese dall’eccellente documentazione di jQuery in lingua inglese. Un buon modo per studiare le API (acronimo di Application Programming Interface) di jQuery è quello di accedere alla guida visiva.