Web 2.0 e AJAX

1. Web 2.0 e AJAX Web 2.0 e AJAX 
Augusto de Carvalho Fontes

2. Agenda Agenda 
• Web 2.0 
• Rich Internet Applications (RIA) 
• AJAX 
• Exemplo 
• AJAX Toolkits e Frameworks 
• Conclusão

3. Web 2.0 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 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

5. Web 2.0 Web 2.0

6. 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.

7. Web 2.0 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)

8. Web 2.0 Web 2.0

9. Rich Internet Application (RIA) 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) Rich Internet Application (RIA) 
• Modelo síncrono 
Tempo 
Cliente 
Servidor 
Atividade do usuário  Atividade do usuário  Atividade do usuário 
Processamento 
Processamento 
Transmissão 
Transmissão 
Transmissão 
Transmissão

11. Rich Internet Application (RIA) 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) Rich Internet Application (RIA) 
• Modelo assíncrono 
Tempo 
Cliente 
Servidor 
Atividade do usuário 
Processamento 
Transmissão 
Transmissão 
Processamento 
Processamento 
Transmissão 
Transmissão 
Processamento 
Transmissão 
Transmissão 
Interação 
Exibição 
Interação  Interação 
Exibição  Exibição

13. AJAX 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

14. AJAX AJAX

15. 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

16. AJAX AJAX 
Usuário  Navegador  Servidor 
1: Visita uma aplicação AJAX 
2: HTML/JS/CSS iniciais

17. AJAX AJAX 
Usuário 
Event 
Handler 
Servidor 
1: Ação 
3: Processamento 
Response 
Handler 
2: Requisição 
4: Resposta 
5: Atualizar Interface

18. AJAX 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 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 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 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 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 AJAX 
• Métodos do XMLHttpRequest 
Interrompe uma requisição que está sendo 
processada. 
abort() 
Retorna o cabeçalho HTTP associado ao
 label 
getResponseHeader(label) 
Retorna uma lista de todos os cabeçalhos HTTP da 
resposta 
getAllResponseHeaders() 
Executa a requisição HTTP. send(postdata) 
Associa um valor a um cabeçalho HTTP antes de 
fazer a requisição. 
setRequestHeader(label, value) 
Abre e prepara uma requisição HTTP identificada 
pelo método e URL. asynchFlag indica se a 
comunicação deve ser assíncrona ou não. 
open(method, URL, asyncFlag, 
username, password) 
Descrição Método

24. AJAX AJAX 
• Propriedades do XMLHttpRequest 
Status HTTP recebido do servidor 
200 = OK 
403 = Forbidden 
500 = Internal Error 
... 
status 
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 
readystate 
Informa a função JavaScript que deve ser chamada 
a cada mudança de estado 
onreadystatechange 
Descrição Propriedade

25. AJAX AJAX 
• Propriedades do XMLHttpRequest 
Representação textual (string) do status HTTP 
recebido do servidor (OK, Not Found, etc) 
statusText 
Representação do documento XML enviado pelo 
servidor 
responseXML 
Representação textual (string) dos dados enviados 
pelo servidor 
responseText 
Descrição Propriedade

26. AJAX 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

27. Exemplo Exemplo 
Validação em tempo real pelo 
servidor

28. AJAX Toolkits e Frameworks 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 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 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 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 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 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 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 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 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 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 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 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/