Operazioni AJAX
Operazioni AJAX
Operazioni AJAX è una lezione jQuery Academy gratuita su CoddyKit. Questa è la lezione 1 di 1. 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 1 lezioni in totale.
Introduzione
Salve,
In questa lezione impareremo a interagire con il server remoto utilizzando i metodi AJAX di jQuery.
AJAX (Asynchronous Javascript And XML) è una tecnologia che consente di trasferire dati al server in modo asincrono, senza aggiornare la pagina web.
L'esperienza dell'utente ne risulta migliorata, soprattutto perché i dati possono essere trasferiti senza aggiornare la pagina.
Esempio di AJAX
In particolare, le applicazioni web più popolari al mondo, come Facebook, Gmail e Youtube, utilizzano frequentemente la tecnologia AJAX.
In realtà, invece di considerare AJAX una nuova tecnologia, può pensarlo come un metodo che consente il trasferimento asincrono dei dati tra server e client utilizzando Javascript.
Bene, vediamo un esempio di funzione che utilizza AJAX.
Ad esempio, sta guardando un video su youtube.com e fa clic sul pulsante Mi piace. In questo caso, il nostro evento Mi piace viene trasmesso ai server di youtube in background prima che la pagina di youtube venga aggiornata.
Questo è un processo che avviene tramite una richiesta AJAX.
Esempio di AJAX
Facciamo un esempio di richieste AJAX.
Di seguito è riportato il codice di una richiesta GET realizzata con AJAX a https://api.coddykit.com/api/coddy-test
È realizzata con JavaScript puro e la sintassi è un po' complessa, come può vedere.
<div id="result"></div>
<script>
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4
&& this.status == 200) {
//we are writing the AJAX request response
//to div element that has result id
var result = document.getElementById('result');
result.innerHTML = JSON.stringify(this.responseText);
}
};
xhttp.open("GET", "https://api.coddykit.com/api/coddy-test", true);
xhttp.send();
</script>Avvertenza
Come abbiamo detto in precedenza, jQuery è una libreria per la modifica del DOM che fornisce anche metodi per semplificare le operazioni AJAX.
Metodo AJAX
jQuery mette a disposizione un metodo piuttosto semplice per gestire le richieste AJAX.
Con il metodo ajax() possiamo utilizzare facilmente metodi HTTP comunemente impiegati nel mondo del Web, come get, post o put.
La sintassi del metodo Ajax è la seguente.
$.ajax ({
url: 'remote URL'.
data: 'Data that we will send',
method: 'HTTP Method - Default GET',
success: 'Here, we should define function that work when Ajax get success result',
dataType: 'Interaction data type'
});
Facciamo un esempio
<div id="result"></div>
<script>
$.ajax ({
url: 'https://api.coddykit.com/api/coddy-test',
success: function(data){
$('#result').text(JSON.stringify(data));
}
});
</script>Esempio AJAX
Richiesta Ajax get
Ora miglioriamo il nostro esempio.
Nell'esempio seguente è stata inviata una richiesta ajax all'URL (https://api.coddykit.com/api/coddy-test)
Se non viene definito alcun metodo HTTP, per impostazione predefinita viene effettuata una richiesta GET.
const https = require('https');
function ajax(url) {
const callbacks = { success: [], fail: [], always: [] };
const req = https.get(url, (res) => {
let data = '';
res.on('data', chunk => data += chunk);
res.on('end', () => {
callbacks.success.forEach(cb => cb(data));
callbacks.always.forEach(cb => cb());
});
});
req.on('error', (err) => {
callbacks.fail.forEach(cb => cb(err));
callbacks.always.forEach(cb => cb());
});
return {
done: function(cb) { callbacks.success.push(cb); return this; },
fail: function(cb) { callbacks.fail.push(cb); return this; },
always: function(cb) { callbacks.always.push(cb); return this; }
};
}
var ajaxReq = ajax("https://api.coddykit.com/api/coddy-test")
.done(function() {
//success callback
/*
If our get request is sent to
the server with success (HTTP 2xx),
this function is called.
*/
})
.fail(function() {
/* This function works
if the AJAX request fails.
*/
})
.always(function() {
/*
This function works in all cases when
the AJAX request is
successful or unsuccessful.
*/
});metodo get
Metodo $.get() e richiesta GET
Possiamo utilizzare il metodo $.get() per inviare una richiesta HTTP get ai nostri server.
Questo metodo è fornito da jQuery e consente di inviare una richiesta GET scrivendo un codice più conciso e semplice rispetto a JavaScript puro.
Facciamo un esempio e notiamo quanto sia più breve il codice.
<div id="result"></div>
<script>
$.get("https://api.coddykit.com/api/coddy-test",
function(response) {
$('#result').text(JSON.stringify(response));
})
</script>Metodo Post
metodo $.post() e richiesta Post
Possiamo utilizzare il metodo $.post() per inviare una richiesta HTTP Post ai nostri server.
Facciamo un esempio e osserviamo quanto è più breve il codice.
Utilizzeremo frequentemente le richieste post, soprattutto quando invieremo moduli web al server.
<div id="result"></div>
<script>
$.post("https://api.coddykit.com/api/coddy-test",
//Please note that we can send data in body while we sending Post Request
{name:'Coddy', age: 3},
function(response) {
$('#result').text(JSON.stringify(response));
})
</script>Metodo Put
Richiesta Put
Possiamo utilizzare il metodo $.put() per inviare una richiesta HTTP Put ai nostri server.
Facciamo un esempio.
<div id="result"></div>
<script>
$.ajax({
method:'PUT',
url:"https://api.coddykit.com/api/coddy-test",
//Please note that we can send data in body while we sending Put Request
data: {name:'Coddy', age: 3},
success: function(response) {
$('#result').text(JSON.stringify(response));
}})
</script>Metodo Delete
Richiesta Delete
Possiamo utilizzare il metodo $.delete() per inviare una richiesta HTTP Delete ai nostri server.
Facciamo un esempio
<div id="result"></div>
<script>
$.ajax({
method:'DELETE',
url:"https://api.coddykit.com/api/coddy-test",
success: function(response) {
$('#result').text(JSON.stringify(response));
}})
</script>Link
Può trovare esempi e informazioni dettagliate sui metodi AJAX nel link seguente.
Congratulazioni
Congratulazioni 🎉
In questa sezione abbiamo imparato AJAX con jQuery
Grazie per aver partecipato al corso jQuery per principianti 🎉🎉🎉
Ora può sostenere l'esame e ottenere un certificato per il corso Tutorial di jQuery per principianti 🚀🚀🚀
Domande Frequenti
La lezione «Operazioni AJAX» è gratuita?
Sì — il testo completo di «Operazioni 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 1 lezioni in totale.
Cosa imparerò in «Operazioni AJAX»?
Operazioni AJAX 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 1.
Quanto tempo richiede la lezione «Operazioni 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.