Introduzione di myAHAHlib.js

formazione informatica Umbria

Consideriamo con formazione informatica Umbria il seguente listato:

function callAHAH(url, pageElement, callMessage) {
document.getElementById(pageElement) . innerHTML = callMessage;
try {
req = new XMLHTTPRequest(); /*es Firefox */
} catch (e) {
try
req= new ActiveXObject(“Msxml2.XMLHTTP”); /*es IE any version*/
} catch (E) {
req = false;
}
}
}
req.onreadystatechange = function() {responseAHAH(pageElement);};
req.open(“GET”,url,true);
req.send(null);
}

function responseAHAH(pageElement) {
var output = ”;
if (req.readyState ==4) {
if (req.status == 200) {
output = req.responseText;
document.getElementById(pageElement).innerHTML = output;
}
}
}

la funzione callAHAH() incapsula le operazioni per la creazione di una istanza dell’ oggetto XMLHTTPRequest, per la dichiarazione della funzione di callback e per l’invio della richiesta. Si noti che invece di dichiarare semplicemente

req.onreadystatechange = responseAHAH;

é stato utilizzato il costrutto JS
req.onreadystatechange = function() {responseAHAH(pageElement);};

questo tipo di dichiarazione consente di passare un argomento alla funzione dichiarata, in questo caso identificando l’elemento di pagina da aggiornare. callAHAH() accetta anche un ulteriore argomento, callMessage, che contiene una stringa per la definizione del contenuto che deve essere visualizzato nell’ elemento di destinazione mentre si attende il risultato della richiesta al server. In questo modo si offre all’ utente un certo grado di feedback, avvertendolo che qualche cosa sta accadendo nella pagina. In pratica questo avviso potrebbe essere una riga di testo personalizzata:

‘aggiornamento pagina attendere prego’

Tuttavia ancora una volta si può decidere di inserire nella stringa il codice HTML. Utilizzando una GIF animata all’ interno di un elemento IMG si offre un modo efficace per avvertire l’utente che é in corso un processo. La funzione di callback responseAHAH() esegue l’operazione specifica di applicazione della stringa restituita nella proprietà responseText alla proprietà innerHTML dell’ elemento di pagina pageElement selezionato:

output = req.responseText;
document.getElementById(pageElement).innerHTML = output;

questo codice é stato inserito in un file chiamato myAHAHlib.js che può essere chiamato da una pagina HTML, rendendo così le funzioni disponibili all’ applicazione AHAH. Adesso vediamo come usare questa libreria con Formazione Informatica Umbria.

Con Umbriaway Consulting vedremo ora come usare la nostra libreria per richiamare e gestire risposte testo. Il file precedente ora può essere inserito in uno script all’ interno della pagina HTML:

<SCRIPT language=”JavaScript” SRC=”myAHAHlib.js”></SCRIPT>

Si avrà quindi la libertà di chiamare le funzioni all’ interno dello script ogni volta che lo si desidera. Quello che segue é il codice sorgente di base di una pagina HTML:

<HTML>
<head><title>Ajax application</title>
<SCRIPT language=”JavaScript” SRC=”myAHAHlib.js”></SCRIPT>
</head>
<body>
<form>
<input type=”button” onClick=”callAHAH(‘serverscript.php?parameter=x’, ‘displaydiv’, ‘pagina in aggiornamento’)”>
Qui ci sarà la response parziale:<br>
<div id=”displaydiv”></div>
</form>
</body>
</html>

In questa semplice pagina HTMl viene utilizzato un elemento pulsante per creare l’evento che produce la chiamata del metodo callAHAH che inserisce la stringa di testo per l’attiso segnalazione processo ‘pagina in aggiornamento’ nell’ elemento <div> che possiede id displaydiv e invia la chiamata asincrona al server all’ URL serverscript.php?parameter=x. Quando responseAHAH() rileva che il server ha completato la risposta, il contenuto dell’ elemento <div> viene aggiornato utilizzando il valore memorizzato in responseText; invece di mostrare il messaggio “pagina in aggiornamento” oraq il DIV visualizza il testo restituito dal server. Ajax ricorda Formazione Informatica Umbria non é una tecnologia ma solo un modo performante di valorizzare standard già esistenti.

image_print

Be the first to comment

Leave a Reply