Come funziona AJAX con JavaScript.

Come eseguire una semplice richiesta AJAX in JavaScript. Il codice è dettagliatamente commentato.

<script type = "text/javascript">
  // Dichiaro la variabile che conterrà l'oggetto XMLHttpRequest
  var http_request = false;
  // Il browser supporta l'oggetto XMLHttpRequest (è possibile istanziarlo?)
  if (window.XMLHttpRequest) {
    // Se lo supporta allora lo creo.
    // I browser che supportano l'oggetto sono:
    // Internet Explorer 7, Mozilla, Safari, ecc ... [I più recenti]
    http_request = new XMLHttpRequest();
    // Specifico che la chiamata dell'oggetto XMLHttpRequest andrà a
    // richiamare una semplice pagina di testo ('text/html')
    if (http_request.overrideMimeType) {
      http_request.overrideMimeType('text/html');
    }
    // Se il browser non supporta l'oggetto XMLHttpRequest, vedo se posso
    // almeno usare gli ActiveX.
  } else if (window.ActiveXObject) {
    // Per Internet Explorer 6 e versioni precedenti
    try {
      // Provo a vedere se posso creare l'oggetto Msxml2.XMLHTTP
      http_request = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
      try {
        // Se non sono riuscito a creare l'oggetto Msxml2.XMLHTTP
        // provo allora a creare l'oggetto Microsoft.XMLHTTP
        http_request = new ActiveXObject("Microsoft.XMLHTTP");
      } catch (e) {
        // Niente da fare, non posso proprio sfruttare AJAX :-(
        }
    }
  }


// Se sono riuscito a creare un'oggetto in grado di eseguire una HTTP request
// (che sia un XMLHttpRequest, un Msxml2.XMLHTTP o un Microsoft.XMLHTTP)
if (http_request) {
  // Gli dico che HANDLER è la funzione che dovrà chiamare quando avrà
  // ottenuto i dati dalla HTTP request
  http_request.onreadystatechange = HANDLER;
  // Gli dico che deve caricare la pagina "PAGINA_DA_CHIAMARE.ASP/PHP/HTML/XXX"
  // Che a questa pagina i dati arriveranno con una GET
  // (si può specificare anche POST)
  // Che la chiamata è asincrona (true), da lasciare sempre su true, altrimenti
  // il browser risulterà bloccato finchè la funzione HANDLER non avrà terminato
  http_request.open('GET', "PAGINA_DA_CHIAMARE.ASP/PHP/HTML/XXX", true);
  // Lancio la richiesta con eventuali parametri (es.: "varx=1&vary=2&varz=3")
  // Se non ho parametri lascio null
  http_request.send(null);
}


// La funzione che viene richiamata quando l'HTTP request è completata
function HANDLER() {
  // Valori che può assumere il readyState:
  // 0 --> Uninitialized: Oggetto creato ma non inizializzato
  // 1 --> Open: Il metodo "OPEN" è stato eseguito ma non ho
  //       ancora effettuato la "SEND"
  // 2 --> Sent: Ho chiamato il metodo "SEND" e sto aspettando una risposta
  // 3 --> Receiving: I dati in risposta cominciano ad essere letti
  // 4 --> Loaded: L'operazione è stata completata
  // Quindi... Se l'operazione è stata completata...
  if (http_request.readyState == 4) {
    // Per farsi una "cultura" sugli status-code HTTP:
    // http://www.w3.org/Protocols/HTTP/HTRESP.html
    // E se la richiesta è andata a buon fine...
    if (http_request.status == 200) {
      // Posso ottenere il risultato della richiesta con il metodo
      // responseText
      alert(http_request.responseText);
    }
  }
}


// FATTO!!! This is ajax :-)
</script>