Introduzione a AJAX

AJAX è un sogno per gli sviluppatori, perché puoi:

  • Aggiornare la pagina web senza ricaricare la pagina
  • Richiedere dati dal server dopo il caricamento della pagina
  • Ricevere dati dal server dopo il caricamento della pagina
  • Inviare dati al server in background

Esempio AJAX

Clicca sul pulsante sottostante per far cambiare questo testo con Ajax:

Prova te stesso

Spiegazione dell'esempio AJAX

Pagina HTML

<!DOCTYPE html>
<html>
<body>
<div id="demo">
  <h2>Lascia che AJAX cambi questo testo</h2>
  <button type="button" onclick="loadDoc()">Modifica il testo</button>
</div>
</body>
</html>

Questa pagina HTML contiene un <div> e un <button>.

<div>Utilizzato per visualizzare le informazioni provenienti dal server.

<button>Chiamare la funzione (quando viene cliccato).

Questa funzione richiede dati dal server web e li visualizza:

Function 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'è AJAX?

AJAX = Asynchronous JvaScript And XML.

Ajax non è un linguaggio di programmazione.

Ajax combina semplicemente:

  • Oggetto XMLHttpRequest integrato nel browser (richiesta dati dal server web)
  • JavaScript e DOM HTML (visualizzazione o utilizzo dei dati)

Ajax è un nome ingannevole. Le applicazioni Ajax possono utilizzare XML per trasmettere dati, ma è comune trasmettere dati come testo puro o testo JSON.

Ajax permette di aggiornare asincronamente la pagina web scambiando dati con il server web dietro la scena. Questo significa che è possibile aggiornare una parte della pagina web senza dover ricaricare l'intera pagina.

Come funziona AJAX

AJAX
  1. Si verifica un evento nella pagina web (caricamento della pagina, clic sul pulsante)
  2. L'oggetto XMLHttpRequest viene creato da JavaScript
  3. L'oggetto XMLHttpRequest invia richieste al server web
  4. Il server elabora la richiesta
  5. Il server invia la risposta indietro alla pagina web
  6. Risposta letta da JavaScript
  7. Azioni corrette eseguite da JavaScript (ad esempio, aggiornamento della pagina)