AJAX e jQuery

AJAX e jQuery sono tecnologie utili per implementare delle chiamate asincrone, in maniera piuttosto semplice.

Abbiamo già parlato di AJAX in questa lezione: Introduzione ad AJAX e abbiamo visto come creare chiamate asincrone utilizzando JavaScript.

Inoltre abbiamo fatto degli esempi su come leggere da un file presente su un server web, utilizzando l’oggetto xmlhttprequest.

Il metodo jQuery.ajax o $.ajax

jQuery dispone del metodo $.ajax() che permette di effettuare una chiamata asincrona e anche di personalizzarla.

Questo metodo restituisce un oggetto jqXHR che contiene tutte le informazioni sull’oggetto Javascript XMLHttpRequest originale.

Sintassi del metodo

$.ajax ({url[, settings]})

Quindi all’interno delle parentesi si possono specificare dei parametri, tra cui l’url.

Studiamo i principali parametri che è possibile impostare in questo metodo, in quanto sono veramente tantissimi. Per un maggiore approfondimento rimando inoltre al link del sito ufficiale: metodo jquery.ajax.

url

L’url rappresenta il percorso del file richiesto, cioè la nostra risorsa.

settings

Valore opzionale che rappresenta un insieme di coppie/valore, le quali caratterizzano la richiesta AJAX in jQuery, infatti consentono di specificare numerosi parametri tra cui:

method: rappresenta il metodo HTTP che serve per la richiesta. Può avere questi valori: POST, GET oppure PUT. Mentre il valore di default è GET.

dataType: serve a specificare il tipo di dati che si riceve dal server web. I possibili valori sono: json, xml, txt, ecc.

success (data, textStatus, jqXHR): è una funzione che verrà eseguita in caso di successo della chiamata. I parametri opzionali che accetta sono tre, data che rappresenta i dati restituiti dal server, textStatus lo stato e l’oggetto jqXHR.

error (jqXHR, textStatus, errorThrown): è una funzione che verrà eseguita in caso di errore nella chiamata effettuata, ad esempio perché la risorsa non è accessibile. I parametri sono opzionali.

Esempio di chiamata AJAX con jQuery

Facciamo adesso un semplice esempio in cui applicheremo queste tecnologie.

Lato html inseriamo un div dove andremo a visualizzare i dati del documento da richiedere ad un server web.

<p>Qui si visualizzeranno i dati ricavati dal file txt caricato sul server, dopo aver cliccato sul pulsante carica dati.</p>
<button type="button" id="load">Carica dati</button>
<div id="dati-file" style="background:yellow"></div>

Non dimentichiamo nella pagina html di inserire anche il link alla cdn jQuery:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Dopo, lato JavaScript, al click sul pulsante richiamiamo il metodo ajax dove, oltre alla url impostiamo il metodo al valore get, ed implementiamo le funzioni in caso di successo e di errore.

Ecco dunque l’esempio completo che utilizza la tecnologia AJAX e jQuery.

   $(document).ready(function(){
      $('#load').click(function (){
        $.ajax({
          method: "GET",
          // specifico la URL della risorsa da contattare
          url: "https://www.codingcreativo.it/ajax.txt",  
          // imposto l'azione in caso di successo
          success: function(risposta){
          //visualizzo il contenuto del file nel div htmlm
            $("#dati-file").html(risposta);
          },
          //imposto l'azione in caso di insuccesso
          error: function(stato){
            alert("Qualcosa è andato storto");
          }
        });
        });
    });

Prova l’esempio

Qui si visualizzeranno i dati ricavati dal file txt caricato sul server, dopo aver cliccato sul pulsante carica dati.

In questa lezione abbiamo semplicemente introdotto il concetto di AJAX e jQuery, nella prossima lezione vederemo come interagire con i file JSON.

Alcuni link utili

Tutorial jQuery

Tutorial JavaScript

Rimuovere attributi agli elementi del DOM con JavaScript

Creare attributi agli elementi

Creare elementi nel dom con javascript

Dom in javascript

Come creare una galleria di immagini con javascript

Utilizzare gli array in javascript

Alcuni esempi con javascript alert

Autore dell'articolo: Cristina

Avatar per Coding Creativo

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *