Nessuna parte del testo può essere in alcun modo riprodotta senza autorizzazione scritta di Sperling & Kupfer Editori.

Transcript

1 TITOLO ORIGINALE JavaScript Step by Step, 2E Published with the authorization of Microsoft Corporation by: O Reilly Media, Inc Gravenstein Highway North Sebastopol, California Copyright 2010 Steve Suehring 2011, Sperling & Kupfer Authorized Italian translation of the English edition of JavaScript Step by Step Second edition, ISBN 2010 Steve Suehring. This translation is published and sold by permission of O Reilly Media, Inc. ITALIAN Language Edition published by Sperling & Kupfer Editori SpA All rights reserved. No part of the contents of this book may be reproduced or transmitted in any form or by any means without the written permission of the publisher. Nessuna parte del testo può essere in alcun modo riprodotta senza autorizzazione scritta di Sperling & Kupfer Editori. Copertina per l edizione italiana: Sperling & Kupfer Editori SpA Traduzione, revisione tecnica e realizzazione editoriale: Publish Art - Pavia Ogni cura è stata posta nella raccolta e nella verifica della documentazione contenuta in questo libro. Tuttavia né gli autori, né O Reilly Media, Inc., né Microsoft Corporation, né Sperling & Kupfer Editori possono assumersi alcuna responsabilità derivante dall utilizzo della stessa. Lo stesso dicasi per ogni persona o società coinvolta nella creazione, nella produzione e nella distribuzione di questo libro. Microsoft, Microsoft Press, ActiveX, Excel, FrontPage, Internet Explorer, PowerPoint, SharePoint, Webdings, Windows e Windows 7 sono marchi o marchi registrati di Microsoft Corporation altri nomi di prodotti e di aziende citati in queste pagine possono essere marchi dei rispettivi proprietari. Mondadori Informatica è un marchio registrato da Arnoldo Mondadori Editore SpA Prima edizione Miti informatica: ottobre 2013 ISBN Edizioni: Finito di stampare nel mese di ottobre 2013 presso ELCOGRAF S.p.A. Stabilimento di Cles (TN) Printed in Italy

2 Sommario breve parte IV-V Scaricabile dal sito Mondadori Informatica Sommario XIII Parte IV AJAX e l integrazione lato-server 17 JavaScript e XML Applicazioni JavaScript Un tocco di AJAX Qualche approfondimento su AJAX Parte V jquery 21 Introduzione alle librerie e ai framework JavaScript Introduzione a jquery Effetti e plug-in di jquery

3

4 Sommario parte IV-V Scaricabile dal sito Mondadori Informatica Parte IV AJAX e l integrazione lato-server 17 JavaScript e XML Utilizzare XML con JavaScript Un esempio di documento XML Caricare un documento XML con JavaScript Lavorare con dati XML da Excel Un anteprima del futuro Esercizi Applicazioni JavaScript Componenti delle applicazioni JavaScript I magnifici tre: visualizzazione, comportamento e dati JavaScript e le interfacce web Un tocco di AJAX Introduzione ad AJAX L oggetto XMLHttpRequest Istanziare l oggetto XMLHttpRequest Inviare una richiesta AJAX Elaborare una risposta AJAX Elaborare risposte XML Lavorare con JSON Elaborare le intestazioni Utilizzare il metodo POST Caso di studio: ricerca e aggiornamento live Esercizi Qualche approfondimento su AJAX Creare una tabella HTML con XML e CSS Stilizzare la tabella con CSS Cambiare gli attributi di stile con JavaScript Creare una casella a discesa dinamica Accettare input dall utente e AJAX Esercizi Parte V jquery 21 Introduzione alle librerie e ai framework JavaScript Comprendere le librerie di programmazione Definire una propria libreria JavaScript Librerie e framework JavaScript diffusi jquery Yahoo! User Interface MooTools XV

5 Altre librerie Esercizi Introduzione a jquery Presentazione di jquery Utilizzare jquery I due download di jquery Includere jquery Sintassi jquery di base Collegare jquery all evento load Utilizzare i selettori Selezionare elementi tramite l ID Selezionare elementi tramite la classe Selezionare elementi tramite il tipo Selezionare elementi tramite la gerarchia Selezionare elementi tramite la posizione Selezionare elementi tramite un attributo Selezionare elementi dei form Altri selettori Funzioni Attraversare il DOM Lavorare con gli attributi Modificare il testo e l HTML Inserire elementi Funzioni callback Eventi Associare e disassociare Eventi del mouse e hover Altri gestori di evento AJAX e jquery Errori e timeout AJAX Inviare dati al server Altre opzioni importanti Altro codice jquery Esercizi Effetti e plug-in di jquery Funzionalità centrali per migliorare l usabilità Effetti nativi jquery UI Utilizzare jquery UI Drag-and-drop Accordion Ulteriori informazioni su jquery UI Esercizi Appendice XVI

6 Parte IV AJAX e l integrazione lato-server Capitolo 17: JavaScript e XML Capitolo 18: Applicazioni JavaScript Capitolo 19: Un tocco di AJAX Capitolo 20: Qualche approfondimento su AJAX 329

7

