SlideShare una empresa de Scribd logo
1 de 39
Descargar para leer sin conexión
Web 2.0 e AJAX 
    Augusto de Carvalho Fontes
Agenda 
•    Web 2.0 
•    Rich Internet Applications (RIA) 
•    AJAX 
•    Exemplo 
•    AJAX Toolkits e Frameworks 
•    Conclusão
Web 2.0 
•  O nome “Web 2.0” foi dado pela O’Reilly Media em 2004 
•  Novos serviços online 
   –  Britannica Online à Wikipedia 
   –  nytimes.com à Blogs 
   –  Sites pessoais à MySpace 
   –  abc.go.com à YouTube 
   –  Yahoo! Directory à del.icio.us 
•  Características 
   –  Web como uma plataforma 
   –  Inteligência Coletiva 
   –  Mashups 
   –  Melhor experiência do usuário
Web 2.0 
•  Web como uma plataforma 
  – Armazenamento e processamento no servidor 
    •  Ex: Writely, Flickr, GMail 
  – Novas formas de lucro 
  – Não há lançamento de versões, o 
    aprimoramento é contínuo 
  – Não há necessidade de portar para diversas 
    plataformas 
  – APIs Online 
    •  Google Maps API, Amazon Web Services, eBay API
Web 2.0
Web 2.0 
Web 2.0 
•  Inteligência Coletiva 
   –  Colaboração 
      •  Wikis 
      •  SourceForge.net 
      •  YouTube 
   –  Folksonomy 
      •  Metodologia de recuperação de informação 
      •  Tags (rótulos) são associados de forma colaborativa 
          –  Na taxonomia geralmente os próprios autores associam os rótulos 
      •  Ex: del.icio.us, flickr.com, last.fm, etc.
Web 2.0 
•  Inteligência Coletiva 
   –  Filtros de SPAM colaborativos 
   –  Blogs 
•  Mashups 
   –  Utiliza conteúdo de mais de uma fonte para criar um 
      novo serviço 
   –  Através de uma API ou Web Feeds (RSS, Atom, etc.) 
   –  Ex: HousingMaps (Google Maps + Craigslist) 
•  Melhor experiência do usuário 
   –  Rich Internet Applications (RIA)
Web 2.0
Web 2.0 
Rich Internet Application (RIA) 
•  Incorporar usabilidade das aplicações em desktop 
   para a Web 
  –  O programa responde de forma intuitiva e rápida 
  –  Tudo acontece naturalmente 
•  Aplicações Web tradicionais 
  –  A Web foi originalmente projetada para navegação por 
     documentos HTML 
  –  Modelo “Clique, aguarde e recarregue” 
  –  A página é transferida do servidor para o cliente e 
     recarregada a cada evento, envio de dados ou 
     navegação 
  –  Modelo de comunicação síncrono 
  –  Perda de contexto
Rich Internet Application (RIA) 
•  Modelo síncrono 
   Cliente 
   Atividade do usuário                                  Atividade do usuário                          Atividade do usuário 


                           Tr an sm is são 




                                                                                 Tr an sm is são 
                                              T ran sm is são  
   Tempo 




                                                                                                    T ran sm is são
                           Processamento 
                                                                                 Processamento 
   Servidor 
Rich Internet Application (RIA) 
•  Rich Internet Application (RIA) 
   –  A idéia não é tão recente 
   –  Java Applet (1995) 
   –  Macromedia Flash (1996) 
   –  Java WebStart 
   –  DHTML 
      •  HTML + JavaScript + CSS + DOM 
   –  DHTML com IFrame oculto 
   –  Flex 
      •  Flash + comunicação assíncrona 
   –  AJAX 
      •  DHTML + XMLHttpRequest (comunicação assíncrona)
Rich Internet Application (RIA) 
•  Modelo assíncrono 
  Cliente 
    Atividade do usuário 

                Interação                                          Interação                                                  Interação 

    Processamento                          Exibição                       Exibição                                                                Exibição




                                                                                                    o 
                                                     o 




                                                                                                                                          o 
                                                                            T ran s m is s ã
                        T ran s m is s ã




                                                                                                                  T ran s m is s ã
                                                                                               T ran s m is s ã
                                                T ran s m is s ã




                                                                                                                                     T ran s m is s ã
  Tempo 
                                                                                 o 
                             o 




                                                                                                                       o 
  Servidor             Processamento                                        Processamento                         Processamento 
