Introduzione AJAX
AJAX è il sogno di uno sviluppatore, perché puoi:
- Aggiorna una pagina web senza ricaricare la pagina
- Richiedi dati da un server - dopo che la pagina è stata caricata
- Ricevi dati da un server - dopo che la pagina è stata caricata
- Invia dati a un server - in background
Provalo tu stesso Esempi in ogni capitolo
In ogni capitolo è possibile modificare gli esempi online e fare clic su un pulsante per visualizzare il risultato.
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();
}
Il file "ajax_info.txt" utilizzato nell'esempio sopra, è un semplice file di testo e si presenta così:
<h1>AJAX</h1>
<p>AJAX is not a programming language.</p>
<p>AJAX is a
technique for accessing web servers from a web page.</p>
<p>AJAX stands for
Asynchronous JavaScript And XML.</p>
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