Ajax
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
371
On Slideshare
371
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
2
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1.  AJAX sta per Asynchronous Javascript and XML Molti pensano sia un linguaggio mentre invece è una tecnica Esiste da molti anni, ma con altro nome e con altra forma E’ il risultato e allo stesso tempo il fautore dello sviluppo del web nella forma che conosciamo come “Web 2.0” Raggruppa diverse tecnologie e linguaggi per ottenere lo scopo principale, ovvero lo sviluppo web performante 2 AJAX
  • 2.  Dal 2000 in poi, il web ha subito una evoluzione sempre più notevole in termini di tecnologie Le infrastrutture più capienti hanno creato i presupposti per uno sviluppo web più accurato e più complesso Il web ha subito una evoluzione tale che oggi, con il concetto di web 2.0, possiamo dire che internet è diventata una vera e propria piattaforma applicativa 3 AJAX
  • 3.  Questa crescita passa per AJAX in maniera rilevante Il termine AJAX (Asynchronous Javascript and XML) è stato coniato nel 2005 da Jesse James Garrett di Adaptive Path LLC Garrett pubblicò un articolo che si chiamava “Ajax: A New Approach to Web Applications” Questo articolo ancora oggi è disponibilehttp://www.adaptivepath.com/ideas/essays/archives/000385.php 4 AJAX
  • 4.  Garrett era dell’avviso che il divario tra le applicazioni tradizionali in locale e quelle web stesse sempre più diminuendo Il modello citato era Google e l’articolo originale citava:Google Suggest and Google Maps are two examples of a newapproach to web applications that we at Adaptive Path havebeen calling Ajax.The name is shorthand for Asynchronous JavaScript + XML,and it represents a fundamental shift in what’s possible onthe Web. 5 AJAX
  • 5.  Da quel momento in poi la stessa rete ritenne valido il termine AJAX per indicare qualcosa che rappresentava il contesto evolutivo del web Il numero di articoli e citazioni di questo termine aumentarono in maniera esponenziale Le applicazioni, intese sempre più come rich client applications lato web, erano state identificate come prodotto di una elaborazione asincrona che avesse come attori principali Javascript e XML In seguito, XML verrà spesso rimpiazzato con JSON 6 AJAX
  • 6.  Quando nel 1990 un certo Tim Berners-Lee ideò il WWW inteso come ragnatela di informazioni e siti web collegati tra loro attraverso link, non poteva immaginare questa evoluzione Con l’evoluzione dei siti e l’introduzione di un linguaggio di scripting lato client così potente come Javascript, il web progredì in maniera velocissima Le pagine web divennero ben presto pesanti, per la logica di funzionamento che prevedeva una richiesta e una risposta 7 AJAX
  • 7.  La risposta ottenuta dal server web era completa della parte grafica, che in pratica corrispondeva alla maggioranza del peso dei dati ricevuti dal client L’idea di base fu quindi quella di disaccoppiare queste parti La parte grafica, che era la parte rilevante, andava necessariamente staccata da quella dei dati, minoritaria Questo fu possibile proprio grazie a Javascript, che consentiva una capacità di azione e interazione lato client notevole I dati venivano richiesti al server e la comunicazione avveniva con l’ausilio di XML 8 AJAX
  • 8.  Tanti non sanno che AJAX è nato (come tecnica) moltissimi anni fa L’anno di riferimento era il 1996 circa Allora si usava la tecnica del “frame nascosto” per consentire una risposta veloce al minimo della interazione visiva tra client e server 9 AJAX
  • 9.  Il meccanismo era basato sulla presenza di un frame che si occupasse solo della logica di comunicazione da/verso il server Un frame normalmente con larghezza o altezza zero e non ridimensionabile, veniva usato come broker di informazioni Questo consentiva, tramite un linguaggio come Javascript e tramite il DOM, una rappresentazione più fluida e meno pesante dal punto di vista dell’esperienza utente 10 AJAX
  • 10.  Tutto il funzionamento lato client si basa su un “linguaggio” noto come JavaScript Senza il suo ausilio non sarebbe stato possibile tutto questo Ma JavaScript da solo non è sufficiente Ha bisogno di un altro “componente” che si occupa di tutta la parte fondamentale cioè della comunicazione lato server Questo componente si chiama XMLHttpRequest ed è una 11 classe che è stata sviluppata ad hoc per questo modello AJAX
  • 11.  JavaScript è IL linguaggio di scripting per il Web La sua notorietà e la sua diffusione sono tali che ogni giorno milioni di pagine su internet girano grazie a questo linguaggio Questa diffusione è dovuta anche alla sua notevole semplicità E’ pienamente funzionante in tutti i browser esistenti JavaScript è un linguaggio di scripting lato client, nato con lo scopo di interagire con le pagine HTML Si posiziona normalmente all’interno delle pagine HTML E’ un linguaggio interpretato (ovvero il browser lo interpreta direttamente) e per questo non necessita di compilazione 12 JavaScript
  • 12.  XMLHttpRequest è il componente che si occupa del colloquio con il server web Si posiziona “dietro” all’interfaccia utente e svolge un ruolo fondamentale per il funzionamento degli applicativi in AJAX La prima versione di questo componente fu sviluppata da Microsoft, ed era in forma di ActiveX e si chiamava XMLHttp Venne molto impiegato per realizzare applicativi con il modello web chiamato del “frame nascosto” Veniva distribuito con la libreria nota con il nome di MSXML Le potenzialità erano notevoli, e tramite JavaScript aumentavano13 JavaScript
  • 13.  Vista la potenza di XMLHttp l’interesse nelle comunità di sviluppatori crebbero notevolmente verso questo componente Tuttavia questi era in forma di ActiveX quindi eseguibile solo in IE Per questo motivo gli sviluppatori del progetto open source Mozilla decisero di realizzare un porting di XMLHttp che non fosse in forma di ActiveX, e che quindi potesse girare in ogni browser Questo porting consentì di realizzare una libreria nota con il nome di XMLHttpRequest, che tramite una classe avente lo stesso nome, consentivano di realizzare questo livello di isolamento La realizzazione di questo porting diede vita alla vera era di AJAX14 JavaScript
  • 14. Modello Web Tradizionale HTML, Images, CSS, JavaScript, Data Response Data Data Request HTTP Request Database Web Browser Web Server Modello Web AJAX HTML, CSS Data Transfer Data Response User AJAX Interface Engine Javascript HTTP Request Data Request Web Server Database 15 Web Browser AJAX
  • 15.  Traffico Minimo  Non si perde tempo ogni volta a ricaricare la parte grafica della pagina  Il caricamento dell’interfaccia utente può richiedere qualche secondo inizialmente che viene poi ripagato dalla velocità di esecuzione dell’applicativo web  La quantità effettiva di dati che viaggiano è molto ridotta in quanto composta da soli dati e non da parti inutili 16 AJAX
  • 16.  Interfaccia Utente  Grazie al supporto del linguaggio JavaScript l’applicativo web si arricchisce notevolmente rispetto al modello web tradizionale  L’utente dispone di una serie di funzionalità molto simile alle funzionalità di un applicativo desktop  Le parti dell’applicativo possono essere manipolate (drag&drop, effetti grafici)  Si dispone delle funzionalità da tastiera 17 AJAX
  • 17.  Possibilità di reingegnerizzazione  Il modello di sviluppo web basato su AJAX si associa quasi sempre al modello di sviluppo basato su servizi  Le funzionalità disponibili sull’applicativo vengono isolate su strati disponibili per il riuso (Web Services, Servizi WCF)  Questo consente, se necessario, di modificare in parte (o volendo anche totalmente) la parte di interfaccia utente senza dover mettere più mano alla logica dell’applicativo (business logic) 18 AJAX
  • 18.  Accessibilità  In base a questa architettura modulare è possibile introdurre dei canoni di accessibilità maggiormente aderenti agli standard  L’utenza può essere di diverso tipo e con diverse esigenze  Quindi possono esserci anche più “interfacce utente” in base alla tipologia di utente che utilizza l’applicativo web 19 AJAX
  • 19.  Abbiamo detto che AJAX è una tecnica di sviluppo web e non un linguaggio di sviluppo Quindi come tale necessita dell’impiego di diverse tecnologie:  HTML/XHTML: per realizzare la struttura delle pagine  CSS: per fornire stili e formattazioni grafiche  DOM: per consentire l’accesso alle parti del documento  XML/JSON: per realizzare lo scambio dei dati  XSLT: per trasformare XML in XHTML (con l’ausilio dei CSS)  XMLHttp/XMLHttpRequest: il vero motore di AJAX  JavaScript: il linguaggio di scripting di AJAX 20 AJAX