Introduzione AJAX
AJAX è il sogno di uno sviluppatore, perché puoi:
- Leggi i dati da un server web - dopo che la pagina è 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() {
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {
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 integrato nel browser
XMLHttpRequest(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
Browser moderni (API di recupero)
I browser moderni possono utilizzare l'API Fetch invece dell'oggetto XMLHttpRequest.
L'interfaccia API Fetch consente al browser Web di effettuare richieste HTTP ai server Web.
Se usi l'oggetto XMLHttpRequest, Fetch può fare lo stesso in un modo più semplice.