0Pricing
jQuery Academy · Lezione

Configurazione efficace delle richieste AJAX

Esplorare le opzioni complete di .ajax(), inclusi tipi di dati, header, caching e timeout, per perfezionare le richieste asincrone in diversi scenari.

Configurazione efficace delle richieste AJAX è una lezione jQuery Academy gratuita su CoddyKit. Questa è la lezione 1 di 3. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento jQuery Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso jQuery Academy include 3 lezioni in totale.

Scateni la potenza di .ajax()

Il metodo $.ajax() di jQuery è la soluzione ideale per effettuare richieste HTTP con il massimo controllo. A differenza di metodi più semplici come $.get() o $.post(), $.ajax() consente di configurare con precisione ogni aspetto della richiesta.

Questa lezione ne esplora le numerose opzioni, dall'impostazione dei tipi di dati alla gestione della memorizzazione nella cache e dei timeout, per creare applicazioni asincrone solide ed efficienti.

La struttura di base di .ajax()

In sostanza, $.ajax() accetta un oggetto di coppie chiave-valore che rappresentano le opzioni di configurazione. La richiesta più semplice richiede solo un url.

Ecco come si possono recuperare dati da un'API:

$.ajax({
  url: "https://jsonplaceholder.typicode.com/posts/1"
}).done(function(data) {
  console.log("Fetched data:", data.title);
});

URL e metodo (type)

L'opzione url specifica l'endpoint della richiesta. L'opzione type (o method nelle versioni più recenti di jQuery) definisce il metodo HTTP, ad esempio GET, POST, PUT o DELETE.

  • url: l'URL di destinazione della richiesta.
  • type: il metodo HTTP (ad es. "GET", "POST").
$.ajax({
  url: "/api/users",
  type: "POST"
});

Inviare dati con `data`

Utilizzi l'opzione data per inviare informazioni insieme alla richiesta. Per le richieste GET, i dati vengono aggiunti all'URL come parametri di query. Per le richieste POST, vengono inviati nel corpo della richiesta.

È possibile passare un oggetto semplice: jQuery lo serializzerà automaticamente.

$.ajax({
  url: "/api/save-item",
  type: "POST",
  data: {
    id: 123,
    name: "New Gadget"
  }
});

Risposta prevista: `dataType`

L'opzione dataType indica a jQuery il tipo di dati che si prevede di ricevere dal server (ad es. "json", "xml", "html", "text"). In questo modo jQuery può analizzare correttamente la risposta.

Se non viene specificata, jQuery prova a dedurla dal tipo MIME della risposta.

$.ajax({
  url: "/api/products",
  dataType: "json"
});

Intestazioni personalizzate: `headers`

L'opzione headers consente di impostare intestazioni HTTP personalizzate per la richiesta. È fondamentale per attività come l'autenticazione (ad es. l'invio di una chiave API) o la specifica dei tipi di contenuto.

Passi un oggetto in cui le chiavi sono i nomi delle intestazioni e i valori ne rappresentano il contenuto.

$.ajax({
  url: "/api/secure-data",
  headers: {
    "Authorization": "Bearer your_token",
    "X-Requested-With": "XMLHttpRequest"
  }
});

Controllare la memorizzazione nella cache: `cache`

I browser memorizzano spesso nella cache le richieste GET per velocizzare i caricamenti successivi. Sebbene sia utile, a volte è necessario ricevere dati aggiornati ogni volta.

Imposti cache: false per impedire al browser di memorizzare la risposta nella cache, assicurandosi che la richiesta recuperi sempre le informazioni più recenti dal server.

$.ajax({
  url: "/api/dynamic-content",
  cache: false
});

Limiti della richiesta: `timeout`

Le richieste di lunga durata possono peggiorare l'esperienza dell'utente. L'opzione timeout consente di specificare il tempo massimo (in millisecondi) entro il quale la richiesta deve essere completata.

Se la richiesta non termina entro questo intervallo, viene interrotta e viene attivato il callback .fail().

$.ajax({
  url: "/api/slow-report",
  timeout: 8000 // 8 seconds
});

Esempio pratico: configurazione AJAX avanzata

Vediamo un esempio completo che combina diverse opzioni di $.ajax(). Questa richiesta recupera un elemento todo, specifica che la risposta prevista è in formato JSON, aggiunge un'intestazione personalizzata, disabilita la memorizzazione nella cache e imposta un timeout.

Provi a eseguirla per vedere come si aggiorna il paragrafo di output!

<!DOCTYPE html>
<html>
<head>
  <title>AJAX Config Demo</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
  <h3>Check Console & Output:</h3>
  <p id="output">Fetching data...</p>
  <script>
    $(document).ready(function() {
      $.ajax({
        url: "https://jsonplaceholder.typicode.com/todos/1",
        type: "GET",
        dataType: "json",
        headers: {
          "X-App-ID": "CoddyKit-Demo"
        },
        cache: false,
        timeout: 7000 // 7 seconds
      })
      .done(function(data) {
        $("#output").html(
          "<b>Todo fetched!</b><br>ID: " + data.id + 
          "<br>Title: " + data.title
        );
        console.log("Success:", data);
      })
      .fail(function(jqXHR, textStatus, errorThrown) {
        $("#output").html(
          "<b>Request failed!</b><br>Status: " + textStatus + 
          "<br>Error: " + errorThrown
        );
        console.error("Error:", textStatus, errorThrown);
      })
      .always(function() {
        console.log("Request completed.");
      });
    });
  </script>
</body>
</html>

Verifica sulla configurazione AJAX

Immagini di sviluppare una funzionalità per inviare un nuovo commento di un utente a /api/comments. Deve trattarsi di una richiesta POST, che includa commentText e userId e che restituisca un oggetto JSON. Inoltre, per assicurarsi che il commento sia sempre aggiornato, desidera impedire la memorizzazione nella cache del browser.

Quali delle seguenti opzioni di $.ajax() sono essenziali per questo scenario specifico?

Riepilogo: configurazione AJAX completata

Ha imparato a configurare il metodo $.ajax() di jQuery!

  • Ha imparato a specificare url e il type HTTP.
  • Ha imparato a inviare dati utilizzando l'opzione data.
  • Ha imparato a definire il formato della risposta previsto con dataType.
  • Ha imparato ad aggiungere headers HTTP personalizzate per scenari d'uso avanzati.
  • Ha imparato a controllare la memorizzazione nella cache del browser con cache.
  • Ha imparato a impostare limiti per le richieste lente utilizzando timeout.

Queste potenti opzioni consentono di creare interazioni asincrone altamente personalizzate e affidabili nelle applicazioni web.

Domande Frequenti

La lezione «Configurazione efficace delle richieste AJAX» è gratuita?

Sì — il testo completo di «Configurazione efficace delle richieste AJAX» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso jQuery Academy, passa a CoddyKit PRO. Il corso jQuery Academy include 3 lezioni in totale.

Cosa imparerò in «Configurazione efficace delle richieste AJAX»?

Esplorare le opzioni complete di .ajax(), inclusi tipi di dati, header, caching e timeout, per perfezionare le richieste asincrone in diversi scenari. Eserciti jQuery Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare jQuery Academy?

Non è richiesta alcuna esperienza precedente. jQuery Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 1 di 3.

Quanto tempo richiede la lezione «Configurazione efficace delle richieste AJAX»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione jQuery Academy?

Sì. Ogni lezione jQuery Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

  1. Configurazione efficace delle richieste AJAX
  2. Gestione degli errori e dei risultati AJAX
  3. AJAX cross-domain (CORS/JSONP)
← Torna a jQuery Academy