"Laboratorio: Ajax passo passo"
Iniziamo dal file con cui l'utente interagisce, index.php Al suo interno fa riferimento al file JavaScript chiamato richiestaAjax.js, e costruisce una semplice interfaccia web per il client, costituita da un testo e una casella di immissione testo:<!DOCTYPE html> <html lang="it"> <head> <title>Ajax: Principio di funzionamento</title> <script type="text/javascript" src="richiestaAjax.js"></script> </head> <body onload='processo()'> Il Server vuole conoscere il tuo nome: <input type="text" id="mioNome" /> <div id="divMessaggio"></div> </body> </html>che da luogo alla seguente interfaccia
quando la pagina carica, viene eseguita una funzione chiamata
processo()contenuta all'interno di richiestaAjax.js Questa funzione si occupa di popolare l'elemento<div id="divMessaggio"></div>con un messaggio proveniente dal server. Prima di vedere cosa avviene all'interno della funzione processo() vediamo cosa accade lato server. Sul web server abbiamo uno script chiamato rispostaPHP.php che costruisce il messaggio XML da spedire al client. Questo messaggio XML è formato da un elemento<risposta>che racchiude le informazioni che il server intende inviare al client:<?xml version="1.0" encoding="UTF-S" standalone="yes"?> <risposta> ... messaggio che il server vuole trasmettere al client ... </risposta>vediamo il file rispostaPHP.php:<?php header('Content-Type: text/xml');// Generiamo un documento XML echo '<?xml version="1.0" encoding="UTF-8" standalone="yes"?>';// Generiamo l'intestazione XML echo '<risposta>';// Creiamo l'elemento <risposta> $nome = $_GET['name'];// Recuperiamo il nome dell'utente // Generiamo l'uscita in base al nome utente ricevuto dal Client $nomeUtente = array('Giancarlo', 'Mario', 'Stefano', 'Marina', 'Carlo'); if (in_array(strtoupper($nome), $nomeUtente)) echo 'Ciao, caro amico ' . htmlentities($nome) . '!'; else if (trim($nome) == '') echo 'Signor sconosciuto, per favore dimmi il tuo nome!'; else echo htmlentities($nome) . ', io non ti conosco!'; echo '</risposta>';// Chiudiamo l'elemento <risposta> ?>Se il nome dell'utente ricevuto dal server è vuoto, il messaggio sarà: "Signor sconosciuto, per favore dimmi il tuo nome!". Se il nome è Giancarlo', 'Mario', 'Stefano', 'Marina', 'Carlo', il server risponde con: "Ciao, caro amico <nome utente>!". Se invece il nome è diverso da questi, il messaggio sarà: "<nome utente>, io non ti conosco!". Pertanto, se Paperino digita il proprio nome, il server risponderà con la seguente struttura XML:<?xml version="1.0" encoding="UTP-8" standalone="yes"?> <risposta> Paperino, io non ti conosco </risposta>Primo caso
Secondo caso
Terzo caso
PRATICA 4): Ajax passo passo
Andiamo oro ad analizzare il terzo filerichiestAjax.js, il più importante:// Memorizza il riferimento all'oggetto XMLHttpRequest var xmlHttp = new XMLHttpRequest(); // Effettua una richiesta HTTP asincrona usando l'oggetto XMLHttpRequest function processo() { // Procediamo solo se l'oggetto xmlHttp non è impegnato if (xmlHttp.readyState == 4 || xmlHttp.readyState == 0) { // Recuperiamo il nome che l'utente ha digitato nel form name = encodeURIComponent(document.getElementByIdAll'interno di questo codice,
("mioNome")
.value); // Eseguiamo la pagina rispostaPHP.php sul Server xmlHttp.open("GET", "rispostaPHP.php?name=" + name, true); // Definiamo il metodo per gestire le risposte del Server xmlHttp.onreadystatechange = handleServerResponse; // Effettuiamo la richiesta al server xmlHttp.send(null); } else // Se la connessione è impegnata riproviamo dopo un secondo setTimeout('processo()', 1000); } // Eseguita automaticamente quando viene ricevuto un messaggio dal Server function handleServerResponse() { // Procediamo solo se la transizione è completata if (xmlHttp.readyState == 4) { // Lo stato 200 indica che la transizione è completata con successo if (xmlHttp.status == 200) { // Estraiamo l'XML ricevuto dal server xmlResponse = xmlHttp.responseXML; // Otteniamo l'elemento radice dell'XML xmlDocumentElement = xmlResponse.documentElement; // Il messaggio testuale, cioè il primo figlio dell'elemento radice helloMessage = xmlDocumentElement.firstChild.data; // Aggiorniamo il client con i dati ricevuti dal Server document.getElementById("divMessaggio").innerHTML = '<i>' + helloMessage + '</i>'; // Riceviamo la sequenza setTimeout('processo()', 1000); } // Uno stato HTTP diverso da 200 indica un errore else { alert("C'è stato un problema dell'accesso al Server: " + xmlHttp.statusText); } } }xmlHttpè l'oggetto XMLHttpRequest utilizzato per invocare lo script lato serverrispostaPHP.phpdal client. La sua proprietà responseXML, estrae il documento XML recuperato. Le strutture XML sono gerarchiche, e l'elemento radice viene chiamato document element. Nel nostro caso il document element è l'elemento<risposta>, che contiene un singolo figlio: il messaggio di testo che ci interessa. Una volta che viene recuperato il messaggio di testo, esso viene visualizzato nella pagina del client usando DOM per accedere all'elemento divMessaggio dellaindex.php: Il resto del codice contenuto inrichiestaAjax.jssi occupa di inviare la richiesta al server per ottenere il messaggio XML. Dopo aver creato un'istanza dell'oggetto XMLHttpRequest ed averla memorizzata inxmlHttp. L'istanza xmlHttp viene usata all'interno della funzioneprocesso()per effettuare la richiesta asincrona al server:function processo(){ ... }Quello che vediamo qui è in realtà il cuore di Ajax: È il codice che effettua la chiamata asincrona al server. Le chiamate asincrone, per loro natura, non bloccano l'esecuzione (e l'interazione con l'utente) mentre la chiamata è effettuata e fin quando non si ottiene la risposta. Una volta che avete impostato quest'opzione, la funzionehandleServerResponse()verrà eseguita dal sistema quando accadrà qualcosa alla vostra richiesta. La funzionehandleServerResponse()viene chiamata diverse volte, ogni qual volta lo stato della richiesta cambia. Solo quandoxmlHttp.readyStateassume il valore 4 la richiesta del server sarà completata e potremo quindi procedere con la lettura dei risultati. Si può anche verificare se la transazione HTTP ha restituito uno status pari 200, segnalando che non si è verificato alcun problema durante la richiesta HTTP. Quando queste condizioni si verificano, siamo liberi di leggere la risposta del server e mostrare il messaggio all'utente. Dopo che la risposta è stata ricevuta e usata, viene riavviato il processo usando la funzionesetTimeout, che farà eseguire la funzioneprocesso()dopo un secondo. ricapitoliamo infine cosa accade quando l'utente carica la pagina: a) L'utente carica index. html (passi 1-4). b) L'utente inizia (o continua) a digitare il proprio nome (questo corrisponde al passo 5). c) Quando viene eseguito il metodo processo() in richiestAjax.js, questo richiama asincronamente uno script sul server chiamato rispostaPHP.php. Il testo inserito dall'utente viene trasferito come parametro nella barra degli indirizzi. La funzionehandleServerResponsesi occupa di gestire i cambiamenti nello stato della richiesta. d)rispostaPHP.phpviene eseguita sul server. Essa compone un documento XML che incapsula il messaggio che il server vuole trasmettere al client. e) il metodohandleServerResponseviene eseguito più volte, ogni volta che lo stato della richiesta cambia. Viene chiamato l'ultima volta quando la risposta è stata ricevuta con successo. Il documento XML viene letto e il messaggio estratto e visualizzato all'interno della pagina. f) Lo schermo dell'utente viene aggiornato con il nuovo messaggio proveniente dal server, ma l'utente può continuare a digitare senza interruzioni. Dopo un secondo, il processo viene riavviato dal passo 2.