AJAX 
•  Asynchronous JavaScript and XML 
  – O termo surgiu em fevereiro de 2005 no artigo 
    “Ajax: A New Approach to Web Applications” de 
    Jesse James Garrett. 
•  Exemplos 
  – Tadalist 
  – Amazon.com Diamond Search 
  – Novo Yahoo Mail Beta 
  – Google Calendar
AJAX
AJAX 
AJAX 
•  Características 
  – Modelo assíncrono 
  – Interface mais natural e intuitiva 
  – Atualização parcial da tela 
     •  Apenas os elementos que contêm novas informações 
        são atualizados 
     •  Não há perda de contexto 
  – Fluxo baseado em dados
AJAX 

Usuário                      Navegador                        Servidor 




     1: Visita uma aplicação AJAX 


                                          2: HTML/JS/CSS iniciais
AJAX 

              Event          Response 
Usuário      Handler          Handler                       Servidor 



      1: Ação      2: Requisição 



                                                                        3: Processamento 
                                                  4: Resposta 




                                         5: Atualizar Interface
AJAX 
•  Casos de uso para AJAX 
  –  Validação em tempo real com lógica no servidor 
     •  Ex: Verificar disponibilidade de um login de usuário 
  –  Auto­completar 
     •  Ex: Google Suggest 
  –  Operações Mestre­Detalhe 
     •  Ex: Carregamento de comboboxes 
  –  Componentes de interface avançados (widgets) 
     •  Ex: Árvores, menus, barra de progresso. 
  –  Notificação proveniente do servidor 
     •  Simulada através de requisições periódicas
AJAX 
•  Tecnologias Utilizadas 
  –  HTML/XHTML (Estrutura) 
     •  Maior necessidade de um documento bem formatado 
  –  CSS (Apresentação) 
     •  Permite separação da apresentação do documento (estilo) 
     •  Pode ser alterado por JavaScript 
  –  JavaScript (Comportamento) 
     •  Amplamente utilizada 
     •  Utilizado pela grande maioria dos navegadores. Não há 
        necessidade de instalação de plugins 
  –  DOM 
     •  Representa a estrutura de documentos XML e HTML
AJAX 
•  Tecnologias Utilizadas 
  – HTTP, Formulários 
     •  É uma requisição HTTP comum 
  – Programação do lado do servidor 
     •  O servidor ainda é necessário 
     •  JSP, Servlets, JSF, Struts 
  – XMLHttpRequest 
     •  Objeto JavaScript que fornece a comunicação 
        assíncrona com o servidor
AJAX 
•  XMLHttpRequest 
  –  Objeto JavaScript 
  –  Adotado pelos navegadores modernos 
     •  Primeira implementação nativa no Mozilla 1.0 (2002) 
  –  A World Wide Web Consortium publicou uma 
     especificação como “Working Draft” em 5 de abril de 
     2006 
  –  No Internet Explorer é um controle ActiveX chamado 
     MSXML 
     •  O IE7 irá suportar o objeto XMLHttpRequest de forma nativa
AJAX 
•  XMLHttpRequest 
  –  Comunica­se com o servidor utilizando requisições 
     HTTP comuns: GET/POST 
  –  Permite comunicação assíncrona 
  –  Funciona ao fundo 
     •  Não interrompe a operação do usuário 
  –  O tipo da resposta (Content­Type) pode ser: 
     •  text/xml 
     •  text/plain 
     •  text/json 
     •  text/javascript
AJAX 
•  Métodos do XMLHttpRequest 
Método                           Descrição 
open(method, URL, asyncFlag,     Abre e prepara uma requisição HTTP identificada 
username, password)              pelo método e URL. asynchFlag indica se a 
                                 comunicação deve ser assíncrona ou não. 
setRequestHeader(label, value)  Associa um valor a um cabeçalho HTTP antes de 
                                 fazer a requisição. 
send(postdata)                   Executa a requisição HTTP. 
getAllResponseHeaders()          Retorna uma lista de todos os cabeçalhos HTTP da 
                                 resposta 


getResponseHeader(label)         Retorna o cabeçalho HTTP associado ao label 
abort()                          Interrompe uma requisição que está sendo 
                                 processada. 
AJAX 
•  Propriedades do XMLHttpRequest 
Propriedade            Descrição 
onreadystatechange     Informa a função JavaScript que deve ser chamada 
                       a cada mudança de estado 
