Aprile 2008




              Ajax: le basi




                       Alessandro M. Martellone
                       Ana...
Di cosa parleremo?
• Cos’è Ajax.
• Le motivazioni di Ajax.
• Un esempio di comunicazione
  client/server.
• Casi d’uso.
• ...
Cos’è Ajax?
• Ajax sta per Asynchronous JavaScript And XML.
• Ajax non è un nuovo linguaggio di programmazione.
• E’ un nu...
Perché Ajax?
• L’HTML e HTTP non permettono di
  costruire applicazioni interattive.
• Ajax ci permette di costruire appli...
Un esempio di comunicazione
          client/server
• Comunicazione request/response basata
  solo su HTTP.

   Pagina 1

...
Un esempio di comunicazione
            client/server
• Comunicazione request/response basata
  su HTTP e Ajax.

         ...
Casi d’uso
• Google suggest.



• iGoogle.




                          7
Casi d’uso
• Pagine gialle.




                           8
Esempio di utilizzo
•Innanzitutto bisogna creare un oggetto XMLHttpRequest utilizzando
JavaScript per poter utilizzare l’o...
Esempio di utilizzo : una semplice
            richiesta
 •Abbiamo:
    •Una semplice pagina html con un singolo pulsante
...
Esempio di utilizzo : una semplice
            richiesta


                            Reference all’oggetto XMLHttpReques...
Esempio di utilizzo : una semplice
            richiesta
                  Stato della richiesta. 0 = non inizializzato,
 ...
Riferimenti
• http://www.w3schools.com/Ajax/Default.Asp
• http://courses.coreservlets.com/Course-
  Materials/ajax.html
• ...
Upcoming SlideShare
Loading in …5
×

Ajax

838 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
838
On SlideShare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
19
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Ajax

  1. 1. Aprile 2008 Ajax: le basi Alessandro M. Martellone Analista programmatore a.martellone@gmail.com 1
  2. 2. Di cosa parleremo? • Cos’è Ajax. • Le motivazioni di Ajax. • Un esempio di comunicazione client/server. • Casi d’uso. • Esempio. 2
  3. 3. Cos’è Ajax? • Ajax sta per Asynchronous JavaScript And XML. • Ajax non è un nuovo linguaggio di programmazione. • E’ un nuovo modo di utilizzare delle tecnologie e degli standard già esistenti. – Html e css. – DOM (Document Object Model) manipolato con Javascript. – L’oggetto XMLHttpRequest per lo scambio di informazioni tra il browser e il web server. – In genere è utilizzato XML per lo scambio dei dati, anche se è possibile utilizzare del semplice testo oppure un file HTML. 3
  4. 4. Perché Ajax? • L’HTML e HTTP non permettono di costruire applicazioni interattive. • Ajax ci permette di costruire applicazioni web più user-friendly e più veloci. 4
  5. 5. Un esempio di comunicazione client/server • Comunicazione request/response basata solo su HTTP. Pagina 1 Pagina 2 Chiamata sincrona: il client aspetta 5 la risposta del server.
  6. 6. Un esempio di comunicazione client/server • Comunicazione request/response basata su HTTP e Ajax. Pagina 1 Nota: è possibile diminuire il traffico con il server. Il client non invia al server un’intera pagina html, ma solo una porzione di dati; ad esempio 6 solo un campo di un form.
  7. 7. Casi d’uso • Google suggest. • iGoogle. 7
  8. 8. Casi d’uso • Pagine gialle. 8
  9. 9. Esempio di utilizzo •Innanzitutto bisogna creare un oggetto XMLHttpRequest utilizzando JavaScript per poter utilizzare l’oggetto per l’invio delle richieste e l’elaborazione delle risposte. •Explorer lo implementa come un ActiveX, Firefox, Safari e Opera come un oggetto JavaScript nativo. •Creazione di un’istanza dell’oggetto XMLHttpRequest 9
  10. 10. Esempio di utilizzo : una semplice richiesta •Abbiamo: •Una semplice pagina html con un singolo pulsante •Selezionando il pulsante si avvia una richiesta asincrona al server. •Il server risponde inviando un file di testo statico.(potrebbe essere anche una stringa, una pagina HTML, un messaggio in XML). •La risposta è visualizzata nella pagina HTML. 10
  11. 11. Esempio di utilizzo : una semplice richiesta Reference all’oggetto XMLHttpRequest La funzione che viene chiamata all’onClick del bottone. Onreadystatechange: gestore degli eventi (interviene ad ogni cambiamento di stato) Imposta la chiamata al server. Si imposta il metodo da utilizzare (es. GET) e l’url da richiamare (simpleResponse.xml). True indica che la chiamata è asincrona. send: invia la chiamata al server 11
  12. 12. Esempio di utilizzo : una semplice richiesta Stato della richiesta. 0 = non inizializzato, 1=caricamento in corso, 2=caricato,3=interattivo, 4=completo. Codice dello stato HTTP dal server (200 OK, 404 pagina non trovata, ecc.) Risposta sotto forma di stringa di testo (responseXML: risposta dal server in XML). 12
  13. 13. Riferimenti • http://www.w3schools.com/Ajax/Default.Asp • http://courses.coreservlets.com/Course- Materials/ajax.html • http://www.webaim.org/techniques/ajax/ • http://tomasp.net/fswebtools/files/fswebtoolkit_v1 .pdf • Ajax – La grande guida, Asleson R., Schutta T. N., Mondadori Informatica, 2006 13

×