AJAX di jQuery: come funziona la trasmissione asincrona dei dati
La redazione di IONOS3 mins
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.
Uno spazio web 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 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
Con l’API 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.
Esempio di applicazione dei metodi jQuery.ajax()
È possibile combinare jQuery.ajax() anche con le classiche funzioni jQuery, come jQuery.click(), jQuery.append() e 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.
<!DOCTYPE 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>
</body>
</html>Il risultato che otteniamo è il seguente:
Questo è un esempio di AJAX jQueryCon Deploy Now 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!
