Introduzione ad Ajax e .load()

In questa lezione, vediamo cosa è e come funziona Ajax, come utilizzarlo con jQuery, e come usare il metodo predefinito .load().

Ajax: cos'è e come funziona

Normalmente, i dati di una pagina web possono cambiare soltanto dopo che l'utente ha aggiornato la pagina. Alcune tecnologie permettono, tramite JavaScript (e quindi anche jQuery), di ricevere dati e modificare una pagina web senza bisogno di aggiornare la pagina.

Ajax (Asynchronous JavaScript and XML) è una tecnologia che consente di effettuare richieste asincrone (cioè senza bloccare il caricamento della pagina) al server web evitando di ricaricare l'intera pagina. Questo processo permette di aggiornare dinamicamente il contenuto di una pagina web senza interrompere l'esperienza dell'utente. jQuery semplifica l'utilizzo di Ajax, rendendo più agevole la gestione delle richieste HTTP e delle risposte.

Come funziona Ajax in modo pratico

Quella che hai letto finora è una definizione più tecnica: in parole povere, Ajax permette di richiedere i dati ad una pagina esterna, riceverli ed usarli nel modo che preferiamo. Con Ajax, possiamo anche inviare dei parametri che il file può utilizzare.

È una tecnologia molto utilizzata sul web, e jQuery la semplifica notevolmente.

Il metodo .load()

Il primo metodo Ajax di jQuery che vediamo è .load(). Questo metodo permette di caricare i dati restituiti direttamente da un file HTML specificato.

La sintassi è: $(selettore).load(url, dati, funzione). Vediamo i parametri in dettaglio:

Il parametro selettore specifica l'elemento HTML in cui caricare i dati.
Il parametro url rappresenta l'URL della pagina HTML da caricare.
Il parametro dati (opzionale) specifica i dati da inviare alla pagina, se necessario.
Il parametro funzione (opzionale) specifica una funzione da eseguire una volta completato il caricamento.

Vediamo un esempio:

<div id="contenuto"></div>

<script>
  $("#contenuto").load("pagina.html");
</script>

In questo esempio, viene caricato il contenuto HTML della pagina pagina.html all'interno del <div>.

Metodo .load() con i parametri aggiuntivi

Vediamo un esempio utilizzando i parametri aggiuntivi:

<div id="nome"></div>

<script>
$("#nome").load("nomeUtente.html", {id:3}, function() {
  alert("Il nome dell'utente con id=3 è stato caricato." );
});
</script>

Selettori aggiuntivi

Visto che recuperiamo una pagina HTML, possiamo selezionare soltanto gli elementi che ci interessano utilizzando i selettori degli elementi nella pagina recuperata. Vediamo un esempio.

La pagina HTML è la seguente:

lista.html

<ul>
  <li id="id1">Marco Rossi</li>
  <li id="id2">Michele Tolomeo</li>
  <li id="id3">Gianfranco Toleschi</li>
</ul>

Per recuperare soltanto "Gianfranco Toleschi", posso utilizzare il suo id:

<div id="nome"></div>

<script>
  $("#nome").load("lista.html #id3");
</script>

Prova!Completa gli spazi vuoti con il testo appropriato.

// Recupera i dati del file "pagina.html" e inseriscili nel div

$("div").("pagina.html");