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

Introduzione JavaScript è un linguaggio di scripting, ossia un linguaggio dalle funzionalità ridotte rispetto a un vero e proprio linguaggio di programmazione. JavaScript può essere utilizzato per controllare quasi tutte le componenti del browser e per rispondere a varie azioni dell'utente, quali l'immissione nei moduli e la navigazione nella pagina. È particolarmente utile perché tutti i compiti di elaborazione sono scritti nello script (incorporato nel documento HTML), e quindi l'intero processo definito dallo script è eseguito sul lato del client, senza la necessità di fare riferimento a un server. In altri termini, invece di fare eseguire al server dei compiti e fornire i risultati al browser, quest’ultimo può gestire localmente alcuni compiti, dando così all’utente tempi di risposta più brevi e riducendo il traffico di rete.

Controllare oggetti grafici Si può utilizzare JavaScript anche per controllare direttamente oggetti quali la barra di stato del browser, i frame e perfino la finestra di visualizzazione. Infine JavaScript offre l'interattività tra plug-in e applet Java. Si può scrivere uno script di JavaScript, ad es., per verificare che dei dati numerici siano stati inserti in un modulo che richiede un numero di telefono. Senza alcuna trasmissione in rete, uno script di questo tipo può interpretare il testo immesso e avvertire l'utente con una finestra di messaggio appropriata. Quando un documento HTML con uno script di JavaScript è caricato in un browser che supporta questo linguaggio, le funzioni dello script vengono calcolate, memorizzate, ed eseguite quando si verificano determinati eventi (a es. quando l'utente sposta il mouse sopra un oggetto o immette un testo in una casella).

Java vs Javascript JavaScript non va confuso con Java, dato che tra i due linguaggi esistono importanti differenze: JavaScript Java è un linguaggio interpretato è un linguaggio compilato viene eseguito sul client viene eseguito sul server non consente di scrivere programmi autonomi consente di scrivere programmi autonomi

Elementi JavaScript si compone di elementi di programmazione quali: oggetti, proprietà, metodi, gestori di eventi. La sintassi di JavaScript ha due elementi fondamentali: espressione (o istruzione): combinazione di operatori, variariabili, letterali e parole chiave di cui si può calcolare il valore. funzione: gruppo di enunciati provvisto di un nome, che si può usare più volte semplicemente chiamandone il nome.

Oggetti JavaScript fornisce un facile accesso a componenti prefabbricate di una pagina Web, dette oggetti, che possono essere: creati con HTML (pulsanti, link, moduli, menu, immagini, testo); intrinseci di JavaScript (window, document, Date, function, …); definiti automaticamente dal browser (particolari della configurazione). Gli oggetti di JavaScript hanno una struttura gerarchica al cui vertice si trova l’oggetto window, come indica lo schema seguente:

Proprietà Proprietà A ciascun oggetto sono associate proprietà descrittive, che sono attributi che aiutano a differenziare un oggetto dall’altro. Esempi:

Metodi A ogni oggetto sono associati particolari comportamenti o metodi. Esempi: il metodo blink() associato a un testo ne produce la visualizzazione lampeggiante. dato che un pulsante può solamente essere premuto, all’oggetto button è associato il solo metodo click(). I metodi hanno un nome seguito da una coppia di (), in quanto esigono (spesso, ma non sempre) dei parametri.

click del mouse su un pulsante; avvio di programmi; Gestori di eventi Javascript consente di fornire un elevato livello di interattività alle pagine Web e di accedere a eventi quali: click del mouse su un pulsante; avvio di programmi; caricamento di una pagina Web in un browser; uscita del mouse da una finestra. A questi e altri eventi, automatici o provocati dall’utente, possono essere associati speciali metodi intrinseci, chiamati gestori di eventi, che avviano determinate azioni al verificarsi dell’evento. Ecco il loro elenco.  

<script Language=“JavaScript”> Codice Per aggiungere del codice JavaScript a un documento HTML, esso va inserito tra i tag <script Language=“JavaScript”> e </script> tanto nella sezione head quanto nella sezione body. I due tag non sono necessari se si inseriscono espressioni JavaScript all’interno di tag HTML. Esempio: <html> <head> <script Language="JavaScript"> //riga di commento </script> </head> <body <a href=“#" onclick="alert('ciao')"> Clicca sulla scritta </body> </html>

Commenti Nel listato precedente abbiamo visto un commento di JavaScript. I commenti possono essere di due tipi, come indicato nei due esempi seguenti: 1. // commento di una sola riga che inizia con due barre inclinate 2. /* commento che può occupare più righe, inizia con una barra seguita da un asterisco e termina con un asterisco seguito da una barra */. In JavaScript non si possono usare i simboli dei commenti di HTML (<!-- per iniziare e --> per terminare un commento) e, analogamente, in HTML non si possono usare i simboli dei commenti di JvaScript (// , /* , */)

Commenti Tuttavia, se si vuole che un browser che non supporta JavaScript non visualizzi il testo dello script, occorre racchiudere lo script tra i marcatori di commento di HTML. Esempio: <script Language="JavaScript"> <!--Inizia a nascondere il contenuto dello script per i vecchi browser. codice JavaScript Fine della parte nascosta.--> </script>

Parole Chiave In JavaScript, come in tutti i linguaggi di programmazione, vi sono parole riservate (o parole chiave) che hanno un significato particolare. La maggior parte delle parole riservate è utilizzata nelle dichiarazioni di programma o nella definizione di dati. Una parola riservata non deve essere utilizzata come variabile, funzione, metodo o nome di oggetto. Le parole riservate sono elencate in Tabella. Alcune di esse hanno un significato particolare, altre sono riservate per un utilizzo futuro e altre ancora non devono essere utilizzate, in modo da rendere il codice compatibile con Java.

abstract else instanceof super boolean enum int switch break export   abstract else instanceof super boolean enum int switch break export interface synchronized byte extends label this case false long throw catch final native throws char finally new transient class float null true const for package try continue function private typeof debugger goto protected var default if public void delete implements return volatile do import short while double in static with

Espressioni Le parole chiave vengono poi combinate con le funzioni, le variabili e gli operatori per creare le espressioni, o istruzioni significative, che vengono passate all’interprete JavaScript per l’esecuzione. Un esempio di utilizzo di JavaScript è costituito dal seguente file: <html> <head> <script language=”Javascript”> </script> </head> <body> <h1>Esempio del gestore di eventi onmouseover</h1> <a href="#" onmouseover="alert('OK, ci sei passato')"> JavaScript è eseguito se passi sopra questo link... </a> </body> </html> OnMouse.html

onmouseover="alert('OK, ci sei passato')“ Gestori di eventi Nel listato precedente si trova il seguente codice JavaScript: onmouseover="alert('OK, ci sei passato')“ nel quale il gestore di eventi onmouseover fa eseguire il metodo alert() con valore OK, ci sei passato quando il puntatore si avvicina al link. Il metodo alert() è associato all’oggetto window, e permette di creare un tipo speciale di finestra a comparsa (finestra di avvertimento) che visualizza alcune informazioni. Esse costituiscono il parametro passato al metodo alert().

Alert Un altro esempio, che usa sempre il metodo alert(), ma il gestore di eventi onClick è costituito dal seguente file: <html> <head> </head> <body> <a href="tabella.html" onclick="alert('ciao')"> Link alle gare </a> </body> </html> AlertCiao.html (che richiede, ovviamente, la presenza del file tabella.html). In esso l’evento che fa eseguire il metodo alert(), il quale visualizza una finestra con la scritta ciao, è la pressione del pulsante OK che compare nella finestra.

Funzioni JavaScript consente di scrivere delle righe di script che possono essere usate più volte in una forma abbreviata, assegnandole come valore a una funzione. Una funzione è definita dalla parola chiave function, dal nome che le si vuole assegnare, da una coppia di parentesi () e da una di parentesi {}. La funzione seguente visualizza un messaggio utilizzando il metodo alert(): function Saluti() { alert(“Ciao, questo è un saluto.”) }

Funzioni Essa può essere usata nel seguente listato, che produce la stessa uscita del precedente: <html> <head> <script language="Javascript"> function Saluti() { alert("Ciao, questo è un saluto.") } </script> </head> <body> <a href="tabella.html" onClick="Saluti()"> Link alle gare </a> </body> </html>

Cambiamento colore Un’altra azione che può essere determinata dalla pressione di un pulsante (quindi dal gestore di eventi onclick()) è il cambiamento di colore dello schermo. Essa è realizzata dal seguente listato, che usa una funzione definita dall’utente:

<html> <head><title>Esempio colori</title></head> <body Bgcolor="white"> <script language="JavaScript"> function sfondo(colore) {document.bgColor = colore;} </script> <center><h3>Modifica dei colori dello sfondo</h3></center><br> <font color="Firebrick"> Questa pagina dimostra come si possano modificare i colori dello sfondo utilizzando la funzione JavaScript "bgColor", all'interno di una funzione definita dall'utente chiamata sfondo().La funzione viene richiamata dai pulsanti di input che trasferiscono il colore alla funzione. Quando l'utente clicca sul pulsante con il nome del colore, il colore dello sfondo viene impostato su quel colore. Provate!<br> <center><hr width=“60%"> <form name=“ColoreSfondo”> <input type="button" value="Rosso" onclick="sfondo('red')"> <input type="button" value=" Blu " onclick="sfondo('blue')"> <input type="button" value="Arancio"onclick="sfondo('orange')"> <input type="button" value="Verde" onClick="sfondo('green')"> <input type="button" value="Nero" onClick="sfondo('black')"> <input type="button" value="Grigio" onClick="sfondo('gray')"> <input type="button" value="Giallo" onClick="sfondo('yellow')"> <input type="button" value="bianco" onClick="sfondo('white')"> </center></form> </body> </html> Java3Colori.html

Apertura di finestre Una delle caratteristiche più usate di JavaScript è la possibilità di aprire una finestra secondaria, indipendente da quella principale del browser. Ciò è utile - nel caso in cui la finestra principale contenga dei link esterni - per evitare che l’utente, cliccandovi sopra, esca dal sito. Il contenuto di una finestra secondaria può essere definito in due modi: da un file HTML esterno direttamente all'interno della pagina principale del browser. Ecco un esempio della prima tecnica, che usa il metodo open() associato all’oggetto window per richiamare il file FineSeco.html:

Finestre <html> <head> <title>Nuovafinestra</title> </head> <body> <form> <input type="button" value="Nuova finestra“ onClick='window.open(“FineSeco.html");'> </form> </body> </html> ApriFinestra1.html

