AJAX

Uso di responseXML

Prof. Carlo Blundo Tecnologie di Sviluppo per il WEB 2

Pattern base req = new XMLHttpRequest(); req.onreadystatechange = requestStateHandler; req.open("GET", "somefile.php", true); req.send(""); function requestStateHandler() { if (req.readyState == 4 && req.status == 200 ) { // elabora req.responseXML.documentElement } }

Prof. Carlo Blundo Tecnologie di Sviluppo per il WEB 3

Proprietà: responseXML

 Contiene la risposta del server in formato XML.

 Questa proprietà restituisce un oggetto di tipo documento XML che può essere esaminato e manipolato usando i metodi e le proprietà associate all’intefaccia Node (W3C DOM)

Prof. Carlo Blundo Tecnologie di Sviluppo per il WEB 4

Esempio: registrazione utente   Verifichiamo che una login è già stata

assegnata   La risposta dello script php è un documento

XML tipo <?xml version="1.0" encoding="UTF-8" standalone="yes"> <response> <result> 1 </result> </response>

  Usiamo responseXML   Il documento XML è contenuto nella proprietà

documentElement dell’oggetto responseXML

Prof. Carlo Blundo Tecnologie di Sviluppo per il WEB 5

Nel documento HTML Login : <input

id="login" name="login" type="text" onfocus="resetta(this)" onblur="checkLogin(this.value)" /> <span class="hidden" id="loginCheckFailed"> Questa login &egrave; gi&agrave; in uso. Per favore, sceglierne un'altra. </span>

Prof. Carlo Blundo Tecnologie di Sviluppo per il WEB 6

Codice Javascript - 1 function checkLogin(input) {

url = 'verificaLogin.php?q=' + input; loadXMLDoc(url, 'recuperaDati'); } function loadXMLDoc(url, func) { xmlHttp = new XMLHttpRequest(); xmlHttp.onreadystatechange = func; xmlHttp.open("GET", url, true); xmlHttp.send(null); }

Funzione generica per qualsiasi applicazione AJAX

Prof. Carlo Blundo Tecnologie di Sviluppo per il WEB 7

Script verificaLogin.php <?php header(‘Content-Type: text/xml’); ?> <?xml version="1.0" encoding="UTF-8"

standalone="yes"?> <response> <result>

<?php echo loginInUso($_GET['q']) ?> </result>

</response>

Prof. Carlo Blundo Tecnologie di Sviluppo per il WEB 8

Codice Javascript - 2 function recuperaDati() { if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {

response = xmlHttp.responseXML.documentElement; result =

response.getElementsByTagName('result')[0].firstChild.data; message = document.getElementById('loginCheckFailed'); if (result == '1') message.className = 'error'; else message.className = 'hidden'; }

else alert("C'e' stato un problema accedendo ai dati XML:\n" + xmlHttp.statusText); } }

XML e AJAX Aggiungere ad ogni script PHP invocato da AJAX le seguenti righe (quelle evidenziate servono ad impedire al browser di memorizzare la risposta in cache) header('Content-Type: text/xml'); header("Cache-Control: no-cache, must-revalidate"); header("Expires: Mon, 26 Jul 1997 05:00:00 GMT"); echo '<?xml version="1.0" encoding="UTF-8"

standalone="yes"?>'; Prof. Carlo Blundo Tecnologie di Sviluppo per il WEB 9

Scelta vini

Prof. Carlo Blundo Tecnologie di Sviluppo per il WEB 10

<select name="provincia" onChange="caricaVino(this.value)"> <option value="" selected>Scegli una provincia <option value="av">Avellino <option value="bn">Benevento <option value="ce">Caserta <option value="na">Napoli <option value="sa">Salerno </select> <select id="vini" onchange="alert('Il valore passato al server: '+ this.value);" disabled > <option value="" selected>Scegli un vino</option> </select>

Prof. Carlo Blundo Tecnologie di Sviluppo per il WEB 11

<cantina> <vino> <nome>Taurasi Radici</nome> <codice>av43</codice> </vino> <vino> <nome>Greco di Tufo</nome> <codice>av55</codice> </vino> <vino> <nome>Cinque Querce Rosso</nome> <codice>av67</codice> </vino> <vino>

… <vino> <nome>Tauri'</nome> <codice>av421</codice> </vino> </cantina>

XML spedito dal server

Prof. Carlo Blundo Tecnologie di Sviluppo per il WEB 12

function caricaVino(valore) { if(valore) { var url = "selezionaProvincia.php?provincia="+valore; var xmlHttp = new XMLHttpRequest(); xmlHttp.onreadystatechange= function() { IL CODICE È NELLA

PROSSIMA SLIDE } xmlHttp.open("GET",url,true); xmlHttp.send(null); } }

Prof. Carlo Blundo Tecnologie di Sviluppo per il WEB 13

xmlHttp.onreadystatechange= function() { if(xmlHttp.readyState==4 && xmlHttp.status == 200) { var vini = document.getElementById('vini'); vini.removeAttribute("disabled"); vini.options.length = 1; var xmlDoc = xmlHttp.responseXML.documentElement; var nomeVino = xmlDoc.getElementsByTagName("nome") var codiceVino = xmlDoc.getElementsByTagName("codice") var numVini = nomeVino.length; for(var i=0; i<numVini; i++){ var vino = new Option(nomeVino[i].firstChild.data, codiceVino[i].firstChild.data, false, false); vini.add(vino); } } }

Prof. Carlo Blundo Tecnologie di Sviluppo per il WEB 14

<?php $provincia = $_GET['provincia']; header('Content-Type: text/xml'); header("Cache-Control: no-cache, must-revalidate"); header("Expires: Mon, 26 Jul 1997 05:00:00 GMT"); echo '<?xml version="1.0" encoding="UTF-8"

standalone="yes"?>'; echo '<cantina>';

//Accesso al database utilizzando $provincia //generazione documento XML

echo '</cantina>'; ?>