# AJAX di jQuery: come funziona la trasmissione asincrona dei dati

L’utilizzo di AJAX in jQuery permette a un sito web di reagire dinamicamente alle interazioni con gli utenti, richiamare e inviare i dati sul server, aggiornare i contenuti e molto altro ancora, senza dover ricaricare completamente il sito. Le **trasmissioni asincrone dei dati** con AJAX consentono quindi di realizzare applicazioni web particolarmente reattive.

## Che cosa sono i metodi jQuery.ajax()?

AJAX sta per “Asynchronous JavaScript and XML”. Il linguaggio di scripting JavaScript e la libreria jQuery comprendono metodi AJAX per lo scambio asincrono di dati fra un client e un server. A tal fine, le cosiddette “request” (richieste) AJAX in jQuery utilizzano internamente l’**oggetto XMLHttpRequest** di JavaScript. Le richieste HTTP asincrone sono inviate tramite AJAX al server web, che restituisce la risposta in un determinato formato, come XML o JSON. In questo modo è possibile aggiornare singole sezioni di un sito web senza dover ricaricare l’intero sito. Uno dei vantaggi è l’estrema flessibilità d’uso di AJAX, ad esempio anche con [jQuery in WordPress](https://www.ionos.it/digitalguide/hosting/blog/wordpress-jquery/).

Consiglio Uno [spazio web](https://www.ionos.it/hosting/spazio-web "Spazio web con IONOS") di IONOS ti permette di mettere online il tuo personale progetto web, ad esempio la tua prima applicazione jQuery, un blog o un forum tutto tuo. IONOS ti offre soluzioni convenienti con spazio di archiviazione, dominio e indirizzo e-mail inclusi.

## Quali metodi jQuery.ajax() esistono?

Per comprendere il funzionamento dei metodi .ajax() servono alcune nozioni di base su **jQuery**. Per questo motivo ti consigliamo di seguire il nostro [tutorial su jQuery](https://www.ionos.it/digitalguide/siti-web/programmazione-del-sito-web/tutorial-di-jquery-installazione-e-primi-passi/) prima di affrontare AJAX.

- **ajax()**: invia richieste HTTP asincrone al server
- **get()**: manda una richiesta GET in HTTP per caricare i dati dal server
- **post()**: invia una richiesta AJAX jQuery Post per trasmettere determinati dati al server
- **getJSON()**: trasmette una richiesta GET in AJAX jQuery al server e attende la risposta in formato JSON
- **getScript()**: manda una richiesta GET in HTTP per ottenere un file JavaScript da un server ed eseguirlo
- **load()**: invia una richiesta HTTP per caricare l’HTML o il testo dal server e collegarlo a elementi del DOM

Consiglio Con l’[API di IONOS](https://developer.hosting.ionos.it/ "Portale API per sviluppatori di IONOS") puoi gestire i tuoi prodotti Hosting di IONOS in modo pratico e sicuro. L’API di IONOS è a tua disposizione con gli appositi dati di accesso. La documentazione dettagliata si trova sulla pagina informativa dell’[API per sviluppatori di IONOS](https://developer.hosting.ionos.it/docs "Documentazione dell’API per sviluppatori di IONOS").

## Esempio di applicazione dei metodi jQuery.ajax()

È possibile combinare jQuery.ajax() anche con le classiche **funzioni jQuery**, come [jQuery.click()](https://www.ionos.it/digitalguide/siti-web/programmazione-del-sito-web/jquery-click/), [jQuery.append()](https://www.ionos.it/digitalguide/siti-web/programmazione-del-sito-web/jquery-append/) e [jQuery.each()](https://www.ionos.it/digitalguide/siti-web/programmazione-del-sito-web/jquery-each/).

Nelle parti seguenti, l’esempio ricava il testo “Questo è un esempio di AJAX jQuery” dall’URL */jquery/getdata*, assegnato come primo argomento al metodo jQuery.ajax(). Come secondo parametro utilizziamo una \**funzione callback* che elabora la risposta del server e inserisce i dati all’interno del tag `p` nel DOM. Il metodo .ajax() trasmette per impostazione predefinita una richiesta GET al server interessato. L’invio della richiesta AJAX in jQuery è attivato da un evento clic sul pulsante “btn”. Il testo viene quindi visualizzato nel browser.

```html

                
<html>
<head>
     <meta name="viewport" content="width=device-width" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">
     </script>
     <script type="text/javascript">
      $(document).ready(function () {
     $('#btn').click(function(){
          $.ajax('/jquery/getdata',    // request url
                {
                success: function (data, status, xhr) {     // success callback function
                                     $('p').append(data);
                }
          });
          });
      });
     </script>
</head>
<body>
     <input type="button" id="btn" value="Invia richiesta AJAX jQuery" />
     <p></p>
<div class="hash d-none" hidden>hash_6b328c75ea8051f41f47cb1178d284614259208c</div><script data-shy-copy-guard>(function(){var C=[0x00AD,0x200B,0x200C,0x200D,0x2060,0xFEFF];var s=function(t){for(var i=0;i<C.length;i++){t=t.split(String.fromCharCode(C[i])).join("");}return t;};document.addEventListener("copy",function(e){var sel=document.getSelection();if(!sel||sel.isCollapsed||!e.clipboardData){return;}e.clipboardData.setData("text/plain",s(sel.toString()));try{var d=document.createElement("div");d.appendChild(sel.getRangeAt(0).cloneContents());e.clipboardData.setData("text/html",s(d.innerHTML));}catch(x){}e.preventDefault();});})();</script></body>
</html>
```

Il risultato che otteniamo è il seguente:

```text
Questo è un esempio di AJAX jQuery
```

Consiglio Con [Deploy Now](https://www.ionos.it/hosting/deploy-now "Deploy Now di IONOS") di IONOS puoi effettuare il deployment di siti web statici e applicazioni a pagina singola direttamente tramite GitHub. Collega con facilità Deploy Now al tuo repository e trasmetti le modifiche con il comando push. La piattaforma è in grado di riconoscere automaticamente una gran varietà di framework e si configura adeguandosi alla tua build. Ottimizza il tuo flusso di lavoro e iscriviti a Deploy Now!


This is a markdown version of: [https://www.ionos.it/digitalguide/siti-web/programmazione-del-sito-web/ajax-jquery/](https://www.ionos.it/digitalguide/siti-web/programmazione-del-sito-web/ajax-jquery/) for AI/LLM consumption.