readystate             Estado atual da requisição, pode ser: 
                       0 = não iniciada 
                       1 = iniciando conexão 
                       2 = conexão estabelecida 
                       3 = em atividade (algum dado foi recebido) 
                       4 = completa 
status                 Status HTTP recebido do servidor 
                       200 = OK 
                       403 = Forbidden 
                       500 = Internal Error 
                       ... 
AJAX 
•  Propriedades do XMLHttpRequest 
Propriedade            Descrição 
responseText           Representação textual (string) dos dados enviados 
                       pelo servidor 
responseXML            Representação do documento XML enviado pelo 
                       servidor 
statusText             Representação textual (string) do status HTTP 
                       recebido do servidor (OK, Not Found, etc) 
AJAX 
•  API DOM (Document Object Model) 
  – Os navegadores mantém uma representação 
    dos documentos que estão sendo exibidos 
    •  Disponível pelo objeto JavaScript document 
  – A API DOM permite que código JavaScript 
    altere a árvore DOM programaticamente 
    •  Exemplos: 
       – Adicionar uma nova linha a uma tabela 
       – Alterar o conteúdo de uma DIV 
       – Alterar o estilo CSS de um elemento
Exemplo 
Validação em tempo real pelo 
                    servidor
AJAX Toolkits e Frameworks 
•  Tipos de soluções disponíveis hoje 
  – Bibliotecas JavaScript (lado do cliente) 
  – Frameworks de chamada remota via Proxy 
  – Componentes JSF com comportamento AJAX 
  – Wrappers 
  – Tradutor Java para JavaScript 
  – Frameworks com extensão para AJAX
AJAX Toolkits e Frameworks 

•  Bibliotecas JavaScript (lado do cliente) 
   –  Pode ser utilizada com qualquer tecnologia do lado 
      do servidor 
   –  Podem ser combinadas com outras bibliotecas 
   –  Cuida de incompatibilidades de browsers 
   –  Utiliza IFrame oculto se necessário 
   –  Captura eventos de navegação como os botões 
      avançar e voltar 
   –  Componentes de interface avançados (widgets) 
   –  API JavaScript mais fácil de usar para controle de 
      eventos, erros, etc. 
   –  Ex: Dojo Toolkit, Rico, Script.aculo.us
AJAX Toolkits e Frameworks 
•  Frameworks de chamada remota via Proxy 
  – Similar ao modelo de comunicação RPC 
    •  Arquitetura baseada em stubs e skeletons 
  – O framework gera o stub do cliente (proxy) para 
    chamadas ao código do servidor 
  – Faz o marshalling de todos os parâmetros 
  – Ex: Direct Web Remoting (DWR), JSON­RPC 
  – DWR 2.0 irá suportar AJAX Reverso 
    •  Chamada JavaScript a partir do código Java
AJAX Toolkits e Frameworks 
•  Componentes JSF com comportamento 
   AJAX 
  – Esconde toda a complexidade da programação 
    AJAX 
    •  O autor não precisa saber JavaScript 
  – Componentes JSF são reutilizáveis 
  – Ex: ajax4jsf, ICEfaces, DynaFaces
AJAX Toolkits e Frameworks 
•  Wrappers 
  – Atualmente existem vários toolkits com 
    diferentes componentes e sintaxes de uso 
  – Empacota (wrap) os componentes visuais em 
    custom tags (JSP) ou componentes JSF 
  – Tenta consolidar as diferentes bibliotecas 
    JavaScript (lado do cliente) 
    •  Depende de bibliotecas como o Dojo, DHTML 
       Goodies, Script.aculo.us. 
  – Ex: jMarki
AJAX Toolkits e Frameworks 
•  Tradutor Java para JavaScript 
  – Desenvolve a aplicação AJAX usando apenas 
    código Java 
  – Quando a aplicação é implantada, converte 
    código Java para JavaScript 
  – “Hosted Mode” – permite depuração do código 
  – Ex: Google Web Toolkit (GWT)
AJAX Toolkits e Frameworks 
•  Frameworks com extensão para AJAX 
  – Alguns Frameworks de desenvolvimento de 
    aplicação para Web estão trazendo 
    comportamento nativo ao AJAX 
  – Ex: Ruby on Rails, Echo2, Shale
Conclusão 
•  Prós 
  – Interface mais intuitiva e natural 
  – Fluxo baseado em dados (não em páginas) 
  – Não necessita de plugins 
  – Grande redução na carga na rede 
     •  Apenas os dados relevantes para a solicitação do 
        usuário são trafegados 
  – Solução RIA mais viável atualmente 
  – Diversos toolkits e frameworks estão surgindo