8 Capitolo 17 JavaScript e XML Dopo aver letto questo capitolo, sarete in grado di: n n n Esaminare le funzioni per aprire un documento Extensible Markup Language (XML) utilizzando JavaScript. Visualizzare un documento XML come tabella Hypertext Markup Language (HTML). Visualizzare un foglio di calcolo XML di Microsoft Office Excel 2007 utilizzando JavaScript. Utilizzare XML con JavaScript XML è un linguaggio che consiste quasi completamente di tag definiti dall utente. Poiché i tag definiti dall utente rendono l XML estremamente personalizzabile, l XML è utilizzato di frequente come formato file per lo scambio dei dati. Una considerazione importante per i programmatori JavaScript è che l XML rappresenta la X dell acronimo AJAX (Asynchronous JavaScript and XML). AJAX è un metodo molto diffuso per creare applicazioni web interattive. Ulteriori informazioni su AJAX sono riportate nei due capitoli successivi: Il capitolo 19, Un tocco di AJAX, e il capitolo 20, Qualche approfondimento su AJAX. XML è uno standard aperto definito dal World Wide Web Consortium (W3C) ed è attualmente alla sua quarta edizione. Questa sezione esamina brevemente l XML in quanto appartenente a JavaScript. Potete trovare ulteriori informazioni su XML sul sito di XML Working Group, all indirizzo o sul sito web di Microsoft, all indirizzo (le informazioni sono in inglese). Un esempio di documento XML I documenti XML consistono di elementi sistemati in una struttura di documento. Questi elementi hanno una sintassi propria, comprendente il fatto che essi richiedono un tag iniziale e un tag finale. Per il programmatore web l aspetto di un documento (definito nel testo fra i tag) potrebbe essere familiare. Ecco un documento XML di esempio, che potete trovare anche in books.xml nella cartella Chapter17 fra i file di esempio: <books> <book> <title>mysql Bible</title> <author>steve Suehring</author> <isbn> </isbn> <publisher>wiley Publishing Inc.</publisher> </book> <book> <title>javascript Step by Step</title> 331