Finestre Nel prossimo esempio, invece, il contenuto della finestra secondaria è definito direttamente all’interno della pagina principale che la richiama, tramite un’apposita funzione. Nell’esempio saranno utilizzati alcuni degli argomenti supportati da JavaScript per definire le caratteristiche di una finestra:

Finestre <html> <head> <title>Finestra indipendente</title> <script language="JavaScript"> function NuovaFinestra() { win2=window.open("FineSeco.html","NewWindow", "toolbar=no,directories=no,menubar=no,scrollbars=no, width=400,height=300"); } </script> </head> <body> <form> <input type="button" value="Nuova finestra“ onclick='NuovaFinestra();'> </form> </body> </html> ApriFinestra2.html

Finestre Osserviamo che: richiamare il contenuto di una finestra direttamente dalla pagina principale del browser ha il vantaggio di alleggerire il traffico sul server, visto che comunque il browser non deve richiamare un nuovo documento HTML, ma interpretare quello posto all'interno dello script. richiamare il contenuto di una finestra da un file HTML esterno, è consigliabile quando tale contenuto non si limiti a semplice testo, ma contenga immagini, suoni e una struttura complessa. Naturalmente la finestra secondaria che si apre può contenere anche link ad altri documenti, come quella del listato seguente :

Finestre <html> <head> <script language="JavaScript"> function NuovaFinestra() { msg=open("","schermo","toolbar=no,directories=no,menubar=no, width=370,height=250,resizable=yes"); msg.document.write("<head><title>html.it</title></head><body>"); msg.document.write("<b><center><font size=6> Finestra secondaria con vari link</font></center></b><br>"); msg.document.write("<a href=FineSeco.html target=home> Javascript (Link interno)</a><br>"); msg.document.write("<a href=sfondi.htm target=home>Sfondi</a><br>"); msg.document.write("<a href=gif.htm target=home>Gif animate</a><br>"); msg.document.write("<a href=guida.htm target=home>Guida HTML</a><br>"); msg.document.write("<a href=contr.htm target=home>Controllo qualità </a><br>"); } </script> </head> <body><h3> Esempio di pagina HTML che apre una finestra secondaria con JavaScript </h3><form> <input type="button" value="Apri la finestra" onclick="NuovaFinestra()"> </form> <p><br><hr> </body> </html> ApriFinestra3.html