Conclusão 
•  Contras 
  – Aumento de complexidade 
     •  Pode ser resolvido com componentes JSF 
  – Código visível por hackers 
  – Ainda existe incompatibilidade de navegadores 
  – JavaScript é difícil de manter e depurar 
  – Existem poucos modelos de arquitetura e 
    melhores práticas 
  – Os Toolkits e Frameworks ainda estão imaturos 
     •  A maioria em versão beta
Links 
•  Writely 
    –  http://www.writely.com/ 
•  Flickr 
    –  http://www.flickr.com/ 
•  GMail 
    –  http://www.gmail.com/ 
•  HousingMaps 
    –  http://www.housingmaps.com/ 
•  TadaList 
    –  http://www.tadalist.com/ 
•  Amazon Diamond Search 
    –  http://www.amazon.com/gp/gsl/search/finder/104­3928955­ 
       0300739?ie=UTF8&redirect=true&productGroupID=loose_diamonds 
•  Novo Yahoo Mail Beta 
    –  http://whatsnew.mail.yahoo.com/ 
•  Google Calendar 
    –  http://www.google.com/calendar/
Links 
•  Google Suggest 
    –  http://www.google.com/webhp?complete=1&hl=en 
•  Dojo Toolkit 
    –  http://dojotoolkit.com/ 
•  Rico 
    –  http://openrico.org/ 
•  Script.aculo.us 
    –  http://script.aculo.us/ 
•  Direct Web Remoting (DWR) 
    –  http://getahead.ltd.uk/dwr 
•  JSON­RPC 
    –  http://json­rpc.org/ 
•  ajax4jsf 
    –  https://ajax4jsf.dev.java.net/ 
•  ICEfaces 
    –  http://www.icesoft.com/products/icefaces.html
Links 
•  DynaFaces 
    –  https://jsf­extensions.dev.java.net/nonav/mvn/slides.html 
•  DHTML Goodies 
    –  http://www.dhtmlgoodies.com/ 
•  jMarki 
    –  https://ajax.dev.java.net/ 
•  Google Web Toolkit (GWT) 
    –  http://code.google.com/webtoolkit/ 
•  Ruby on Rails 
    –  http://www.rubyonrails.org/ 
•  Echo2 
    –  http://www.nextapp.com/platform/echo2/echo/ 
•  Shale 
    –  http://struts.apache.org/struts­shale/

Más contenido relacionado

Más de elliando dias

Clojurescript slides
Clojurescript slidesClojurescript slides
Clojurescript slideselliando dias
 
Why you should be excited about ClojureScript
Why you should be excited about ClojureScriptWhy you should be excited about ClojureScript
Why you should be excited about ClojureScriptelliando dias
 
Functional Programming with Immutable Data Structures
Functional Programming with Immutable Data StructuresFunctional Programming with Immutable Data Structures
Functional Programming with Immutable Data Structureselliando dias
 
Nomenclatura e peças de container
Nomenclatura  e peças de containerNomenclatura  e peças de container
Nomenclatura e peças de containerelliando dias
 
Polyglot and Poly-paradigm Programming for Better Agility
Polyglot and Poly-paradigm Programming for Better AgilityPolyglot and Poly-paradigm Programming for Better Agility
Polyglot and Poly-paradigm Programming for Better Agilityelliando dias
 
Javascript Libraries
Javascript LibrariesJavascript Libraries
Javascript Librarieselliando dias
 
How to Make an Eight Bit Computer and Save the World!
How to Make an Eight Bit Computer and Save the World!How to Make an Eight Bit Computer and Save the World!
How to Make an Eight Bit Computer and Save the World!elliando dias
 
A Practical Guide to Connecting Hardware to the Web
A Practical Guide to Connecting Hardware to the WebA Practical Guide to Connecting Hardware to the Web
A Practical Guide to Connecting Hardware to the Webelliando dias
 
Introdução ao Arduino
Introdução ao ArduinoIntrodução ao Arduino
Introdução ao Arduinoelliando dias
 
Incanter Data Sorcery
Incanter Data SorceryIncanter Data Sorcery
Incanter Data Sorceryelliando dias
 
Fab.in.a.box - Fab Academy: Machine Design
Fab.in.a.box - Fab Academy: Machine DesignFab.in.a.box - Fab Academy: Machine Design
Fab.in.a.box - Fab Academy: Machine Designelliando dias
 
