AJAX e jQuery, gestire le chiamate ajax con 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");
          }
        });
        });
    });