9 332 Parte IV AJAX e l integrazione lato-server <author>steve Suehring</author> <isbn> </isbn> <publisher>microsoft Press</publisher> </book> </books> La struttura globale del documento deve soddisfare determinati criteri, perché il documento possa qualificarsi come documento ben formato. Come potete vedere nell esempio, ogni elemento ha un proprio tag iniziale seguito da un corrispondente tag finale. Gli elementi possono anche essere nidificati l uno nell altro. Molte di queste regole sono simili alle regole dell HTML. I documenti XML possono contenere anche attributi, perciò è valido anche il seguente codice: <?xml version="1.0"?> <book title="javascript Step by Step" author="steve Suehring" isbn=" " publisher="microsoft Press" /> Caricare un documento XML con JavaScript Potete caricare e manipolare i documenti XML utilizzando JavaScript. Questa sezione spiega come farlo. Importare il documento Potete importare un documento XML utilizzando uno fra due approcci, a seconda dei browser che volete supportare. Per i browser più recenti, fra cui Chrome, Firefox e le ultime versioni di Windows Internet Explorer, potete utilizzare l oggetto XMLHTTPRequest(), mentre le vecchie versioni di Internet Explorer utilizzano l oggetto ActiveXObject. Il seguente codice carica il documento books.xml in un modo compatibile con più browser: if (window.xmlhttprequest) { var httpobj = new XMLHttpRequest(); else { var httpobj = new ActiveXObject("Microsoft.XMLHTTP"); httpobj.open("get","books.xml",false); httpobj.send(); var xmldocument = httpobj.responsexml;

10 Visualizzare il documento Capitolo 17 JavaScript e XML 333 Spesso i dati XML possono essere visualizzati al meglio in formato tabella o foglio di calcolo. La figura 17.1 mostra il file books.xml in Excel Figura 17.1 Un file XML rappresentato in un foglio di calcolo. Una tabella HTML è utile per rappresentare in un browser gli stessi dati mostrati nella figura Visualizzare dati XML utilizzando JavaScript richiede soprattutto alcune conoscenze del Document Object Model (DOM), e nessun altra speciale funzione o metodo oltre quelli richiesti per caricare il documento stesso, che avete già imparato. Il successivo esempio crea una funzione chiamata displaydata() che mostra informazioni in formato tabella.

11 334 Parte IV AJAX e l integrazione lato-server La proprietà readystate Nelle versioni precedenti di questo libro utilizzavamo la proprietà readystate per determinare quando il documento XML era caricato. La proprietà readystate è un integer che contiene uno fra cinque valori indicanti lo stato corrente della richiesta di documento da elaborare. La tabella 17.1 mostra i valori e le corrispondenti descrizioni di readystate. Tabella 17.1 La proprietà readystate Valore Descrizione 0 Non inizializzato. Aperto ma non ancora chiamato. 1 Aperto. Inizializzato ma non ancora inviato. 2 Inviato. La richiesta è stata inviata. 3 In ricezione. La risposta è in fase di ricezione. 4 Caricato. La risposta è stata completamente ricevuta. Ulteriori informazioni sulla proprietà readystate e l evento onreadystatechange sono riportate nel capitolo 18, Applicazioni JavaScript. Per visualizzare i nodi e i nodi figlio in un documento XML, occorre eseguire un iterazione sui livelli del documento e creare il documento di output. La successiva funzione che vedremo lo fa iterando su un documento XML gerarchico al fine di visualizzare i dati del documento in una tabella HTML. Questo codice continua l esempio già mostrato, in cui una variabile chiamata xmldocument viene creata e caricata con un documento XML chiamato books.xml: function displaydata(xmldocument) { var xmlel = xmldocument.getelementsbytagname("book"); var table = document.createelement("table"); table.border = "1"; var tbody = document.createelement("tbody"); // Append the body to the table table.appendchild(tbody); // Create the table cells for the new row for (i = 0; i < xmlel.length; i++) { var row = document.createelement("tr"); // Create the row/td elements for (j = 0; j < xmlel[i].childnodes.length; j++) { // Skip it if the type is not 1 if (xmlel[i].childnodes[j].nodetype!= 1) { continue; // Insert the actual text/data from the XML document. var td = document.createelement("td"); var xmldata = document.createtextnode(xmlel[i].childnodes[j].firstchild.nodevalue);

12 Capitolo 17 JavaScript e XML 335 td.appendchild(xmldata); row.appendchild(td); tbody.appendchild(row); document.getelementbyid("xmldata").appendchild(table); Per mettere insieme tutto il codice in una pagina web, associate a un evento le funzioni che caricano e visualizzano il file XML. Il listato 17.1 (potete trovare questo codice anche in listing17-1.html fra i file di esempio) crea una nuova funzione chiamata getxml e la associa all evento load dell oggetto window. Il codice che associa l evento è riportato in grassetto. LiSTATO 17.1 Visualizzare dati XML in una tabella HTML. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " strict.dtd"> <html> <head> <title>books</title> <script type="text/javascript" src="ehandler.js"></script> </head> <body id="mainbody"> <div id="xmldata"></div> <script type="text/javascript"> function displaydata(xmldocument) { var xmlel = xmldocument.getelementsbytagname("book"); var table = document.createelement("table"); table.border = "1"; var tbody = document.createelement("tbody"); // Append the body to the table table.appendchild(tbody); // Create table row for (i = 0; i < xmlel.length; i++) { var row = document.createelement("tr"); // Create the row/td elements for (j = 0; j < xmlel[i].childnodes.length; j++) { // Skip it if the type is not 1 if (xmlel[i].childnodes[j].nodetype!= 1) { continue; // Insert the actual text/data from the XML document. var td = document.createelement("td"); var xmldata = document.createtextnode(xmlel[i].childnodes[j].firstchild.nodevalue); td.appendchild(xmldata); row.appendchild(td); tbody.appendchild(row);

13 336 Parte IV AJAX e l integrazione lato-server document.getelementbyid("xmldata").appendchild(table); function getxml() { if (window.xmlhttprequest) { var httpobj = new XMLHttpRequest(); else { var httpobj = new ActiveXObject("Microsoft.XMLHTTP"); httpobj.open("get","books.xml",false); httpobj.send(); var xmldocument = httpobj.responsexml; displaydata(xmldocument); var mainbody = document.getelementbyid("mainbody"); EHandler.add(mainBody, "load", function() { getxml(); ); </script> </body> </html> Quando è visualizzata tramite un sito web, la tabella mostra i dati in modo molto simile a un foglio di calcolo, come si vede nella figura FigUrA 17.2 Rappresentare books.xml in una tabella HTML. Esaminando il codice del listato 17.1 vediamo un grosso loop for che percorre la gerarchia XML, creando le righe della tabella mentre procede. Un fatto da notare è che il loop cerca solo i nodi Element all interno del documento XML utilizzando il seguente codice:

14 Capitolo 17 JavaScript e XML 337 // Skip it if the type is not 1 if (xmlel[i].childnodes[j].nodetype!= 1) { continue; Il nodetype 1 rappresenta un nodo XML Element. Se il tipo di nodo in fase di esame nel loop non è element, il codice passa alla parte successiva del documento. Nella visualizzazione della figura 17.2 potreste notare che non sono presenti le intestazioni di colonna. Per mostrarle occorre aggiungere altro codice. La procedura che segue vi mostra come fare. Aggiungere le intestazioni di colonna da un documento XML 1. Utilizzando Microsoft Visual Studio, Eclipse o un altro editor, modificate il file books. htm nella cartella Chapter17 dei file di esempio (a questo punto della procedura, se lo visualizzate in un browser web, books.htm dovrebbe essere simile alla figura 17.2). 2. In books.htm aggiungete il codice riportato in grassetto di seguito al metodo displaydata() (potete trovare questo codice anche in books.txt fra i file di esempio), sostituendo il commento TODO: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " strict.dtd"> <html> <head> <title>books</title> <script type="text/javascript" src="ehandler.js"></script> </head> <body id="mainbody"> <div id="xmldata"></div> <script type="text/javascript"> function displaydata(xmldocument) { var xmlel = xmldocument.getelementsbytagname("book"); var table = document.createelement("table"); table.border = "1"; var tbody = document.createelement("tbody"); // Append the body to the table table.appendchild(tbody); var row = document.createelement("tr"); for (colhead = 0; colhead < xmlel[0].childnodes.length; colhead++) { if (xmlel[0].childnodes[colhead].nodetype!= 1) { continue; var tablehead = document.createelement("th"); var colname = document.createtextnode(xmlel[0].childnodes[colhead].nodename); tablehead.appendchild(colname); row.appendchild(tablehead); // Append the row to the body

15 338 Parte IV AJAX e l integrazione lato-server tbody.appendchild(row); // Create table row for (i = 0; i < xmlel.length; i++) { var row = document.createelement("tr"); // Create the row/td elements for (j = 0; j < xmlel[i].childnodes.length; j++) { // Skip it if the type is not 1 if (xmlel[i].childnodes[j].nodetype!= 1) { continue; // Insert the actual text/data from the XML document. var td = document.createelement("td"); var xmldata = document.createtextnode(xmlel[i].childnodes[j].firstchild.nodevalue); td.appendchild(xmldata); row.appendchild(td); tbody.appendchild(row); document.getelementbyid("xmldata").appendchild(table); function getxml() { if (window.xmlhttprequest) { var httpobj = new XMLHttpRequest(); else { var httpobj = new ActiveXObject("Microsoft.XMLHTTP"); httpobj.open("get","books.xml",false); httpobj.send(); var xmldocument = httpobj.responsexml; displaydata(xmldocument); var mainbody = document.getelementbyid("mainbody"); EHandler.add(mainBody, "load", function() { getxml(); ); </script> </body> </html> 3. Visualizzate la pagina in un browser web. Dovrebbe essere simile alla figura che segue:

16 Capitolo 17 JavaScript e XML 339 Lavorare con dati XML da Excel 2007 Excel 2007 possiede diverse funzionalità che facilitano il lavoro con i dati XML. Con Excel è possibile sia importare sia esportare i dati XML. Quando si esportano dati da Excel, in effetti, il programma non aggiunge nulla di proprietario al documento XML. Ecco l aspetto del file books.xml esportato da Excel 2007 (potete trovare questo codice anche in newbooks. xml fra i file di esempio): <?xml version="1.0" encoding="utf-8" standalone="yes"?> <books xmlns:xsi=" <book> <title>mysql Bible</title> <author>steve Suehring</author> <isbn> </isbn> <publisher>wiley Publishing Inc.</publisher> </book> <book> <title>javascript Step by Step</title> <author>steve Suehring</author> <isbn> </isbn> <publisher>microsoft Press</publisher> </book> </books> Poiché Excel 2007 è XML-friendly, la funzione displaydata() già vista in questo capitolo può agire senza richiedere modifiche sui dati XML esportati da Excel Per gli sviluppatori che hanno lavorato in passato con i formati proprietari, questa è una gradita sorpresa.

17 340 Parte IV AJAX e l integrazione lato-server Un anteprima del futuro Essendo XML la X dell acronimo AJAX, si può facilmente dedurre che AJAX è molto di più che JavaScript e XML. AJAX può funzionare con tipi di dati diversi da XML, e nel capitolo 19 lavorerete con AJAX partendo dalle brevi premesse presentate in questo capitolo. Nel capitolo 20 esaminerete l integrazione di JavaScript, AJAX e Cascading Style Sheets (CSS) che vi permette di presentare i dati recuperati con JavaScript. Esercizi 1. Utilizzate il codice dell esercizio sulla visualizzazione di questo capitolo per visualizzare la tabella dopo che è stato fatto clic su un collegamento anziché quando la pagina viene caricata. 2. Utilizzate il codice dell esercizio sulla visualizzazione di questo capitolo per visualizzare la tabella, ma impiegate il DOM per assegnare colori alterni alle righe, in modo che una riga ogni due abbia lo sfondo grigio. Vi do un indizio: #aaabba è la rappresentazione esadecimale del colore grigio.

18 Capitolo 18 Applicazioni JavaScript Dopo aver letto questo capitolo, sarete in grado di: n Comprendere i componenti di un applicazione basata su JavaScript. Componenti delle applicazioni JavaScript Creare un applicazione basata sul browser con l aspetto sofisticato di un applicazione desktop richiede spesso l uso di JavaScript. Una tale applicazione possiede alcune caratteristiche e capacità di risposta simili a quelle di un applicazione desktop, sebbene questa risieda sul computer locale anziché funzionare tramite un browser web. Questo breve capitolo presenta una panoramica dei componenti che formano un applicazione basata su JavaScript. L obiettivo è aiutarvi a comprendere l architettura sottostante e alcune delle complessità necessarie per creare questo tipo di applicazione. I magnifici tre: visualizzazione, comportamento e dati Un applicazione web presenta tre componenti principali: n Visualizzazione L aspetto e lo spirito della pagina. n Comportamento Ciò che l interfaccia applicativa fa, ovvero ciò che accade quando l utente fa clic su un elemento sulla pagina o interagisce in altro modo con la pagina. n Dati Il componente server che contiene i dati ed esegue le azioni il cui risultato appare sulla pagina. Il codice JavaScript gestisce tipicamente i primi due componenti del precedente elenco, visualizzazione e comportamento, in modo da influenzare l interfaccia o reagire quando un utente esegue un azione sulla pagina. JavaScript lavora anche con i dati restituiti dal server, ma di solito lo fa soltanto per alterare in qualche modo la visualizzazione. Per esempio una chiamata a un servizio web che restituisce la temperatura o le condizioni atmosferiche correnti potrebbe utilizzare JavaScript per cambiare un icona quando è soleggiato. Le sezioni che seguono esaminano ciascuno di questi tre elementi in maggiore dettaglio. 341

19 342 Parte IV AJAX e l integrazione lato-server Visualizzazione: layout di pagina La visualizzazione della pagina web comprende il layout di pagina e qualsiasi cosa correlata all aspetto e allo spirito della pagina e del sito, compresa la combinazione di colori, le immagini, la stilizzazione dei menu (se hanno angoli arrotondati o squadrati e così via), il posizionamento dei pulsanti e il contenuto, i colori dei font e l utilizzo delle immagini. JavaScript può influenzare tutti questi elementi, come avete visto nei capitoli precedenti su Cascading Style Sheets (CSS) e la convalida dei form. Questi elementi rappresentano l interesse principale del web design e ricevono la massima attenzione da parte degli utenti, perciò dovreste considerarli nel determinare i requisiti del vostro sito. Comportamenti: controllare cosa succede e quando Uno dei fattori più importanti nel determinare l esperienza dell utente è anche uno degli elementi più spesso trascurati nella progettazione di un applicazione web: Il comportamento dell interfaccia applicativa, che controlla cosa accade quando gli utenti interagiscono con un dato elemento. Considerate questi due semplici scenari: n Quando un visitatore fa clic sul pulsante Submit di un web form, il pulsante rimane attivo o viene disabilitato? n Quando un campo di input ottiene lo stato attivo, dovrebbe cambiare colore o essere evidenziato? Anche questi comportamenti minori possono migliorare notevolmente l esperienza dell utente se sono progettati adeguatamente. Tuttavia quando si lavora alla progettazione di un sito, questi comportamenti sono spesso dimenticati, ignorati o applicati in modo incoerente per lasciare più spazio all aspetto e allo spirito o alla mera progettazione del sito. Dati: consumo, visualizzazione e convalida JavaScript, almeno nel suo utilizzo trattato in questo libro, non interagisce direttamente con un database o un server. Naturalmente JavaScript lo fa attraverso Asynchronous JavaScript e XML (AJAX) e attraverso i servizi web, ma questi processi richiedono che il codice latoserver restituisca i dati al JavaScript chiamante. Come la porzione del sito relativa alla visualizzazione, i componenti di dati di back-end lato-server dovrebbero ricevere un adeguata attenzione quando progettate un applicazione web. Dalla progettazione di database alla programmazione della logica di business, questo codice back-end richiede attenzione. JavaScript e le interfacce web I programmatori utilizzano JavaScript per creare front-end che garantiscono un esperienza di qualità all utente. Microsoft Bing Maps (in precedenza Live Search Maps) è un esempio di applicazione web che fa pesante affidamento su JavaScript. La figura 18.1 mostra une esempio di Microsoft Bing Maps, che potete trovare all indirizzo

20 Capitolo 18 Applicazioni JavaScript 343 Figura 18.1 L interfaccia Bing Maps utilizza JavaScript per fornire una buona interattività. Gli utenti possono trascinare la visualizzazione della mappa in modo molto simile a come interagirebbero con un applicazione desktop. La mappa è composta di porzioni a varie risoluzioni. Quando un utente trascina la mappa, il browser invia molte richieste HTTP al server web Virtual Earth richiedendo porzioni aggiuntive che il browser visualizza poi velocemente. Il motore di ricerca Bing utilizza anche una funzionalità di ricerca progressiva basata sulla digitazione simile a quella di altri motori di ricerca come Google. Se iniziate a digitare nella casella di testo principale su il browser invia immediatamente una richiesta HTTP al server per individuare ricerche simili, come si vede nella figura Figura 18.2 La funzionalità di ricerca progressiva basata sulla digitazione utilizza JavaScript per ottenere un elenco di ricerche corrispondenti dal server.

21 344 Parte IV AJAX e l integrazione lato-server Tutti questi elementi del motore di ricerca Bing utilizzano JavaScript. Un numero infinito di altre interfacce web fanno affidamento su JavaScript per migliorare l esperienza dell utente controllando il livello comportamento della pagina. La parte rimanente di questo libro vi introduce alla creazione di questo tipo di applicazioni con JavaScript. Il capitolo 19, Un tocco di AJAX, e il capitolo 20, Qualche approfondimento su AJAX, vi insegnano come creare una semplice interfaccia di ricerca progressiva basata sulla digitazione utilizzando JavaScript. Introducono inoltre AJAX e mostrano esempi di come si lavora con i dati per creare applicazioni. Il capitolo 21, Introduzione alle librerie e ai framework JavaScript, e il capitolo 22, Introduzione a jquery, presentano le librerie JavaScript, concentrandosi su jquery, che potete utilizzare per semplificare molte attività correlate alla scrittura di complesse applicazioni JavaScript.

22 Capitolo 19 Un tocco di AJAX Dopo aver letto questo capitolo, sarete in grado di: n n n n Comprendere i fondamenti del paradigma di programmazione Asynchronous JavaScript and XML (AJAX). Comprendere la differenza fra chiamate AJAX sincrone e asincrone. Utilizzare AJAX per recuperare dati. Utilizzare AJAX con diversi metodi Hypertext Transfer Protocol (HTTP) per recuperare risposte da un server. Introduzione ad AJAX AJAX descrive il paradigma di programmazione che combina JavaScript e un server web. Gli sviluppatori utilizzano AJAX per creare applicazioni web altamente interattive come Microsoft Virtual Earth. Senza AJAX, un applicazione web potrebbe far attendere il visitatore mentre una risposta viene messa insieme dal server web. Un applicazione basata su AJAX invia richieste dal browser web al server web in background (in modo asincrono) mentre il visitatore utilizza l applicazione. Questo rende l applicazione più reattiva dal punto di vista dell utente. In un applicazione AJAX, JavaScript elabora la risposta e presenta i dati agli utenti. Quando è combinata con Cascading Style Sheets (CSS) e un buon layout, un applicazione AJAX garantisce un eccellente usabilità e la portabilità che soltanto un applicazione web può offrire. Nonostante molte applicazioni AJAX possano sembrare complesse, gli effettivi processi di invio di una richiesta e gestione della risposta non sono molto complicati. Questo capitolo esplora come potete inviare richieste e ricevere risposte utilizzando un oggetto AJAX fondamentale: XMLHttpRequest. Un concetto centrale di AJAX è che occorre chiamare applicazioni lato-server per restituire dati. In questo capitolo presento una breve panoramica di come creare una tale applicazione utilizzando sia ASP.NET sia PHP (PHP è un acronimo ricorsivo che sta per PHP Hypertext Preprocessor). Se avete bisogno di ulteriore assistenza per la creazione della porzione latoserver di un applicazione AJAX, potete ottenerla da varie fonti. Se state creando un applicazione lato-server con tecnologie Microsoft, Microsoft Developer Network è un importante risorsa che offre numerosi tutorial e un articolo introduttivo su AJAX ( Microsoft Press pubblica inoltre molti eccellenti libri sulla creazione di applicazioni per il web. Uno di questi è 345

23 346 Parte IV AJAX e l integrazione lato-server Microsoft ASP.NET 3.5 Step By Step (Microsoft Press, 2008). Per conoscere altri titoli, visitate Se state sviluppando un applicazione lato-server con altre tecnologie come lo stack LAMP (Linux, Apache, MySQL, Perl/PHP/Python), cercare tutorial sul web è probabilmente il modo più semplice per iniziare velocemente a sviluppare per questa piattaforma. Il libro Learning Perl (O Reilly, 2005) è una valida risorsa per imparare i fondamenti del linguaggio di programmazione Perl. Nota Se vi piace il mio stile di scrittura, ho scritto anche il libro Beginning Perl Web Development (Apress, 2005), che tratta l utilizzo di Perl per lavorare con le applicazioni web. Il sito web principale di PHP ( è un ottimo punto di partenza per informazioni su PHP; per Python date un occhiata al relativo sito web ( Le informazioni sono in inglese. L oggetto XMLHttpRequest L oggetto XMLHttpRequest ha un ruolo centrale per la creazione di un applicazione AJAX. Sebbene le implementazioni di JavaScript siano differenti, l ECMAScript e il World Wide Web Consortium (W3C) hanno standardizzato molti aspetti di esso, a parte l oggetto XMLHttpRequest, che non è mai stato sottoposto a un processo di standardizzazione. Nonostante questo, dal rilascio di Windows Internet Explorer 7, l oggetto XMLHttpRequest si utilizza allo stesso modo su tutti i principali browser. Microsoft ha implementato in origine l oggetto XMLHttpRequest in Microsoft Internet Explorer 5.0. Se un visitatore utilizza una precedente versione del browser, le applicazioni che includono XMLHttpRequest non funzioneranno. Nelle versioni di Internet Explorer precedenti la 7, l oggetto XMLHttpRequest era istanziato come un oggetto ActiveXObject, ma altri browser hanno implementato l oggetto XMLHttpRequest come un oggetto JavaScript incorporato nel browser. Questo significa che se le vostre applicazioni devono lavorare con versioni di Internet Explorer precedenti la 7, dovete istanziare l oggetto XMLHttpRequest per quei browser in un modo diverso, come vi mostrerò più avanti in questo capitolo. La sezione successiva, Istanziare l oggetto XMLHttpRequest, vi mostra come testare l esistenza di XMLHttpRequest e come istanziarlo in tutte le versioni di Internet Explorer. Istanziare l oggetto XMLHttpRequest Internet Explorer 7 e versioni successive, e tutti gli altri browser principali che supportano XMLHttpRequest, istanziano l oggetto XMLHttpRequest nello stesso modo: var req = new XMLHttpRequest();

24 Capitolo 19 Un tocco di AJAX 347 Per le versioni di Internet Explorer precedenti la 7, dovete istanziare invece un ActiveXObject. Il modo in cui lo fate varia però a seconda della versione della libreria XMLHTTP installata sul client. Perciò dovete fare un po di giochetti con il codice per istanziare un oggetto XMLHttpRequest in queste vecchie versioni di Internet Explorer. Il codice del listato 19.1 è una funzione compatibile con più browser che istanzia un oggetto XMLHttpRequest su più browser. LISTATO 19.1 Istanziare un oggetto XMLHttpRequest su più browser. function readyajax() { try { return new XMLHttpRequest(); catch(e) { try { return new ActiveXObject("Msxml2.XMLHTTP"); catch(e) { try { return new ActiveXObject("Microsoft.XMLHTTP"); catch(e) { return "A newer browser is needed."; La funzione nel listato 19.1 utilizza più livelli di blocchi try/catch per istanziare un XMLHttpRequest, indipendentemente dal fatto che il visitatore utilizzi Internet Explorer o un altro browser. Se la chiamata nativa di XMLHttpRequest fallisce, questo significa che il visitatore sta utilizzando un browser Internet Explorer precedente la versione 7. In tal caso l errore è intercettato e viene tentato uno dei metodi di istanziazione di XMLHttpRequest basati su ActiveXObject. Se nessuno di questi metodi ha successo, la ragione più probabile è che il browser sia troppo vecchio per supportare XMLHttpRequest. L articolo About Native XMLHTTP su MSDN descrive vari aspetti relativi alla storia e alla sicurezza dell oggetto XMLHttpRequest in Internet Explorer. Questo articolo è disponibile all indirizzo (le informazioni sono in inglese). Per chiamare la funzione readyajax() mostrata nel listato 19.1 si procede così: var requestobj = readyajax(); La variabile requestobj ora contiene l oggetto XMLHttpRequest restituito dalla funzione oppure, se la funzione non è riuscita a creare l oggetto, la variabile requestobj contiene la stringa A newer browser is needed.

25 348 Parte IV AJAX e l integrazione lato-server Inviare una richiesta AJAX Con un nuovo oggetto XMLHttpRequest fra le mani, potete inviare richieste al server web e ottenere risposte. Per inviare la richiesta, utilizzate una combinazione dei metodi open() e send() dell oggetto XMLHttpRequest. Ci sono due modi fondamentalmente diversi per inviare richieste AJAX: sincrono e asincrono. Quando è inviato in un modo asincrono, il codice di richiesta si limita ad attendere la risposta, un processo chiamato blocco. Per una richiesta sincrona perciò il codice di richiesta si bloccherà, impedendo così l ulteriore elaborazione o esecuzione di altro JavaScript mentre lo script attende la risposta dal server web. Questo processo presenta ovvi svantaggi quando la risposta va persa in transito o semplicemente è lenta. Con le richieste asincrone il codice di richiesta non viene bloccato. Il chiamante può controllare lo stato della richiesta per vedere quando la richiesta è completata. Ulteriori informazioni sulle richieste asincrone sono riportate più avanti in questo capitolo; è più facile iniziare dalle richieste sincrone. Per poter inviare una richiesta, dovete prima crearla. Per farlo, utilizzate il metodo open, che presenta tre argomenti: il metodo di richiesta (GET, POST, HEAD o altri), lo Uniform Resource Locator (URL) a cui la richiesta sarà inviata e un boolean true o false, indicante se volete inviare la richiesta rispettivamente in modo asincrono o sincrono. Presupponendo che il vostro oggetto richiesta sia stato recuperato utilizzando la funzione readyajax() e inserito in una variabile denominata requestobj, una tipica chiamata asincrona del metodo open potrebbe essere questa: var url = " requestobj.open("get", url, true); La stessa chiamata, inviata in modo sincrono, è questa: var url = " requestobj.open("get", url, false); La richiesta viene inviata effettivamente con il metodo send, come segue: requestobj.send(); Nota Se i parametri inviati con la richiesta includono caratteri speciali, come spazi o altri caratteri riservati della URI RFC, dovete prima effettuarne l'escape tramite la notazione %. L'argomento è trattato nei dettagli nella RFC 3986, che potete trovare all'indirizzo ftp://ftp. rfc-editor.org/in-notes/rfc3986.txt (le informazioni sono in inglese). Ulteriori informazioni sono disponibili anche all'indirizzo (le informazioni sono in inglese).

26 Capitolo 19 Un tocco di AJAX 349 Come funziona il web in meno di 500 parole L Hypertext Transfer Protocol (HTTP) è il linguaggio del web. L HTTP, attualmente definito dalla RFC 2616, descrive un protocollo per lo scambio di informazioni utilizzando richieste provenienti dai client e risposte provenienti dai server. Le richieste dei client come i browser web contengono un determinato set di intestazioni che definiscono il metodo utilizzato per il recupero, l oggetto recuperato e la versione del protocollo da utilizzare. Altre intestazioni contengono il nome host del server web, le lingue richieste, il nome del browser e altre informazioni che il client ritiene rilevanti per la richiesta. Segue una semplice richiesta in HTTP versione 1.1 che mostra soltanto la più importante di queste intestazioni: GET / HTTP/1.1 Host: Questa richiesta specifica il metodo GET per recuperare il documento che si trova nella posizione di directory / (root) utilizzando HTTP versione 1.1. La seconda riga, chiamata comunemente intestazione Host, è l URL Questa intestazione dice al server web quale sito web è richiesto. In una richiesta possono essere utilizzati molti diversi metodi; i tre più comuni sono GET, POST e HEAD. Il client e il server scambiano anche cookie HTTP come parte delle intestazioni. I cookie sono inviati nella richiesta e altri potrebbero essere ricevuti nella risposta. Quando il server web per riceve una richiesta come questa, invia intestazioni di risposta per indicare come ha gestito la richiesta. In questo caso il server web invia intestazioni di risposta simili alle seguenti: HTTP/ OK Date: Sat, 12 Mar :04:34 GMT Server: Apache/ (Debian GNU/Linux) mod_perl/1.29 PHP/ Transfer-Encoding: chunked Content-Type: text/html; charset=iso Il documento richiesto segue le intestazioni di risposta. La prima e più importante intestazione indica lo stato della risposta. Nell esempio la risposta è 200, che significa OK. Altre comuni risposte sono 404 (che indica che il documento richiesto non è stato trovato), 302 (che indica una redirezione) e 500 (che indica che si è verificato un errore del server). Conoscere queste nozioni di base di HTTP è importante per capire come costruire richieste AJAX e come risolvere problemi relativi a queste richieste quando qualcosa va male. Potete trovare ulteriori informazioni su HTTP, compresi vari codici di risposta, nella RFC 2616 all indirizzo ftp://ftp.rfc-editor.org/in-notes/rfc2616.txt (le informazioni sono in inglese).

27 350 Parte IV AJAX e l integrazione lato-server Elaborare una risposta AJAX È più facile lavorare con la risposta quando la richiesta è inviata in modo sincrono, perché l esecuzione dello script si arresta mentre attende la risposta. La variabile requestobj fornisce utili metodi per elaborare una risposta, fra cui consentire l accesso ai codici di stato e al testo dello stato inviato dal server. Indipendentemente dal fatto che la richiesta sia sincrona o asincrona, dovreste valutare il codice di stato per assicurarvi che la risposta abbia avuto successo (situazione indicata solitamente dal codice di stato 200). Il metodo responsetext contiene il testo della risposta ricevuta dal server web. Immaginate per esempio che un applicazione server restituisca la somma di due numeri. La chiamata dell applicazione per sommare i numeri 2 e 56 è questa: Ecco una chiamata asincrona e il recupero della risposta: requestobj.open("get", " false); requestobj.send(); if (requestobj.status == 200) { alert(requestobj.responsetext); else { alert(requestobj.statustext); In questo esempio presupponete che il requestobj sia creato utilizzando la funzione readyajax() che avete visto in precedenza. Il codice precedente chiama quindi il metodo open utilizzando una richiesta GET all URL specificato ( php?num1=2&num2=56). La richiesta viene inviata in modo sincrono perché l ultimo argomento del metodo open è false. Quindi il codice chiama il metodo send, che effettivamente invia la richiesta al server web. Quando il client riceve la risposta dal server web, chiama il metodo status per controllare il valore di stato. Se il codice di risposta è 200, che indica successo, viene mostrato il responsetext, che contiene la risposta proveniente dal server. Se il codice di stato della risposta è diverso da 200, viene visualizzato il testo di stato. Elaborare una risposta asincrona è un po più complicato. Quando una richiesta è inviata in modo asincrono, l esecuzione dello script continua. Perciò non è possibile prevedere quando sarà notificato allo script che la risposta è stata ricevuta. Per conoscere lo stato della risposta, potete utilizzare l evento onreadystatechange per attivare il codice che controlla la proprietà readystate dell evento al fine di determinare lo stato del ciclo richiesta/risposta. Ricorderete dal capitolo 17, JavaScript e XML, che la proprietà readystate ha cinque stati, descritti nella tabella 19.1.

28 Tabella 19.1 Valori della proprietà readystate Valore Descrizione Capitolo 19 Un tocco di AJAX Non inizializzato. Aperto ma non ancora chiamato. 1 Aperto. Inizializzato ma non ancora inviato. 2 Inviato. La richiesta è stata inviata. 3 In ricezione. La risposta è in fase di ricezione. 4 Caricato. La risposta è stata completamente ricevuta. Per scopi pratici, l unico stato che conta per i programmatori JavaScript e AJAX è lo stato 4 Loaded (caricato). Tentando di elaborare una risposta che presenta un valore readystate diverso da 4 viene generato un errore. Tipicamente si utilizza una funzione anonima per gestire l evento onreadystatechange per le chiamate AJAX asincrone. La funzione controlla per vedere se la proprietà readystate ha raggiunto il valore 4, quindi controlla per assicurarsi che lo stato sia 200, che indica successo. Il codice presenta questo formato: requestobj.onreadystatechange = function() { if (requestobj.readystate == 4) { if (requestobj.status == 200) { alert(requestobj.responsetext); else { alert(requestobj.statustext); Nel successivo esercizio creerete un oggetto XMLHttpRequest e invierete una richiesta a un server web per recuperare il titolo di un libro in base al suo ISBN. Avete bisogno di un server web e del codice per il server web per stampare la risposta, in quanto le richieste inviate utilizzando XMLHttpRequest sono soggette al criterio JavaScript della stessa origine. Il criterio della stessa origine prevede che le richieste vadano soltanto verso i server dello stesso dominio da cui lo script chiamante è stato caricato. In altre parole, poiché sto eseguendo lo script in questo esempio direttamente dal mio server web all indirizzo il mio script è in grado di chiamare quel server e recuperare una risposta. Se invece avete tentato di chiamare un URL su un altro server web, il criterio della stessa origine impedisce che lo script recuperi la risposta. Nota Un modo per aggirare la funzionalità di sicurezza della stessa origine è utilizzare un proxy HTTP o scrivere il programma lato-server in modo che invii una richiesta per conto del programma chiamante; questo argomento esula però dallo scopo di questo libro. Per il successivo esercizio lo script o programma eseguito sul server deve restituire la frase JavaScript Step by Step quando riceve una richiesta GET con un argomento nome/valore con il seguente valore:

29 352 Parte IV AJAX e l integrazione lato-server isbn= Nella sua versione più semplice per esempio il programma lato-server potrebbe essere il seguente quando è implementato all interno di una pagina Active Server Pages (ASP) basata su VBScript: <% dim isbn isbn=request.querystring("isbn") If isbn<>"" Then If isbn==" " Then Response.Write("JavaScript Step by Step") End If End If %> Un programma funzionalmente simile scritto in PHP sarebbe il seguente: <?php $isbn = $_GET['isbn']; if (! $isbn) { print "That request was not understood."; else if ($isbn == " ") { print "JavaScript Step by Step";?> Nel seguente esercizio l URL a cui la richiesta è inviata è predefinito, tuttavia dovete sostituire quell URL con l URL in cui si trova il vostro programma lato-server. A causa del criterio della stessa origine, il programma lato-server deve trovarsi all interno dello stesso dominio della pagina che lo chiama. Inviare e ricevere con XMLHttpRequest 1. Create il vostro programma lato-server in modo che restituisca il titolo del libro quando riceve l argomento isbn mostrato in precedenza. Potete farlo nel linguaggio che preferite (se ne avete bisogno, osservate i due esempi mostrati in precedenza). 2. Utilizzando Microsoft Visual Studio, Eclipse o un altro editor, modificate il file isbn.htm nella cartella Chapter19 dei file di esempio. 3. Nella pagina web sostituite il commento TODO con il codice in grassetto riportato di seguito (potete trovare il codice anche in isbn.txt fra i file di esempio): assicuratevi di sostituire la variabile url con l URL appropriato per il vostro programma lato-server: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " <html> <head> <title>isbn</title> </head>

30 <body> <div id="data"></div> <script type="text/javascript"> function readyajax() { try { return new XMLHttpRequest(); catch(e) { try { return new ActiveXObject("Msxml2.XMLHTTP"); catch(e) { try { return new ActiveXObject("Microsoft.XMLHTTP"); catch(e) { return "A newer browser is needed."; var requestobj = readyajax(); var url = " requestobj.open("get",url,true); requestobj.send(); requestobj.onreadystatechange = function() { if (requestobj.readystate == 4) { if (requestobj.status == 200) { alert(requestobj.responsetext); else { alert(requestobj.statustext); </script> </body> </html> Capitolo 19 Un tocco di AJAX Salvate e visualizzate in un browser web. Dovreste ricevere un avviso come il seguente: Congratulazioni! Avete elaborato il vostro primo XMLHttpRequest.

31 354 Parte IV AJAX e l integrazione lato-server Elaborare risposte XML Gli esempi di AJAX visti finora utilizzano tutti risposte in normale Hypertext Markup Language (HTML) e testo provenienti dal server web, perciò potreste recuperarle utilizzando il metodo responsetext dell oggetto XMLHttpRequest. Le applicazioni server invece possono anche restituire risposte XML, che potete elaborare nativamente utilizzando il metodo responsexml. In precedenza in questo capitolo, nel riquadro Come funziona il Web in meno di 500 parole, abbiamo visto un esempio di risposta del server web. La risposta del server conteneva questa intestazione Content-Type: Content-Type: text/html; charset=iso Per recuperare una risposta utilizzando il metodo responsexml, il server web deve inviare un Content-Type text/xml o application/xml come segue: Content-Type: application/xml Quando l oggetto XMLHttpRequest riceve XML nativo come risposta, potete utilizzare i metodi del Document Object Model (DOM) per elaborare la risposta. Il metodo responsexml storicamente ha creato problemi e utilizzarlo può generare comportamenti inaspettati, a seconda del browser e del sistema operativo. Inoltre responsexml non è ampiamente supportato quanto altri metodi JavaScript. Utilizzare responsexml significa combinare le tecniche XMLHttpRequest già viste in questo capitolo con le tecniche di analisi XML descritte nel capitolo 17. Considerate per esempio questo documento XML (chiamatelo book.xml): <?xml version="1.0" encoding="iso "?> <book> <title>javascript Step by Step</title> <isbn> </isbn> </book> La combinazione dell oggetto XMLHttpRequest e dell analisi XML porta al seguente codice, che recupera e visualizza l ISBN del documento book.xml: var requestobj = readyajax(); var url = " requestobj.open("get",url,false); requestobj.send(); if (requestobj.status == 200) { var xmldocument = requestobj.responsexml; alert(xmldocument.getelementsbytagname("isbn")[0].childnodes[0].nodevalue); else { alert(requestobj.statustext);

32 Capitolo 19 Un tocco di AJAX 355 Quando la richiesta viene completata con successo, requestobj.responsexml contiene il documento XML richiesto (book.xml). Il codice xmldocument.getelementsbytagname( isbn ) recupera un array di tag <isbn> nel documento. In questo documento ce n è uno solo; lo [0] indica il primo. La porzione.childnodes[0] del codice recupera il primo nodo figlio da quel tag <isbn>. In questo caso quello è il nodo di testo, che contiene il numero ISBN. Infine la porzione.nodevalue del codice recupera il valore di quel nodo di testo, l ISBN, che il precedente codice visualizza in una chiamata ad alert. Lavorare con JSON JavaScript Object Notation (JSON) è un modo per passare i dati nella forma di oggetti e array JavaScript nativi, anziché codificare i dati all interno di risposte XML (o HTML). JSON rappresenta un modo più efficiente di passare dati dal server al client. L analisi dell XML tramite il DOM è più complessa e perciò più lenta, mentre l analisi dei dati con codifica JSON si esegue direttamente in JavaScript. Richiamate alla mente il documento book.xml di un precedente esempio di questo capitolo. Gli stessi dati in JSON si presentano come segue: { "book": { "title": "JavaScript Step by Step", "isbn": " " Recuperare un singolo elemento è un po più facile con JSON che non con XML. Per analizzare la risposta con formattazione JSON utilizzerete la funzione JavaScript eval(). Ecco per esempio il codice per recuperare e visualizzare il titolo del libro: var requestobj = readyajax(); var url = " requestobj.open("get",url,false); requestobj.send(); if (requestobj.status == 200) { var xmldocument = eval('(' + requestobj.responsetext + ')'); alert(xmldocument.book.title); else { alert(requestobj.statustext); L utilizzo di JSON è rischioso dal punto di vista della sicurezza, in quanto impiega la funzione eval() per analizzare la risposta. La funzione eval() esegue essenzialmente il codice JavaScript ricevuto, perciò se il codice è malevolo, sarebbe comunque eseguito nel contesto dell applicazione. È vostra responsabilità assicurare che i dati che la vostra applicazione sta utilizzando con JSON siano puliti e liberi da codice malevolo che potrebbe causare problemi quando viene eseguito utilizzando eval().