The Digital Revolution: Machines that makes
The Digital Revolution: Machines that makesThe Digital Revolution: Machines that makes
The Digital Revolution: Machines that makeselliando dias
 
Hadoop - Simple. Scalable.
Hadoop - Simple. Scalable.Hadoop - Simple. Scalable.
Hadoop - Simple. Scalable.elliando dias
 
Hadoop and Hive Development at Facebook
Hadoop and Hive Development at FacebookHadoop and Hive Development at Facebook
Hadoop and Hive Development at Facebookelliando dias
 
Multi-core Parallelization in Clojure - a Case Study
Multi-core Parallelization in Clojure - a Case StudyMulti-core Parallelization in Clojure - a Case Study
Multi-core Parallelization in Clojure - a Case Studyelliando dias
 

Más de elliando dias (20)

Clojurescript slides
Clojurescript slidesClojurescript slides
Clojurescript slides
 
Why you should be excited about ClojureScript
Why you should be excited about ClojureScriptWhy you should be excited about ClojureScript
Why you should be excited about ClojureScript
 
Functional Programming with Immutable Data Structures
Functional Programming with Immutable Data StructuresFunctional Programming with Immutable Data Structures
Functional Programming with Immutable Data Structures
 
Nomenclatura e peças de container
Nomenclatura  e peças de containerNomenclatura  e peças de container
Nomenclatura e peças de container
 
Geometria Projetiva
Geometria ProjetivaGeometria Projetiva
Geometria Projetiva
 
Polyglot and Poly-paradigm Programming for Better Agility
Polyglot and Poly-paradigm Programming for Better AgilityPolyglot and Poly-paradigm Programming for Better Agility
Polyglot and Poly-paradigm Programming for Better Agility
 
Javascript Libraries
Javascript LibrariesJavascript Libraries
Javascript Libraries
 
How to Make an Eight Bit Computer and Save the World!
How to Make an Eight Bit Computer and Save the World!How to Make an Eight Bit Computer and Save the World!
How to Make an Eight Bit Computer and Save the World!
 
Ragel talk
Ragel talkRagel talk
Ragel talk
 
A Practical Guide to Connecting Hardware to the Web
A Practical Guide to Connecting Hardware to the WebA Practical Guide to Connecting Hardware to the Web
A Practical Guide to Connecting Hardware to the Web
 
Introdução ao Arduino
Introdução ao ArduinoIntrodução ao Arduino
Introdução ao Arduino
 
Minicurso arduino
Minicurso arduinoMinicurso arduino
Minicurso arduino
 
Incanter Data Sorcery
Incanter Data SorceryIncanter Data Sorcery
Incanter Data Sorcery
 
Rango
RangoRango
Rango
 
Fab.in.a.box - Fab Academy: Machine Design
Fab.in.a.box - Fab Academy: Machine DesignFab.in.a.box - Fab Academy: Machine Design
Fab.in.a.box - Fab Academy: Machine Design
 
The Digital Revolution: Machines that makes
The Digital Revolution: Machines that makesThe Digital Revolution: Machines that makes
The Digital Revolution: Machines that makes
 
Hadoop + Clojure
Hadoop + ClojureHadoop + Clojure
Hadoop + Clojure
 
Hadoop - Simple. Scalable.
Hadoop - Simple. Scalable.Hadoop - Simple. Scalable.
Hadoop - Simple. Scalable.
 
Hadoop and Hive Development at Facebook
Hadoop and Hive Development at FacebookHadoop and Hive Development at Facebook
Hadoop and Hive Development at Facebook
 
Multi-core Parallelization in Clojure - a Case Study
Multi-core Parallelization in Clojure - a Case StudyMulti-core Parallelization in Clojure - a Case Study
Multi-core Parallelization in Clojure - a Case Study
 

