Cos'è l'AJAX?
AJAX è il sogno di uno sviluppatore, perché puoi:
- Leggi i dati da un server web - dopo che una pagina web è stata caricata
- Aggiorna una pagina web senza ricaricare la pagina
- Invia i dati a un server web - in background
Esempio AJAX
Let AJAX change this text
Esempio AJAX spiegato
Pagina HTML
<!DOCTYPE html>
<html>
<body>
<div id="demo">
<h2>Let AJAX change this text</h2>
<button type="button" onclick="loadDoc()">Change Content</button>
</div>
</body>
</html>
La pagina HTML contiene una sezione <div> e un <pulsante>.
La sezione <div> viene utilizzata per visualizzare le informazioni da un server.
Il <pulsante> chiama una funzione (se viene cliccato).
La funzione richiede dati da un web server e li visualizza:
funzione loadDoc()
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML = this.responseText;
}
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
}
Cos'è l'AJAX?
AJAX = J avaScript sincrono e X ML .
AJAX non è un linguaggio di programmazione.
AJAX usa solo una combinazione di:
- Un oggetto XMLHttpRequest integrato nel browser (per richiedere dati da un server Web)
- JavaScript e HTML DOM (per visualizzare o utilizzare i dati)
AJAX è un nome fuorviante. Le applicazioni AJAX potrebbero utilizzare XML per trasportare i dati, ma è altrettanto comune trasportare i dati come testo normale o testo JSON.
AJAX consente di aggiornare le pagine Web in modo asincrono scambiando dati con un server Web dietro le quinte. Ciò significa che è possibile aggiornare parti di una pagina web, senza ricaricare l'intera pagina.
Come funziona AJAX
- 1. Si verifica un evento in una pagina web (la pagina viene caricata, viene cliccato un pulsante)
- 2. Un oggetto XMLHttpRequest viene creato da JavaScript
- 3. L'oggetto XMLHttpRequest invia una richiesta a un server web
- 4. Il server elabora la richiesta
- 5. Il server invia una risposta alla pagina web
- 6. La risposta viene letta da JavaScript
- 7. L'azione corretta (come l'aggiornamento della pagina) viene eseguita da JavaScript
Tutorial AJAX completo
Questa è stata una breve descrizione di AJAX.
Per un tutorial AJAX completo, vai a W3Schools AJAX Tutorial .
Per ulteriori esempi AJAX, vai a Esempi AJAX di W3Schools .