Introduzione a AJAX

AJAX è il sogno dei programmatori, 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 tu 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 JavaScript 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 (visualizzare o utilizzare 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 consente di aggiornare asincronamente la pagina web scambiando dati con il server Web dietro la scena. Questo significa che è possibile aggiornare solo parte della pagina senza dover ricaricare l'intera pagina.

Come funziona AJAX

AJAX
  1. Si verifica un evento nella pagina web (caricamento della pagina, clic su pulsante)
  2. Crea l'oggetto XMLHttpRequest con 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. Leggi la risposta con JavaScript
  7. Esegui l'azione corretta con JavaScript (ad esempio, aggiornare la pagina)