Web 2.0 e AJAX

  • 1. Web 2.0 e AJAX  Augusto de Carvalho Fontes
  • 2. Agenda  •  Web 2.0  •  Rich Internet Applications (RIA)  •  AJAX  •  Exemplo  •  AJAX Toolkits e Frameworks  •  Conclusão
  • 3. Web 2.0  •  O nome “Web 2.0” foi dado pela O’Reilly Media em 2004  •  Novos serviços online  –  Britannica Online à Wikipedia  –  nytimes.com à Blogs  –  Sites pessoais à MySpace  –  abc.go.com à YouTube  –  Yahoo! Directory à del.icio.us  •  Características  –  Web como uma plataforma  –  Inteligência Coletiva  –  Mashups  –  Melhor experiência do usuário
  • 4. Web 2.0  •  Web como uma plataforma  – Armazenamento e processamento no servidor  •  Ex: Writely, Flickr, GMail  – Novas formas de lucro  – Não há lançamento de versões, o  aprimoramento é contínuo  – Não há necessidade de portar para diversas  plataformas  – APIs Online  •  Google Maps API, Amazon Web Services, eBay API
  • 6. Web 2.0  •  Inteligência Coletiva  –  Colaboração  •  Wikis  •  SourceForge.net  •  YouTube  –  Folksonomy  •  Metodologia de recuperação de informação  •  Tags (rótulos) são associados de forma colaborativa  –  Na taxonomia geralmente os próprios autores associam os rótulos  •  Ex: del.icio.us, flickr.com, last.fm, etc.
  • 7. Web 2.0  •  Inteligência Coletiva  –  Filtros de SPAM colaborativos  –  Blogs  •  Mashups  –  Utiliza conteúdo de mais de uma fonte para criar um  novo serviço  –  Através de uma API ou Web Feeds (RSS, Atom, etc.)  –  Ex: HousingMaps (Google Maps + Craigslist)  •  Melhor experiência do usuário  –  Rich Internet Applications (RIA)
  • 9. Rich Internet Application (RIA)  •  Incorporar usabilidade das aplicações em desktop  para a Web  –  O programa responde de forma intuitiva e rápida  –  Tudo acontece naturalmente  •  Aplicações Web tradicionais  –  A Web foi originalmente projetada para navegação por  documentos HTML  –  Modelo “Clique, aguarde e recarregue”  –  A página é transferida do servidor para o cliente e  recarregada a cada evento, envio de dados ou  navegação  –  Modelo de comunicação síncrono  –  Perda de contexto
  • 10. Rich Internet Application (RIA)  •  Modelo síncrono  Cliente  Atividade do usuário  Atividade do usuário  Atividade do usuário  Tr an sm is são  Tr an sm is são  T ran sm is são   Tempo  T ran sm is são Processamento  Processamento  Servidor 
  • 11. Rich Internet Application (RIA)  •  Rich Internet Application (RIA)  –  A idéia não é tão recente  –  Java Applet (1995)  –  Macromedia Flash (1996)  –  Java WebStart  –  DHTML  •  HTML + JavaScript + CSS + DOM  –  DHTML com IFrame oculto  –  Flex  •  Flash + comunicação assíncrona  –  AJAX  •  DHTML + XMLHttpRequest (comunicação assíncrona)
  • 12. Rich Internet Application (RIA)  •  Modelo assíncrono  Cliente  Atividade do usuário  Interação  Interação  Interação  Processamento  Exibição  Exibição  Exibição o  o  o  T ran s m is s ã T ran s m is s ã T ran s m is s ã T ran s m is s ã T ran s m is s ã T ran s m is s ã Tempo  o  o  o  Servidor  Processamento  Processamento  Processamento 
  • 13. AJAX  •  Asynchronous JavaScript and XML  – O termo surgiu em fevereiro de 2005 no artigo  “Ajax: A New Approach to Web Applications” de  Jesse James Garrett.  •  Exemplos  – Tadalist  – Amazon.com Diamond Search  – Novo Yahoo Mail Beta  – Google Calendar
  • 15. AJAX  •  Características  – Modelo assíncrono  – Interface mais natural e intuitiva  – Atualização parcial da tela  •  Apenas os elementos que contêm novas informações  são atualizados  •  Não há perda de contexto  – Fluxo baseado em dados
  • 16. AJAX  Usuário  Navegador  Servidor  1: Visita uma aplicação AJAX  2: HTML/JS/CSS iniciais
  • 17. AJAX  Event  Response  Usuário  Handler  Handler  Servidor  1: Ação  2: Requisição  3: Processamento  4: Resposta  5: Atualizar Interface
  • 18. AJAX  •  Casos de uso para AJAX  –  Validação em tempo real com lógica no servidor  •  Ex: Verificar disponibilidade de um login de usuário  –  Auto­completar  •  Ex: Google Suggest  –  Operações Mestre­Detalhe  •  Ex: Carregamento de comboboxes  –  Componentes de interface avançados (widgets)  •  Ex: Árvores, menus, barra de progresso.  –  Notificação proveniente do servidor  •  Simulada através de requisições periódicas
  • 19. AJAX  •  Tecnologias Utilizadas  –  HTML/XHTML (Estrutura)  •  Maior necessidade de um documento bem formatado  –  CSS (Apresentação)  •  Permite separação da apresentação do documento (estilo)  •  Pode ser alterado por JavaScript  –  JavaScript (Comportamento)  •  Amplamente utilizada  •  Utilizado pela grande maioria dos navegadores. Não há  necessidade de instalação de plugins  –  DOM  •  Representa a estrutura de documentos XML e HTML
  • 20. AJAX  •  Tecnologias Utilizadas  – HTTP, Formulários  •  É uma requisição HTTP comum  – Programação do lado do servidor  •  O servidor ainda é necessário  •  JSP, Servlets, JSF, Struts  – XMLHttpRequest  •  Objeto JavaScript que fornece a comunicação  assíncrona com o servidor
  • 21. AJAX  •  XMLHttpRequest  –  Objeto JavaScript  –  Adotado pelos navegadores modernos  •  Primeira implementação nativa no Mozilla 1.0 (2002)  –  A World Wide Web Consortium publicou uma  especificação como “Working Draft” em 5 de abril de  2006  –  No Internet Explorer é um controle ActiveX chamado  MSXML  •  O IE7 irá suportar o objeto XMLHttpRequest de forma nativa
  • 22. AJAX  •  XMLHttpRequest  –  Comunica­se com o servidor utilizando requisições  HTTP comuns: GET/POST  –  Permite comunicação assíncrona  –  Funciona ao fundo  •  Não interrompe a operação do usuário  –  O tipo da resposta (Content­Type) pode ser:  •  text/xml  •  text/plain  •  text/json  •  text/javascript
  • 23. AJAX  •  Métodos do XMLHttpRequest  Método Descrição  open(method, URL, asyncFlag,  Abre e prepara uma requisição HTTP identificada  username, password)  pelo método e URL. asynchFlag indica se a  comunicação deve ser assíncrona ou não.  setRequestHeader(label, value)  Associa um valor a um cabeçalho HTTP antes de  fazer a requisição.  send(postdata)  Executa a requisição HTTP.  getAllResponseHeaders()  Retorna uma lista de todos os cabeçalhos HTTP da  resposta  getResponseHeader(label)  Retorna o cabeçalho HTTP associado ao label  abort()  Interrompe uma requisição que está sendo  processada. 
  • 24. AJAX  •  Propriedades do XMLHttpRequest  Propriedade Descrição  onreadystatechange  Informa a função JavaScript que deve ser chamada  a cada mudança de estado  readystate  Estado atual da requisição, pode ser:  0 = não iniciada  1 = iniciando conexão  2 = conexão estabelecida  3 = em atividade (algum dado foi recebido)  4 = completa  status  Status HTTP recebido do servidor  200 = OK  403 = Forbidden  500 = Internal Error  ... 
  • 25. AJAX  •  Propriedades do XMLHttpRequest  Propriedade Descrição  responseText  Representação textual (string) dos dados enviados  pelo servidor  responseXML  Representação do documento XML enviado pelo  servidor  statusText  Representação textual (string) do status HTTP  recebido do servidor (OK, Not Found, etc) 
  • 26. AJAX  •  API DOM (Document Object Model)  – Os navegadores mantém uma representação  dos documentos que estão sendo exibidos  •  Disponível pelo objeto JavaScript document  – A API DOM permite que código JavaScript  altere a árvore DOM programaticamente  •  Exemplos:  – Adicionar uma nova linha a uma tabela  – Alterar o conteúdo de uma DIV  – Alterar o estilo CSS de um elemento
  • 28. AJAX Toolkits e Frameworks  •  Tipos de soluções disponíveis hoje  – Bibliotecas JavaScript (lado do cliente)  – Frameworks de chamada remota via Proxy  – Componentes JSF com comportamento AJAX  – Wrappers  – Tradutor Java para JavaScript  – Frameworks com extensão para AJAX
  • 29. AJAX Toolkits e Frameworks  •  Bibliotecas JavaScript (lado do cliente)  –  Pode ser utilizada com qualquer tecnologia do lado  do servidor  –  Podem ser combinadas com outras bibliotecas  –  Cuida de incompatibilidades de browsers  –  Utiliza IFrame oculto se necessário  –  Captura eventos de navegação como os botões  avançar e voltar  –  Componentes de interface avançados (widgets)  –  API JavaScript mais fácil de usar para controle de  eventos, erros, etc.  –  Ex: Dojo Toolkit, Rico, Script.aculo.us
  • 30. AJAX Toolkits e Frameworks  •  Frameworks de chamada remota via Proxy  – Similar ao modelo de comunicação RPC  •  Arquitetura baseada em stubs e skeletons  – O framework gera o stub do cliente (proxy) para  chamadas ao código do servidor  – Faz o marshalling de todos os parâmetros  – Ex: Direct Web Remoting (DWR), JSON­RPC  – DWR 2.0 irá suportar AJAX Reverso  •  Chamada JavaScript a partir do código Java
  • 31. AJAX Toolkits e Frameworks  •  Componentes JSF com comportamento  AJAX  – Esconde toda a complexidade da programação  AJAX  •  O autor não precisa saber JavaScript  – Componentes JSF são reutilizáveis  – Ex: ajax4jsf, ICEfaces, DynaFaces
  • 32. AJAX Toolkits e Frameworks  •  Wrappers  – Atualmente existem vários toolkits com  diferentes componentes e sintaxes de uso  – Empacota (wrap) os componentes visuais em  custom tags (JSP) ou componentes JSF  – Tenta consolidar as diferentes bibliotecas  JavaScript (lado do cliente)  •  Depende de bibliotecas como o Dojo, DHTML  Goodies, Script.aculo.us.  – Ex: jMarki
  • 33. AJAX Toolkits e Frameworks  •  Tradutor Java para JavaScript  – Desenvolve a aplicação AJAX usando apenas  código Java  – Quando a aplicação é implantada, converte  código Java para JavaScript  – “Hosted Mode” – permite depuração do código  – Ex: Google Web Toolkit (GWT)
  • 34. AJAX Toolkits e Frameworks  •  Frameworks com extensão para AJAX  – Alguns Frameworks de desenvolvimento de  aplicação para Web estão trazendo  comportamento nativo ao AJAX  – Ex: Ruby on Rails, Echo2, Shale
  • 35. Conclusão  •  Prós  – Interface mais intuitiva e natural  – Fluxo baseado em dados (não em páginas)  – Não necessita de plugins  – Grande redução na carga na rede  •  Apenas os dados relevantes para a solicitação do  usuário são trafegados  – Solução RIA mais viável atualmente  – Diversos toolkits e frameworks estão surgindo
  • 36. Conclusão  •  Contras  – Aumento de complexidade  •  Pode ser resolvido com componentes JSF  – Código visível por hackers  – Ainda existe incompatibilidade de navegadores  – JavaScript é difícil de manter e depurar  – Existem poucos modelos de arquitetura e  melhores práticas  – Os Toolkits e Frameworks ainda estão imaturos  •  A maioria em versão beta
  • 37. Links  •  Writely  –  http://www.writely.com/  •  Flickr  –  http://www.flickr.com/  •  GMail  –  http://www.gmail.com/  •  HousingMaps  –  http://www.housingmaps.com/  •  TadaList  –  http://www.tadalist.com/  •  Amazon Diamond Search  –  http://www.amazon.com/gp/gsl/search/finder/104­3928955­  0300739?ie=UTF8&redirect=true&productGroupID=loose_diamonds  •  Novo Yahoo Mail Beta  –  http://whatsnew.mail.yahoo.com/  •  Google Calendar  –  http://www.google.com/calendar/
  • 38. Links  •  Google Suggest  –  http://www.google.com/webhp?complete=1&hl=en  •  Dojo Toolkit  –  http://dojotoolkit.com/  •  Rico  –  http://openrico.org/  •  Script.aculo.us  –  http://script.aculo.us/  •  Direct Web Remoting (DWR)  –  http://getahead.ltd.uk/dwr  •  JSON­RPC  –  http://json­rpc.org/  •  ajax4jsf  –  https://ajax4jsf.dev.java.net/  •  ICEfaces  –  http://www.icesoft.com/products/icefaces.html
  • 39. Links  •  DynaFaces  –  https://jsf­extensions.dev.java.net/nonav/mvn/slides.html  •  DHTML Goodies  –  http://www.dhtmlgoodies.com/  •  jMarki  –  https://ajax.dev.java.net/  •  Google Web Toolkit (GWT)  –  http://code.google.com/webtoolkit/  •  Ruby on Rails  –  http://www.rubyonrails.org/  •  Echo2  –  http://www.nextapp.com/platform/echo2/echo/  •  Shale  –  http://struts.apache.org/struts­shale/