formazione

Umbriaway Formazione e Ajax la sfida continua

ajax_callbackPer monitorare lo stato del server, ricorda Umbriaway Consulting, abbiamo esaminato una proprietà importante che é readystatechange che può avere cinque valori diversi. Il nostro obiettivo é conoscere i progressi della richiesta Ajax in corso. Per conoscere lo stato della richiesta inoltrata abbiamo diversi valori: con zero il server ci risponde che il tutto non é stato inizializzato, con 1 sappiamo che la richiesta é in caricamento, con due la richiesta é stata caricata, con tre vi é una interattività di fondo con 4 il processo viene cosnsiderato completato. Gli stati di avanzamento va da se che partono da zero e vanno avanti quando lo stato diventa tre significa che mi viene indicato che l’oggetto é sufficientemente progredito da consentirmi di interagire anche se il processo non é stato completato con lo stato successivo, il quattro. Gli stati possono anche essere saltati a seconda degli oggetti e del caricamento, in ogni caso il quattro sta indicare che l’oggetto XMLHTTPrequest é pronto per l’utilizzo. Per controllare lo stato di avanzamento esiste anche il codice di stato della risposta del server il famoso 200 e lo vedremo in seguito. In uno dei tanti portali di Umbriaway Consulting abbiamo visto la funzione di callback responseAjax() che ora andremo a costruire in dettaglio. Quando viene aggiornato lo stato di avanzamento readystatechange viene chiamatra questa funzione, in ogni caso la richiesta é da considerarsi completamente completata quando il tutto arriva a 4. Questo in genere viene gestito con una istruzione condizionale IF

function responseAjax () {
//mi interessa solo il 4 di readystate per lo stato completato
if (myRequest.readyState ==4) {
dichiarazioni esecuzione programma
}
}

a questo punto mi interessa controllare e gestire anche lo stato 200 in corrispondenza dello stato 4 usando la proprietà status di XMLTHHTPRequest e statusText che contiene la reason phrase.

function responseAjax () {
if (myRequest.readyState ==4) {
//se la risposta del server é OK
if(myRequest.status==200){
dichiarazioni
} else {
//invia un msg di errore per altre risposte HTTP
alert (“un errore si é verificato: ” + myRequest.statusText);
}
}
}

Questo codice introduce nella dichiarazione if una clausola else qualsiasi altra risposta diversa dal 200 del server provoca l’esecuzione dei contenuti di questa clausola else, aprendo il testo di avvertimento contenente il testo della reason phrase restituita dal server.

Come é possibile quindi chiamare la funzione callAjax() dalla pagina HTML? Ecco un esempio. Di seguito é riportato il codice per un modulo semplificato in una pagina HTML:

<form name=”form1″>
Name:<input type=’text’ name=’myname’><br>
Tel: <input type=’text’ name=’telno’><br>
<input type=’submit’>
</form>

La funzione verrà lanciata attraverso l’impiego del gestore di eventi onBlur di un campo per l’inserimento del testo in un modulo:

<form name=”form1″>
Name:<input type=’text’ name=’myname’ onBlur=’callAjax()’><br>
Tel: <input type=’text’ name=’telno’><br>
<input type=’submit’>
</form>

Il gestore di eventi onBlur viene attivato quando l’utente esce dal campo in questione. In questo caso quando l’utente lascia il campo la funzione callAjax() verrà eseguita creando una istanza dell’ oggetto XMLHTTPRequest e producendo una richiesta asincrona al server per

myserverscript.php?surname=Smith

Possiamo performare meglio questa funzione apportando una leggera modifica al codice della funzione callAjax()? Certo che si! Quindi

function callAjax() {
//dichiara una variabile per contenere alcune info da passare al server
var lastname = document.form1.myname.value;
….. ora possiamo osservare che quando l’utente esce dal campo myname del modulo, il valore che ha inserito viene passato al server attraverso la richiesta asincrona. Una simile chiamata può, per esempio, controllare un database per verificare l’esistenza della persona con quel nome e in caso di esito positivo restituire le informazioni per riempire altri campi del modulo. Il risultato sempre per quanto riguarda l’utente é che i campi restanti magicamente si riempiranno di dati prima dell’ invio e del completamento del modulo.  Qui abbiamo rimarcato quelli che sono i concetti base di Ajax ossia come XMLHTTPRequest comunica con il server, compreso l’invio di richieste asincrone, il monitoraggio dello statoi di avanzamento durante l’elaborazione del server che processa le istruzioni e l’esecuzione di una funzione di callback. In uno dei successivi approfondimenti su Ajax vedremo come vengono gestiti i dati restituiti dalla richiesta al server, la fase di RESPONSE.

Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo di WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione /  Modifica )

Google photo

Stai commentando usando il tuo account Google. Chiudi sessione /  Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione /  Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione /  Modifica )

Connessione a %s...