Finestre Una volta aperta una finestra indipendente dal browser può essere utile, ai fini di una maggiore funzionalità delle pagine, creare un pulsante per chiuderla. In questo caso si può aprire la finestra nel solito modo: <html> <head><title>Nuovafinestra</title></head> <body> <form> <input type="button" value="Nuova finestra“ onClick='window.open("FineSeco1.html");'> </form> </body> </html> e inserire nel codice di quella secondaria un tag del tipo: <input type="button" value="Chiudi" onclick="window.close()">

Chiusura Finestre FinestraChiudi.html Esso usa il metodo, close(), simile al già visto open(), con la differenza che procura l'effetto inverso di chiudere la finestra. La tabella seguente mostra i metodi caratteristici di due oggetti molto utilizzati in JavaScript: window (finestra) e frame (riquadro).

NuovaFinestra1() NuovaFinestra2() ... Finestre Naturalmente, se le finestre da aprire sono più di una, si possono definire più funzioni NuovaFinestra, assegnando a ciascuna di esse un numero diverso: NuovaFinestra1() NuovaFinestra2() ...

visualizza la data e l’ora corrente, producendo l’uscita: Date Operazioni con le date JavaScript dispone dell’oggetto incorporato (o intrinseco) Date() per catturare e manipolare informazioni su data e ora. Il listato seguente: <html> <head></head> <body> <script language="JavaScript"> var today = new Date() document.write("La variabile today, ottenuta con l'istruzione 'var today = new Date()', ha il valore:”) document.write(“<br>”+today) </script> </body> </html> Data1.html visualizza la data e l’ora corrente, producendo l’uscita:

var oggi = today.toLocaleString() Date Nella istruzione: var today = new Date() la parola chiave new crea una nuova istanza dell’oggetto Date() e la assegna alla variabile today. Se si vuole che la data sia visualizzata nel formato italiano, si può applicare il metodo toLocaleString() alla variabile today, creando la nuova variabile oggi: var oggi = today.toLocaleString() Il valore di oggi si potrà poi visualizzare al solito modo: document.write("La variabile oggi, ottenuta con l'istruzione 'var oggi = today.tolocaleString()', ha il valore:“+"<br>"+oggi) Se si aggiungono le ultime due istruzioni alla fine dello script precedente, si ottiene la seguente videata: Data2.html

var oggidata = oggi.substring(0,25) Date Se si vuole che non venga visualizzata anche l’ora corrente (21.42.18, nell’esempio precedente), si può applicare alla variabile oggi il metodo substring(). Esso estrae da una variabile una sottostringa, ossia un gruppo di caratteri, che inizia da uno qualsiasi (nel prossimo esempio dal primo, di numero 0) ed è lunga un numero specificato di caratteri (diciamo 25). Tale sottostringa viene assegnata alla nuova variabile oggidata con l’istruzione: var oggidata = oggi.substring(0,25)

Date L’oggetto document possiede, oltre a write(), numerosi altri metodi e proprietà, tra i quali il metodo lastModified(), che fornisce la data in cui il documento è stato modificato per l’ultima volta. Riassumiamo quanto finora detto sulla data con il seguente listato: <html> <head></head> <body> <script language="JavaScript"> var today = new Date() var oggi = today.toLocaleString() var oggidata = oggi.substring(0,25) document.write("<h2><center>Benvenuto, oggi è “ +oggidata+“</center></h2>") document.write("<br><h4><center>Questo documento è stato modificato "+document.lastModified+"</center></h4>") </script> </body> </html> Data3.html

getTime() getMonth() getHours() getMinutes() getSeconds() Date Se vogliamo estrarre dalla data l’ora, possiamo utilizzare i seguenti metodi dell’oggetto Date(): getTime() getMonth() getHours() getMinutes() getSeconds() scrivendo, ad es., un file di questo tipo:

Date <html> <head></head> <body> <script language="JavaScript"> var oggi = new Date() var ore = oggi.getHours() var min = oggi.getMinutes() var sec = oggi.getSeconds() document.write("Sono le ore: "+ore+":"+min+":"+sec) </script> </body> </html> DataOra.html

URL Cambiamento di URL Può succedere che un sito Web debba cambiare il proprio URL. In tal caso è opportuno che chi digita il vecchio URL sia avvertito del nuovo o, meglio ancora, vi si possa trasferire automaticamente. JavaScript consente tale trasferimento, non solo a seguito di un click dell’utente, ma anche in modo automatico, come indica il prossimo listato. Esso utilizza: l’oggetto location, che viene creato automaticamente dal browser, che vi inserisce l’URL del documento corrente. Il contenuto può però essere sostituito da un altro. il metodo setTimeout(), il quale prevede due variabili: il codice che si vuole eseguire (in questo caso una funzione) e il numero di millisecondi che l’interprete JavaScript deve attendere prima di eseguirlo. Il listato presenta anche una tecnica diffusa per scrivere sullo schermo testi che si estendano su più righe. CambiaURL.html

URL <html> <head> <title>Fun with Phonics</title> <script language=“JavaScript"> function cambiaSito() { alert("Stai per essere trasferito sul nuovo sito JS") location = "JS.html" } </script> </head> <body> <center><img src="fun.jpg" hspace=55 vspace=5 height=64 width=129> <hr width="75%"> </center> var intro1 = "Ciao, grazie per aver visitato il nostro sito Web, ma ci siamo trasferiti. " var intro2 = "Per favore, prendi nota del nostro nuovo URL (www.nuovo.com). " var intro3 = "Clicca<a href='JS.html'> qui </a> oppure aspetta 10 secondi per essere " var intro4 = "trasferito automaticamente al nostro nuovo sito." var introMsg = intro1+"<br>"+intro2+"<br>"+intro3+"<br>"+intro4 document.write("<h4><font color='firebrick'>"+introMsg+"</font></h4>") setTimeout(“cambiaSito()",20000) </body> </html>

Scorrimenti Il listato che segue visualizza un messaggio che scorre in una finestra. Le istruzioni che realizzano il messaggio scorrevole sono contenute in una funzione definita dall’utente, che viene richiamata automaticamente, al caricamento della pagina, dal gestore di evento onLoad.

Laboratorio di Applicazioni Informatiche II mod. A Scorrimenti <html> <head> <script language="JavaScript"> var UTV=" Università di Reggio Calabria " var SpazioMes="--- ---" var PosInizio = 0 function scorreMes() { document.ModuloMessaggio.scorreMes.value=UTV.substring (PosInizio,UTV.length)+SpazioMes+UTV.substring(0,PosInizio) PosInizio = PosInizio + 1 if (PosInizio > UTV.length) { PosInizio = 0 } window.setTimeout("scorreMes()",300) } </script> </head> <body onload="scorreMes()"> <form name="ModuloMessaggio"> <input type="text" name="scorreMes" size=23"> </form> </body> </html> FineScorre.html

Caratteristiche generali (1) Gli script in JavaScript svolgono attività computazionali in modalità Event-driven Le azioni sono svolte come effetto del verificarsi di eventi, ad esempio risposte ad azioni dell’utente L’uso comune di script in JavaScript è quello di controllare le azioni dell’utente sul lato client e, se legittime e corrette, comunicarle al server per l’appropriata esecuzione

Caratteristiche generali (2) Se un documento XHTML NON contiene script allora il browser elabora il documento linea per linea e ne presenta il contenuto Se invece il doc contiene script il browser chiama l’interprete JavaScript per eseguirlo finita l’elaborazione il browser torna al documento XHTML

Caratteristiche generali (3) Gli script possono comparire sia nella head section che nella body section di un doc XHTML Nella head section ci sono gli script che producono un effetto solo quando esplicitamente chiamati o per effetto di una azione utente, ad es. click su un bottone Nella body section ci sono gli script che vengono interpretati una e una sola volta durante l’elaborazione del doc

Oggetti e JavaScript (1) JavaScript è un linguaggio object-based Non ci sono classi, gli object hanno scopo sia di oggetti che di modello di oggetti Non si ha ereditarietà nelle modalità tradizionali dei linguaggi o-o, ma è simulata attraverso altri meccanismi (prototype object) Non si ha polimorfismo

Oggetti e JavaScript (2) Gli oggetti di JavaScript sono collezioni di proprietà Proprietà dei dati: possono essere valori primitivi o riferimenti ad altri oggetti Proprietà dei metodi Tutti gli oggetti sono acceduti attraverso variabili

Esempio: Stampa di un testo in una pagina web Inline scripting È scritto nel <body> del documento Il tag <script> Indica che il testo è parte di uno script L’attributo type specifica il tipo di file e il linguaggio di scripting utilizzato Il metodo writeln scrive una riga nel documento Il carattere di Escape ( \ ) indica che un carattere “speciale” è usato nella stringa Il metodo alert Attiva una dialog box

Esempio: Stampa di un testo in una pagina web

Variabili (1) Uno script può adattare il contenuto di una pagina sulla base di valori di input o di altre variabili Il concetto di variabile è lo stesso degli usuali linguaggi di programmazione Nei JavaScript non è necessario dichiarare le variabili, ma è sempre regola di buona programmazione farlo

Alfanumerici Underscore (_) Dollaro ($) Variabili (2) Gli identificatori sono qualunque stringa di Alfanumerici Underscore (_) Dollaro ($) Il primo simbolo non può essere una cifra Non sono identificatori validi le keyword di JavaScript JavaScript è case sensitive

Il primo (obbligatorio) indica la stringa da stampare Variabili (3) Il metodo che permette di fornire valori di input è prompt Riceve due argomenti: Il primo (obbligatorio) indica la stringa da stampare Il secondo (opzionale) indica la stringa presentata per default

welcome5.html (1 of 2)

Scegliendo OK, il valore inserito dall’utente è passato al programma come stringa Prompt per l’utente Valore di default che appare quando si apre la finestra di dialogo Campo di testo in cui inserire il valore di input

Converte l’argomento da stringa di caratteri a intero Somma di interi Si richiedono due numeri interi all’utente e si calcola la loro somma NaN (not a number) parseInt Converte l’argomento da stringa di caratteri a intero

Riepilogo Concetti Memoria (1) I nomi di variabili corrispondono a locazioni di memoria Ogni variabile ha: Un nome Un tipo Un valore La lettura di valori è un’operazione non distruttiva del valore La scrittura di valori è un’operazione distruttiva del valore

Riepilogo Concetti Memoria (2) number1 45

Riepilogo Concetti Memoria (3) number1 45 number2 72

Riepilogo Concetti Memoria (4) number1 45 number2 72 sum 117

Aritmetica (2)

Aritmetica (3) Step 1. y = 2 * 5 * 5 + 3 * 5 + 7; 2 * 5 is 10 (Leftmost multiplication) Step 2. y = 10 * 5 + 3 * 5 + 7; 10 * 5 is 50 (Leftmost multiplication) Step 3. y = 50 + 3 * 5 + 7; 3 * 5 is 15 (Multiplication before addition) Step 4. y = 50 + 15 + 7; 50 + 15 is 65 (Leftmost addition) Step 5. y = 65 + 7; 65 + 7 is 72 (Last addition) Step 6. y = 72; (Last operation—place 72 into y )

Operatori di relazione (2)  

welcome6.html (3 of 3)

Precedenze degli Operatori

Ajax 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