castello di colle
formazione

Umbriaway Consulting e le risposte di Ajax

castello di colleIn questa sessione di allenamento Umbriaway Consulting prenderà in considerazione le proprietà responseText e responseXML. Abbiamo visto come le richieste asincrone vengono inoltrate ma come risponde il server? In che modo le informazioni vengono masticate digerite e restituite al client? Sono due le proprietà coinvolte in quest processo responseText e responseXML entrambe apparteneneti all’ oggetto XMLHTTPRequest. Vediamo quindi in dettaglio responseText e responseXML. E’ bene subito ricordare che quando il completamento di stato nella proprietà readystatechange passa da 0 a 4 entrambe le proprietà sopra menzionate sono pronte e operative per restituire i dati. Ma come possiamo accedere a queste due proprietà per restituire i dati? La proprietà responseText cerca di rappresentare le informazioni restituite dal server come stringa di testo. Ovviamente se la chiamata XMLHTTPRequest riporta un errore o non é ancora stata inviata, responseText avrà un valore null.

Si osservi nuovamente la funzione di callback prototipo:

function responseAjax() {
if(myRequest.readyState ==4) {
if (myRequest.status ==200) {
dichiarazioni
} else {
invia messaggio errore per qualsiasi altra risposta HTTP
alert(“errore: ” +myRequest.statusText);
}
}
}

A questo punto aggiungiamo una dichiarazione di programma all’ IF:

function responseAjax() {
if(myRequest.readyState ==4) {
if (myRequest.status ==200) {
alert(“Il server dice: ” +myRequest.responseText);
} else {
invia messaggio errore per qualsiasi altra risposta HTTP
alert(“errore: ” +myRequest.statusText);
}
}
}

in questo semplice esempio lo script apre una finestra di avvertimento per visualizzare il testo restituito dal server. La riga

alert(“Il server dice: ” +myRequest.responseText);

prende il testo restituito dalla routine lato server e la allega alla stringa il server dice prima di presentarla in una finestra di avvertimento JS. Si osservi questo esempio che usa un semplice script PHP lato server

<?php echo “hello Ajax caller!”;?>

Una chiamata XMLHTTPRequest eseguita con successo a questo file produce la proprietà responseText contenente la stringa Hello Ajax caller!; inoltre la funzione di callback genera la finestra di dialogo. La proprietà responseText é di sola lettura, quindi non é possibile manipolare il suo valore prima che venga copiato in un’altra variabile. Poiché la proprietà responseText contiene una semplice stringa di testo é possibile modificarla utilizzando uno qualsiasi dei metodi JS per le stringhe. Alcuni metodi disponibili sono charAT (numero) che seleziona il singolo carattere all’ interno della stringa nella posizione specificata). IndexOf (sottostringa) che trova la posizione in cui inizia la sotto stringa specificata; lastIndexOf(sottostringa) che trova l’ultima occorrenza della sotto stringa all’ interno della stringa, substring (inizio, fine) ottiene la parte della stringa specificata; toLowerCase() converte la stringa in carateri minuscoli, toUpperCase() converte la stringa in lettere maiuscole.

Adesso prenderemo in esame la proprietà responseXML. Si supponga ora di disporre del seguente script PHP:

<?php
header(‘Content-Type: text/xml’);
echo “<? xml version=\”1.0\” ?> <greeting>
Hello Ajax caller!</greeting>”;
?>

sebbene sia uno script molto breve vediamolo dettagliatamente. La prima riga aggiunge un header HTTP ai dati restituiti.Prima di inviare una istruzione header () occorre assicurarsi che lo script PHP non visualizzi niente, neanche spazi vuoti e ritorni a capo, diversamente si verificherà un errore.

L’header restituito é la coppia parametro/valore

Content-Type: text/xml

che annuncia che l’oggetto XMLHTTPRequest si aspetta che i dati provenienti dal server verranno formattati come XML. La riga successiva é una dichiarazione che stampa a video questo semplice ma completo documento XML:

<?xml version=”1.0″ ?>
<greeting>
Hello Ajax caller!
</greeting>

da notare che é necessario aggiungere il carattere di escape \ alle virgolette presenti in una stringa racchiusa tra virgolette per assicurare che il significato della dichiarazione non sia ambiguo. Questa operazione viene eseguita appunto con la barra rovesciata, di conseguenza il comando PHP:

echo “<img src=\”picture.gif\”>”;

produce come output:

<img src=”picture.gif”>

Quando la chiamata al server é stata completata, il documento XML viene caricato nella proprietà responseXML dell’oggetto XMLHTTPRequest. A questo punto é possibile accedere al documento XML attraverso i metodi e le proprietà del DOM di JavaScript.

Una ottima proprietà nel DOM di JavaScript é getElementsByTagName(). che crea un array JS di tutti gli elementi con un particolare nome di TAG.E’ quindi possibile accedere agli elementi di questi array attraverso le normali dichiarazioni JS:

var myElements = object.getElementsByTagName(‘greeting’);

questa riga crea l’array myElements e inserisce al suo interno tutti gli elementi il cui nome di tag é greeting. Come per qualsiasi altro array é possibile scoprire la lunghezza dell’ armadio, il numero di elementi con il numero di tag dichiarato utilizzando la proprietà lenght.

myElements.length

Se lo si desidera é possibile accedere individualmente a un particolare elemento; il primo elemento il cui nome di tag é greeting é accessibile come myElements[0], il secondo se esiste come myElements[1] etc. E’ importante notare che la proprietà responseXML non contiene solo una stringa che forma una rappresentazione di testo nel documento XML, come nel caso della proprietà response.text. Per contro tutti i dati e la struttura gerarchica del documento XML vengono memorizzati come oggetto compatibile con il DOM. Analizzeremo ora uno script che genera un alert di avvertimento utilizzando il getRlementsByTagName().

function responseAjax() {
if(myRequest.readyState==4) {
if(myRequest.status==200) {
var greetNode = http.responseXML
get ElementsByTagName(“greeting”)[0];
var greetText = greetNode.childnodes[0];
nodeValue;
alert(“Greeting text: ” + greetText);
} else {
alert(“An error has occured: ” + myRequest.statusText);
}
}
}

Dopo le solite verifiche sulle proprietà readyState e status il codice localizza l’elemento richiesto da responseXML utilizzando il metodo getElementsByTagName() e poi utilizza childNodes[0].nodeValue per estrarne il contenuto di testo da questo elemento, visualizzando infine il testo restituito in una finestra di alert o di avvertimento JS. E’ anche possibile entrare direttamente nei singoli elementi dell’ array scrivendo l’istruzione:

var theElement = object.getElementsByTagName(‘greeting’)[0];

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...