Corso di Ingegneria del Web e Applicazioni A A Corso di Ingegneria del Web e Applicazioni A A. 2016-2017 Domenico Rosaci 22 – Web Applications – Ajax

Introduzione Acronimo di di Asynchronous JavaScript and XML, è un framework di sviluppo per realizzare Web applications interattive. Lo sviluppo di applicazioni con AJAX si basa su uno scambio di dati in background fra client (browser ) e server, che consente l'aggiornamento dinamico di una pagina web senza esplicito ricaricamento da parte dell'utente. AJAX è asincrono nel senso che i dati extra sono richiesti al server e caricati in background senza interferire con il comportamento della pagina esistente. Normalmente le funzioni richiamate sono scritte con il linguaggio JavaScript (non è però obbligatorio) Ajax

Vantaggi di AJAX Richiesta tradizionale Client-Server: Richiesta AJAX risposta SERVER CLIENT AJAX

Caratteristiche Con AJAX le richieste vengono gestite in modo trasparente all’utente e senza un aggiornamento fisico dell’intera pagina, ma solo una porzione della stessa, senza dare all’utente l’impressione di essere in attesa di una risposta dal server. La classe Javascript per gestire questo tipo di richieste è l’XMLHttpRequest che permette l’invio e la recezione di informazioni via HTTP (Get o Post). AJAX può essere abbinato all’uso di tecnologie server side (ese. script PHP o ASP) per permettere alle richieste di sfruttare risorse server (es. eseguire query su Database) AJAX

Es.1: Form di benvenuto <!-- Ad ogni submit del form viene richiamata la funzione xmlhttpPost che riceve il nome di un file PHP (script.php) --> <form name="form" onSubmit="javascript:xmlhttpPost(‘script.php'); return false;"> <p>Digita il tuo nome: <input name="nome" type="text"> <input value="Invia" type="submit"> </p> <div id="risultato"></div> </form> AJAX

File script.php /*Script PHP $nome = $_POST['nome']; echo "<p>Benvenuto <strong>$nome</strong!</p>"; ?> AJAX

Javascript: xmlhttpPost <script language="Javascript"> //Funzione per la gestione asincrona AJAX function xmlhttpPost(strURL) { //Inizializzo l'oggetto xmlHttpReq var xmlHttpReq = false; var self = this; // Se il browser è Mozilla/Safari, utilizzeremo l'oggetto XMLHttpRequest per lo scambio di dati tra browser e server. if (window.XMLHttpRequest) { self.xmlHttpReq = new XMLHttpRequest(); } // Se il Browser è Microsoft (IE), utilizzeremo Microsoft.XMLHTTP else if (window.ActiveXObject) { self.xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP"); } (continua) AJAX

Script xmlhttpPost (continua) //Apro il canale di connessione per regolare il tipo di richiesta. //Passo come parametri il tipo di richiesta, url e se è o meno un operazione asincrona (isAsync) self.xmlHttpReq.open('POST', strURL, true); //setto l'header dell'oggetto self.xmlHttpReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); /* Passo alla richiesta i valori del form in modo da generare l'output desiderato*/ self.xmlHttpReq.send(recuperaValore()); (continua) AJAX

Script xmlhttpPost (continua) /* Valuto lo stato della richiesta */ self.xmlHttpReq.onreadystatechange = function() { /*Gli stati di una richiesta possono essere 5 * 0 - UNINITIALIZED * 1 - LOADING * 2 - LOADED * 3 - INTERACTIVE * 4 - COMPLETE*/ //Se lo stato è completo if (self.xmlHttpReq.readyState == 4) { /* Aggiorno la pagina con la risposta ritornata dalla precendete richiesta dal web server.Quando la richiesta è terminata il responso della richiesta è disponibie come responseText.*/ aggiornaPagina(self.xmlHttpReq.responseText); } } (continua) AJAX

Script: recuperaDati /*Questa funzione recupera i dati dal form.*/ function recuperaDati() { var form = document.forms['form']; var nome = form.nome.value; valore = 'nome=' + escape(nome); return valore; } /*Questa funzione viene richiamata dall'oggetto xmlHttpReq per l'aggiornamento asincrono dell'elemento risultato*/ function aggiornaPagina(stringa){ document.getElementById("risultato").innerHTML = stringa; </script> AJAX

Risultato: AJAX