Iniciativa Globalcode Introdução a AJAX Open-source Education
Palestrantes Jorge Diz [email_address] Melissa Villela [email_address]
Agenda  <ul><li>Histórico </li></ul><ul><li>O que é AJAX ? </li></ul><ul><li>Princípios </li></ul><ul><li>Como funciona? <...
Histórico <ul><li>Web “1.0” (até 2004) </li></ul><ul><ul><li>Páginas dinâmicas </li></ul></ul><ul><ul><ul><li>CGI (no serv...
Histórico <ul><li>Web 2.0 (2005 em diante ) </li></ul><ul><ul><li>A web como plataforma </li></ul></ul><ul><ul><li>O softw...
Agenda  <ul><li>Princípios </li></ul><ul><li>Histórico </li></ul><ul><li>O Que é AJAX </li></ul><ul><li>Princípios </li></...
O que é AJAX? <ul><li>Segundo Jesse James Garrett (inventor do termo) : </li></ul><ul><li>“ AJAX não é uma tecnologia. São...
O que é AJAX? <ul><li>Traduzindo ... </li></ul><ul><li>AJAX (fev/2005): “Advanced JavaScript, Asynchronous XMLHttpRequest”...
O que é AJAX? <ul><li>... traduzindo ... </li></ul><ul><li>Assíncrono: modo de operação de um protocolo em que o solicitan...
O que é AJAX? <ul><li>Em outras palavras ... </li></ul><ul><li>AJAX é um modelo de programação ... </li></ul><ul><li>…  pa...
O que é AJAX ? <ul><li>Princípios </li></ul><ul><ul><li>O browser hospeda uma aplicação, não apenas “conteúdo” </li></ul><...
O que  não  é AJAX? <ul><li>Apenas o uso de HTML dinâmico (DHTML) </li></ul><ul><li>Apenas o uso de JavaScript </li></ul><...
Agenda  <ul><li>O que é AJAX? </li></ul><ul><li>Casos de sucesso </li></ul><ul><li>Como funciona? </li></ul><ul><li>Vantag...
Como funciona? Modelo clássico de sistemas web
Como funciona? Utilizando Ajax
Como funciona? <ul><li>Requisições de HTTP assíncronas </li></ul><ul><li>Mecanismo para ActiveX no IE </li></ul><ul><li>if...
Como funciona? Requisições de HTTP assíncronas (cont.) Também são utilizadas no ambiente do servidor (para acesso assíncro...
Agenda  <ul><li>O que é AJAX? </li></ul><ul><li>Casos de sucesso </li></ul><ul><li>Como funciona? </li></ul><ul><li>Vantag...
Vantagens <ul><li>Aplicações com menor tempo de resposta em relação a arquiteturas clássicas </li></ul><ul><ul><li>Não é n...
Vantagens <ul><li>Viabiliza interação com o servidor </li></ul><ul><ul><li>Dados carregados sob demanda, sem onerar o carr...
Vantagens Modelo clássico de sistemas web
Vantagens Utilizando Ajax
Vantagens
Desvantagens <ul><li>Um grande número de decisões sobre a definição de arquitetura:  </li></ul><ul><ul><li>Componentes cen...
Desvantagens <ul><li>Quebra do modelo de navegação da Web </li></ul><ul><ul><li>Favoritos, Voltar, Cache, Logs: outro mode...
Agenda  <ul><li>O que é AJAX? </li></ul><ul><li>Casos de sucesso </li></ul><ul><li>Como funciona? </li></ul><ul><li>Vantag...
Implementação 1  var  request; 2  3  function  sendRequest(url) { 4  5  //Inicializa o objeto XMLHttpRequest para o Mozill...
Implementação 41  function  preencheComboCidade() { 46  //Faz a leitura do documento XML recebido 47  var  response = requ...
Agenda  <ul><li>O que é AJAX? </li></ul><ul><li>Casos de sucesso </li></ul><ul><li>Como funciona? </li></ul><ul><li>Vantag...
Ferramentas <ul><li>Lado cliente: JavaScript </li></ul><ul><ul><li>Bibliotecas de uso geral </li></ul></ul><ul><ul><li>Bib...
Casos de sucesso <ul><li>Start.com ( http://www.start.com/3/) </li></ul><ul><li>Google   Mail </li></ul><ul><li>Google   G...
Agenda  <ul><li>O que é AJAX? </li></ul><ul><li>Casos de sucesso </li></ul><ul><li>Como funciona? </li></ul><ul><li>Vantag...
Casos de sucesso <ul><li>http://www.marcogomes.com/wallpapr/  (Brasileiro) </li></ul><ul><li>Kiko( http://www.kiko.com ) <...
Demo
Upcoming SlideShare
Loading in...5
×

introdução a ajax

3,541
-1

Published on

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

No Downloads
Views
Total Views
3,541
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
132
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

introdução a ajax

  1. 1. Iniciativa Globalcode Introdução a AJAX Open-source Education
  2. 2. Palestrantes Jorge Diz [email_address] Melissa Villela [email_address]
  3. 3. Agenda <ul><li>Histórico </li></ul><ul><li>O que é AJAX ? </li></ul><ul><li>Princípios </li></ul><ul><li>Como funciona? </li></ul><ul><li>Vantagens e Desvantagens </li></ul><ul><li>Casos de sucesso </li></ul><ul><li>Ferramentas </li></ul><ul><li>Demo </li></ul>
  4. 4. Histórico <ul><li>Web “1.0” (até 2004) </li></ul><ul><ul><li>Páginas dinâmicas </li></ul></ul><ul><ul><ul><li>CGI (no servidor) em Perl, C, Korn shell </li></ul></ul></ul><ul><ul><ul><li>Client-side scripting: JavaScript, VBScript </li></ul></ul></ul><ul><ul><ul><li>Server pages: ASP, JSP, PHP </li></ul></ul></ul><ul><ul><li>Aplicações web baseadas em páginas </li></ul></ul><ul><ul><ul><li>Frameworks: Struts, JSF, Spring </li></ul></ul></ul><ul><ul><li>Sites como “silos” de informação. </li></ul></ul>
  5. 5. Histórico <ul><li>Web 2.0 (2005 em diante ) </li></ul><ul><ul><li>A web como plataforma </li></ul></ul><ul><ul><li>O software como serviço </li></ul></ul><ul><ul><li>Desenvolvimento participativo </li></ul></ul><ul><ul><li>Atualização permanente </li></ul></ul><ul><ul><li>Empresas de sucesso são mais facilitadoras que controladoras </li></ul></ul><ul><ul><li>Software--> infoware (foco nos dados) </li></ul></ul><ul><ul><li>Composição de serviços </li></ul></ul><ul><ul><li>Interfaces ricas (AJAX !) </li></ul></ul>
  6. 6. Agenda <ul><li>Princípios </li></ul><ul><li>Histórico </li></ul><ul><li>O Que é AJAX </li></ul><ul><li>Princípios </li></ul><ul><li>Como funciona? </li></ul><ul><li>Vantagens e Desvantagens </li></ul><ul><li>Casos de sucesso </li></ul><ul><li>Ferramentas </li></ul><ul><li>Demo </li></ul>
  7. 7. O que é AJAX? <ul><li>Segundo Jesse James Garrett (inventor do termo) : </li></ul><ul><li>“ AJAX não é uma tecnologia. São, na verdade, várias tecnologias, [...] juntando-se de maneiras novas e poderosas. AJAX incorpora:” </li></ul><ul><li>apresentação baseada em padrões utilizando XHTML e CSS; </li></ul><ul><li>display e interação dinâmicos utilizando o DOM; </li></ul><ul><li>intercâmbio e manipulação de dados usando XML e XSLT </li></ul><ul><li>recuperação assíncrona de dados usando XHR; </li></ul><ul><li>e JavaScript amarrando tudo isso junto” </li></ul>
  8. 8. O que é AJAX? <ul><li>Traduzindo ... </li></ul><ul><li>AJAX (fev/2005): “Advanced JavaScript, Asynchronous XMLHttpRequest” </li></ul><ul><li>AJAX (hoje): “Asynchronous JavaScript and XML” </li></ul><ul><li>XML: eXtensible Markup Language </li></ul><ul><li>XHTML: HTML expresso como dialeto de XML </li></ul><ul><li>CSS: Cascading Style Sheets - padrão para formatação de documentos (X)HTML </li></ul><ul><li>DOM: Document Object Model – modelo para manipulação de documentos HTML. </li></ul>
  9. 9. O que é AJAX? <ul><li>... traduzindo ... </li></ul><ul><li>Assíncrono: modo de operação de um protocolo em que o solicitante não fica esperando pela resposta. Em vez disso, registra uma função de callback que vai tratar a resposta quando ela chegar. </li></ul><ul><li>XSLT: eXtensible Stylesheets Language Transformations: padrão para transformação de documentos XML. </li></ul><ul><li>XHR: XMLHttpRequest: método JavaScript para solicitações HTTP, em formato XML ou texto, podendo operar em modo assíncrono </li></ul><ul><li>JavaScript: implementação do padrão ECMAScript que contem um DOM HTML. </li></ul>
  10. 10. O que é AJAX? <ul><li>Em outras palavras ... </li></ul><ul><li>AJAX é um modelo de programação ... </li></ul><ul><li>… para aplicações web ricas, baseado em JavaScript executado no browser e em padrões da do W3C </li></ul><ul><li>... onde o modelo da página é manipulado via programa </li></ul><ul><li>... onde a página é atualizada a qualquer momento com dados vindos do servidor. </li></ul><ul><ul><ul><li>... onde alguns eventos de usuário são reportados ao servidor imediatamente. </li></ul></ul></ul>
  11. 11. O que é AJAX ? <ul><li>Princípios </li></ul><ul><ul><li>O browser hospeda uma aplicação, não apenas “conteúdo” </li></ul></ul><ul><ul><ul><li>“ Single-Page Application” </li></ul></ul></ul><ul><ul><li>O servidor entrega dados, não apenas “conteúdo” </li></ul></ul><ul><ul><ul><li>Data-centric </li></ul></ul></ul><ul><ul><ul><li>Parte do modelo no browser </li></ul></ul></ul><ul><ul><li>É viável que a interação do usuário seja fluída e contínua </li></ul></ul><ul><ul><ul><li>Atualizações assíncronas </li></ul></ul></ul><ul><ul><ul><li>UI baseadas em eventos </li></ul></ul></ul><ul><ul><li>Isto é código de verdade e requer disciplina ! </li></ul></ul><ul><ul><ul><li>JavaScript </li></ul></ul></ul><ul><ul><ul><li>Design Patterns </li></ul></ul></ul><ul><ul><ul><li>Metodologia de desenvolvimento </li></ul></ul></ul>
  12. 12. O que não é AJAX? <ul><li>Apenas o uso de HTML dinâmico (DHTML) </li></ul><ul><li>Apenas o uso de JavaScript </li></ul><ul><li>Apenas o uso de CSS </li></ul><ul><li>Apenas o uso de tecnologias baseadas em XML </li></ul><ul><li>AJAX pressupõe interação assíncrona entre browser e servidor web </li></ul>
  13. 13. Agenda <ul><li>O que é AJAX? </li></ul><ul><li>Casos de sucesso </li></ul><ul><li>Como funciona? </li></ul><ul><li>Vantagens e Desvantagens </li></ul><ul><li>Ferramentas </li></ul><ul><li>Demo </li></ul>
  14. 14. Como funciona? Modelo clássico de sistemas web
  15. 15. Como funciona? Utilizando Ajax
  16. 16. Como funciona? <ul><li>Requisições de HTTP assíncronas </li></ul><ul><li>Mecanismo para ActiveX no IE </li></ul><ul><li>if (window.ActiveXObject) </li></ul><ul><li>request = new ActiveXObject(“Microsoft.XMLHTTP”); </li></ul><ul><li>} </li></ul><ul><ul><ul><li>Implementações alternativas nos principais browsers </li></ul></ul></ul><ul><ul><ul><li>if (window.XMLHttpRequest ) { </li></ul></ul></ul><ul><ul><ul><li>request = new XMLHttpRequest(); </li></ul></ul></ul><ul><ul><ul><li>} </li></ul></ul></ul><ul><li>Podemos utilizar bibliotecas JavaScript que isolam a dependência de browsers (ex: Sarissa) </li></ul>
  17. 17. Como funciona? Requisições de HTTP assíncronas (cont.) Também são utilizadas no ambiente do servidor (para acesso assíncrono a Web Services). As requisições são tratadas por servlets ou equivalentes (para outras tecnologias) O content type utilizado pode ser XML, JSON(*), ou outro formato baseado em texto (*) JSON = JavaScript Object Notation – sintaxe para atribuição de conteúdo / serialização de objetos JavaScript, mais legível e concisa que XML.
  18. 18. Agenda <ul><li>O que é AJAX? </li></ul><ul><li>Casos de sucesso </li></ul><ul><li>Como funciona? </li></ul><ul><li>Vantagens e Desvantagens </li></ul><ul><li>Ferramentas </li></ul><ul><li>Demo </li></ul>
  19. 19. Vantagens <ul><li>Aplicações com menor tempo de resposta em relação a arquiteturas clássicas </li></ul><ul><ul><li>Não é necessário trazer uma página inteira a cada interação </li></ul></ul><ul><li>Aplicações mais próximas de um ambiente de desktop </li></ul><ul><ul><li>Interatividade maior, modelo de tratadores de eventos </li></ul></ul><ul><li>Deployment simplificado em relação ao ambiente desktop </li></ul><ul><ul><li>Vantagem própria de qualquer aplicação Web </li></ul></ul><ul><li>Roda em qualquer navegador moderno </li></ul><ul><li>IE, Mozilla, Firefox, Safari, Konqueror, Opera </li></ul>
  20. 20. Vantagens <ul><li>Viabiliza interação com o servidor </li></ul><ul><ul><li>Dados carregados sob demanda, sem onerar o carregamento inicial da página </li></ul></ul><ul><ul><li>Regras de negócio são tratadas onde for mais apropriado. </li></ul></ul><ul><ul><li>Utilização mais eficiente de largura de banda, </li></ul></ul><ul><ul><li>(quando bem implementado) </li></ul></ul>
  21. 21. Vantagens Modelo clássico de sistemas web
  22. 22. Vantagens Utilizando Ajax
  23. 23. Vantagens
  24. 24. Desvantagens <ul><li>Um grande número de decisões sobre a definição de arquitetura: </li></ul><ul><ul><li>Componentes centrados na plataforma do servidor ou do cliente ? </li></ul></ul><ul><ul><li>Qual a granularidade das interações entre cliente e servidor ? </li></ul></ul><ul><ul><li>Quando passar dados e quando conteúdo ? </li></ul></ul><ul><ul><li>Como dividir o modelo da aplicação entre a camada cliente e a camada de apresentação do lado do servidor ? </li></ul></ul><ul><ul><li>XML ou JSON ? </li></ul></ul><ul><li>É necessário conhecer mais tecnologias e conceitos: </li></ul><ul><ul><li>JavaScript, </li></ul></ul><ul><ul><li>interface-usuário, programação baseada em eventos </li></ul></ul><ul><ul><li>usabilidade, </li></ul></ul><ul><ul><li>componentes, </li></ul></ul><ul><ul><li>protocolos, </li></ul></ul><ul><ul><li>modelos de objetos, transformações XML </li></ul></ul><ul><ul><li>padrões da W3C, ECMA. </li></ul></ul>
  25. 25. Desvantagens <ul><li>Quebra do modelo de navegação da Web </li></ul><ul><ul><li>Favoritos, Voltar, Cache, Logs: outro modelo de usabilidade </li></ul></ul><ul><li>Metodologias de desenvolvimento precisam evoluir </li></ul><ul><ul><li>Como testar? </li></ul></ul><ul><ul><li>Como monitorar desempenho? </li></ul></ul><ul><ul><li>Quais os patterns/ boas práticas? </li></ul></ul><ul><li>Não basta seguir um framework ! </li></ul><ul><ul><li>Bibliotecas com paradigmas diferentes para partes da solução </li></ul></ul><ul><li>Diferentes implementações entre browsers </li></ul><ul><ul><li>Alguém já viu esse filme ? </li></ul></ul>
  26. 26. Agenda <ul><li>O que é AJAX? </li></ul><ul><li>Casos de sucesso </li></ul><ul><li>Como funciona? </li></ul><ul><li>Vantagens e Desvantagens </li></ul><ul><li>Implementação </li></ul><ul><li>Demo </li></ul>
  27. 27. Implementação 1 var request; 2 3 function sendRequest(url) { 4 5 //Inicializa o objeto XMLHttpRequest para o Mozilla 6 if ( window.XMLHttpRequest ) { 7 request = new XMLHttpRequest(); 8 } 9 //Inicializa o objeto XMLHttpRequest para o Internet Explorer 10 else if (window.ActiveXObject) { 11 request = new ActiveXObject(“Microsoft.XMLHTTP”); 12 } 13 //determina a função para processamento da requisição 14 request.onreadystatechange = processRequest; 15 16 //configura a requisição 17 request.open(“GET”,url, true ); 18 19 //envia a requisição 20 request.send( null ); 21 } 22 23 function processRequest() { 24 25 //Verifica se a resposta já foi recebida por completo 26 if (request.readyState == 4 ) { 27 //Verifica se o status é OK 28 if (request.status == 200 ) { 29 preencheComboCidade(); 30 } 31 } 32 } Incompatiblidade de browsers Função para tratar a resposta assíncrona Código a ser desenvolvido
  28. 28. Implementação 41 function preencheComboCidade() { 46 //Faz a leitura do documento XML recebido 47 var response = request.responseXML; 48 var raiz = response.getElementsByTagName( &quot;cidades&quot; ).item( 0 ); 50 var cidades = raiz.getElementsByTagName( &quot;cidade&quot; ); 51 52 //Seleciona a caixa de selecao de cidades 53 var selectNode = document.getElementById( &quot;cidade&quot; ); 54 //Apaga as opções atuais da caixa de seleção 56 selectNode.options.length = 0 ; 57 58 //preenche a caixa de opções com os valores recebidos 59 for ( var i = 0 ; i < cidades.length; i++) { 60 var txtCidade = cidades.item(i).firstChild.data; 61 var option = new Option(txtCidade); 62 selectNode.add(option, null ); 63 } 66 } Recupera os dados vindos do servidor Id do elemento HTML (combo cidade) Adiciona os dados ao DOM
  29. 29. Agenda <ul><li>O que é AJAX? </li></ul><ul><li>Casos de sucesso </li></ul><ul><li>Como funciona? </li></ul><ul><li>Vantagens e Desvantagens </li></ul><ul><li>Ferramentas </li></ul><ul><li>Demo </li></ul>
  30. 30. Ferramentas <ul><li>Lado cliente: JavaScript </li></ul><ul><ul><li>Bibliotecas de uso geral </li></ul></ul><ul><ul><li>Bibliotecas de componentes centrados no browser </li></ul></ul><ul><ul><li>Bibliotecas para remoting de objetos no servidor </li></ul></ul><ul><li>Lado servidor: Java </li></ul><ul><ul><li>Geração de código JavaScript a partir de Java </li></ul></ul><ul><ul><li>Componentes do lado servidor </li></ul></ul><ul><ul><li>Tratamento de XML </li></ul></ul><ul><ul><li>Tratamento de JSON </li></ul></ul><ul><li>Ferramentas de apoio </li></ul><ul><ul><li>Teste unitário </li></ul></ul><ul><ul><li>Testes de integração </li></ul></ul>
  31. 31. Casos de sucesso <ul><li>Start.com ( http://www.start.com/3/) </li></ul><ul><li>Google Mail </li></ul><ul><li>Google Groups </li></ul><ul><li>Google Suggest </li></ul><ul><li>A9.com </li></ul><ul><li>Basecamp </li></ul><ul><li>Meebo </li></ul>
  32. 32. Agenda <ul><li>O que é AJAX? </li></ul><ul><li>Casos de sucesso </li></ul><ul><li>Como funciona? </li></ul><ul><li>Vantagens e Desvantagens </li></ul><ul><li>Ferramentas </li></ul><ul><li>Demo </li></ul>
  33. 33. Casos de sucesso <ul><li>http://www.marcogomes.com/wallpapr/ (Brasileiro) </li></ul><ul><li>Kiko( http://www.kiko.com ) </li></ul><ul><li>Planzo( http://www.planzo.com ) </li></ul><ul><li>Timetracker( http://www.timetracker.com ) </li></ul><ul><li>Tudu( http://tudu.sourceforge.net ) </li></ul><ul><li>Voo2doo( http://www.voo2do.com ) </li></ul>
  34. 34. Demo
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×