Guida su Ajax . Lezione 2 XMLHttpRequest

La peculiarità di una pagina Ajax è il fatto che questa si aggiorna senza la necessità di essere ricaricata, o al contrario che un evento generato dall’utente (come ad esempio la pressione di un tasto) causi una operazione sul server, in parole molto povere con Ajax non abbiamo la necessità di utilizzare il Form di Html..Infatti con questa nuova tecnologia è Javascript che può contattare il server spedendo e ricevendo informazioni senza che la pagina venga ricaricata.

L’oggetto Ajax XMLHttpRequest

Adesso vedremo come fa nello specifico, ossia introduciamo l’oggetto XMLHttpRequest, relativamente nuovo dovrebbe risalire al 2006 e che ormai ogni browser moderno dovrebbe avere acquisito, tutti tranne Internet Explorer che al momento in cui stiamo scrivendo questa guida ancora non ne dispone ma si sta attrizzando. Niente paura Ajax cmq funziona anche con IE basta aggiungere un po’ di codice in piu’ vedremo come fare dopo. Per il momento facciamo finta che anche IE Fz con Ajax senza probemi.

Per fare questo esempio dovremmo ovviamente utilizzare anche una tecnologia server, ed utilizzeremo la piu’ semplice in assoluto , anche perche’ come si dice in questi casi il PHP lo conosce anche mia Nonna che è esperta di tecniche di Maglia e Cucito.

function CreateXmlHttpReq(handler)
 {    
var xmlhttp = null;    
xmlhttp = new XMLHttpRequest();    
xmlhttp.onreadystatechange = handler;    
return xmlhttp;  
}

l’abbiamo cioè come si dice in gergo inizializzata, ma spieghiamo un attimo cosa di fatto abbiamo fatto

La funzione CreateXmlHttpReq prende in ingresso un solo argomento, una funzione, questa verrà attivata solamente quando ci sarà la richiesta. . Detto piu’ in soldoni , Javascript è un linguaggio che per l’input/output utilizza un modello basato sugli eventi. Appena l’evento si verifica Javscript entra in azione chiamando l’handler (ovvero una funzione che gestisce l’evento) apposito. Viene effettuata la richiesta all’HTTP e si rimane in attesa che ci siano novità, vi chiederete come? Beh di fatto tramite XmlHttpRequest che ha in se’ una funzione che ci avvisa quando l’oggetto che è stato mandato è cambiato, ossia per noi vuol dire che è stato elaborata una risposta.

Vediamo adesso come associargli una determinata pagina per il rientro.

var myRequest = CreateXmlHttpReq(myHandler); 
myRequest.open("GET","primo.php");  
myRequest.send(null);  

Come potete facilmente immaginare questo script non fa altro che caricare il nostro handler e spedire una richiesta http con destinazione server, il file che intendiamo raggiungere si chiamerà primo.php, e vogliamo spedire con il metodo GET le eventuali variabili ma che vediamo al passo successivo in questo caso non mandiamo. A questo punto la richiesta parte e verrà gestita dalla funzione myhandler

function myHandler()
 {      if (myRequest.readyState == 4 && myRequest.status == 200) 
{          alert(myRequest.responseText);      }  }

Come vedete facciamo il controllo quando la nostra variabile viene caricato il valore 4 in quanto è l’unico che a noi interessa, ma è possibile che tale variabile assuma i seguenti valori

• 0: uninitialized
• 1: loading
• 2: loaded
• 3: interactive
• 4: complete

Che sono di facile comprensione

• 0 quando la variabile myhandler non è stata inzializzata
• 1 quando sta caricando il valore o i valori nel server
• 2 quando li ha finiti di caricare
• 3 quando sta completando la risposta
• 4 quando l’ha completata

Quando il valore è 4 e l’HTTP assume il valore 200 ossia completato con risposta, ricorderete il codice 401 era non trovato, oppure il 403 risposta proibita etc. etc.

Mentre un esempio di file php presente sul server potrebbe essere

<?  echo("Questi dati vengono dal PHP");  ?>

e questo potrebbe essere un esempio al completo…

var myRequest = null;

function CreateXmlHttpReq(handler) {
var xmlhttp = null;
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = handler;
return xmlhttp;
}

function myHandler() {
if (myRequest.readyState == 4 && myRequest.status == 200) {
alert(myRequest.responseText);
}
}

function esempio3() {
myRequest = CreateXmlHttpReq(myHandler);
myRequest.open("GET","primo.php");
myRequest.send(null);
}
</script>
<input type="button" value="Clicca per lanciare la richiesta" onClick="esempio3()" />

del codice html, vi avevamo gia’ fatto notare che questo cmq non potrebbe funzionare in caso di vecchie versione di Internet Explorer per i quali bisogna ricorrere ai seguenti accorgimenti.

var myRequest = null;

function CreateXmlHttpReq(handler) {
var xmlhttp = null;
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = handler;
return xmlhttp;
}

function myHandler() {
if (myRequest.readyState == 4 && myRequest.status == 200) {
alert(myRequest.responseText);
}
}

function esempio3() {
myRequest = CreateXmlHttpReq(myHandler);
myRequest.open("GET","primo.php");
myRequest.send(null);
}
</script>
<input type="button" value="Clicca per lanciare la richiesta" onClick="esempio3()" />

per la verità ci sarebbe da tenere presente anche un altro aspetto, diciamo un altro problema ma per non entrare troppo nel tecnichese ve lo evitiamo.