AJAX
Paradigma e Técnicas
para Programação de
Interfaces WEB
Miguel Galves
UNESP - 2006
Agenda
● Pequeno histórico da Web
● Modelo de funcionamento de um site
● Evolução da arquitetura de sites
● AJAX: Definiçã...
Recapitulando...
● 1969: Criação da ARPANET
● 1981: Criação da rede BITNET
– Rede de comunicação universitária
● 1983: Pri...
WWW
● 1991: Tim Berners Lee, do CERN, propõe
um protocolo para acesso e visualização de
arquivos baseado em Hipertexto.
● ...
Anatomia simplificada de um
sistema HTTP/HTML
● Arquivos de texto formatados por meio de
tags (HTML).
● Sistema de localiz...
Anatomia simplificada de um
sistema HTTP/HTML
Fonte: “Ajax: A New Approach to Web Applications”
Panorama inicial
● HTML ● Apache
● CGI
● C e Perl
HTTP 1.0
Evoluções do panorama
● DHTML
● CSS
● JavaScript
● VBScript
● XHTML
● XML
● Applets
● Flash
● Shockwave
● Linguagens
– Pyt...
Mas a interação...
...continua a
mesma !!!
AJAX
● Asynchrounous JavaScript XML
● Paradigma de desenvolvimento de interfaces
Web
● Conjunto de tecnologias bem conheci...
Quebrando alguns mitos
● AJAX não é uma tecnologia !
● AJAX não necessita de lib !
● AJAX não é dependente de tecnologia n...
Mas peraí...
● HTML foi criado em 1991
● CSS foi proposto em 1994
● Javascript foi criado em 1995
● XML foi proposto em 19...
Mas peraí...
Qual o motivo doQual o motivo do
sucesso repentinosucesso repentino
??
Motivo número 1
● Marketing é a alma do negócio!!!
● Nome AJAX criado em 18 de fevereiro de
2005
– Jesse James Garret
– “A...
Motivo número 2
● Web 2.0
– Termo proposto pro Tim O'Reilly
● Web como plataforma de serviços e não
apenas como plataforma...
Motivo número 2
● Britannica Online → Wikipedia
● CMS → Wikis
● mp3.com → Napster
● Sites pessoais → Blogs
● Diretórios (t...
Motivo número 3
● Popularização da banda larga
● Maior poder de processamento dos
computadores
Last but not least, motivo 4
● Killer app !!!
● Gmail
Resumindo
● Infraestrutura disponível.
● Nome criado.
● Momento de reflexão sobre web = ambiente
favorável.
● Aplicativo d...
Modelo de comunicação
cliente/servidor
Fonte: “Ajax: A New Approach to Web Applications”
Elementos chave
● Utiliza HTTP para comunicação
cliente/servidor.
● Resposta enviada em diversos formatos:
– XML
– JSON
– ...
Elementos chave
● Permite atualizar apenas uma parte da
página, via Javascript.
● Executa conexões assíncronas (background...
Elementos chave
● Requer uma camada extra para
processamento:Engine AJAX.
● Engine “tradicionalmente” escrito em
Javascrip...
Engine AJAX
Fonte: “Ajax: A New Approach to Web Applications”
Engine AJAX: Atribuições
● Pré-processamento de dados.
● Registro de handler de recepção.
● Envio da requisição.
● Pooling...
Engine AJAX:
Pré-Processamento
● Fase tradicionalmente de responsabilidade
do navegador.
● Coleta os dados a serem enviado...
Engine AJAX:
Pré-Processamento
● Converte os dados para o formato
apropriado para requisição.
– Substitui espaços por símb...
Engine AJAX:Registro de
handler e envio de requisição
● Define uma função handler, que irá tratar a
resposta assim que est...
Engine AJAX: Pooling
● Servidor não envia sinais ao navegador.
● Cliente tem que ficar em pooling, verificando
se resposta...
Engine AJAX: Recepção e
processamento dos dados
● Resposta pode vir em diversos
formatos:XML, HTML, JSON, ...
● XML e JSON...
Engine AJAX: Rendering
● Modifica a página exibida no navegador.
● Utiliza a interface de Javascript com CSS
para mexer em...
Vantagens de AJAX
● Transição entre estados mais leve e
eficiente.
● Aprimora a interatividade entre o usuário e o
site:
–...
Mas nem tudo são flores...
● Desenvolvimento de sites utilizando AJAX
podem ser muito trabalhosos.
● Existe uma série de c...
Condições de Contorno
● Compatibilidade de browser
● Concorrência
● Modelo de interação usuário/site
– Amnésia
– Feedback
...
Compatibilidade de browser
● Navegadores apresentam incompatibilidades
em vários aspectos:
– Registro e tratamento de even...
Concorrência
● XMLHTTPRequest permite a criação de
chamadas assíncronas concorrentes.
● Script deve ser capaz de tratar pr...
Modelo de interação
usuário/site
● Modelo mental é muito importante na
interação de uma pessoa com um software,
site ou ob...
Modelo de Interação:
Amnésia
● Modelo de navegação web: páginas com
links, levando de uma para outra.
● Cria-se um históri...
Modelo de Interação:
Amnésia
● Com Ajax, desenvolvedores tendem a criar
sites com uma página só.
● Navegador não mantém hi...
Modelo de Interação:
Feedback
● Em site comum, o navegador exibe status
quando se carrega uma página.
Modelo de Interação:
Feedback
● Este feedback não acontece quando a
requisição é assíncrona.
● Desenvolvedor deve prover o...
Ferramentas de
desenvolvimento
● Por ser uma metodologia nova, não existem
ferramentas que abrangem todo o fluxo de
trabal...
Debuggers: Firebug
● Plugin para Firefox
● Exibe mensagens de erros de execução
Javascript.
● Permite executar passo-a-pas...
Debuggers: Webdeveloper
● Plugin para Firefox
● Permite analisar formulários, e modificar
modo de envio de requisição (POS...
Bibliotecas
● Existe uma grande quantidade de bibliotecas
sendo desenvolvidos para facilitar o
desenvolvimento de aplicaçõ...
That's all folks !
DUVIDAS ?
Muito obrigado !
Log4Dev
Meu Blog de Tecnologia:
http://log4dev.wordpress.com
Próximos SlideShares
Carregando em…5
×

AJAX

359 visualizações

Publicada em

Palestra sobre AJAX apresentada na Semana da Computação, UNESP Rio Claro 2006

Publicada em: Software
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
359
No SlideShare
0
A partir de incorporações
0
Número de incorporações
3
Ações
Compartilhamentos
0
Downloads
8
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

AJAX

  1. 1. AJAX Paradigma e Técnicas para Programação de Interfaces WEB Miguel Galves UNESP - 2006
  2. 2. Agenda ● Pequeno histórico da Web ● Modelo de funcionamento de um site ● Evolução da arquitetura de sites ● AJAX: Definição ● Motivo do sucesso ● Modelo de funcionamento ● Vantagens ● Problemas ● Ferramentas e libs de suporte
  3. 3. Recapitulando... ● 1969: Criação da ARPANET ● 1981: Criação da rede BITNET – Rede de comunicação universitária ● 1983: Primeira rede TCP/IP operacional nos EUA. ● Killer App dos primórdios da rede mundial de computadores: e-mail
  4. 4. WWW ● 1991: Tim Berners Lee, do CERN, propõe um protocolo para acesso e visualização de arquivos baseado em Hipertexto. ● HTML ● HTTP ● Killer app: NCSA MosaicNCSA Mosaic
  5. 5. Anatomia simplificada de um sistema HTTP/HTML ● Arquivos de texto formatados por meio de tags (HTML). ● Sistema de localização de recursos padronizado (URL). ● Links que permitem ir de um arquivo para o outro (HTTP). – “Navegação”
  6. 6. Anatomia simplificada de um sistema HTTP/HTML Fonte: “Ajax: A New Approach to Web Applications”
  7. 7. Panorama inicial ● HTML ● Apache ● CGI ● C e Perl HTTP 1.0
  8. 8. Evoluções do panorama ● DHTML ● CSS ● JavaScript ● VBScript ● XHTML ● XML ● Applets ● Flash ● Shockwave ● Linguagens – Python – Ruby – Java ● Servidores de aplicação – Zope – Tomcat – Jboss ● CMS HTTP 1.1
  9. 9. Mas a interação... ...continua a mesma !!!
  10. 10. AJAX ● Asynchrounous JavaScript XML ● Paradigma de desenvolvimento de interfaces Web ● Conjunto de tecnologias bem conhecidas – Javascript + DOM – XML – CSS + HTML ● O elemento responsável pela mágica: – XMLHTTPRequest
  11. 11. Quebrando alguns mitos ● AJAX não é uma tecnologia ! ● AJAX não necessita de lib ! ● AJAX não é dependente de tecnologia no servidor ! ● AJAX não modifica o protocolo de comunicação entre cliente e servidor ! ● Todas as tecnologias necessárias para desenvolvimento AJAX estão embutidas nos navegadores.
  12. 12. Mas peraí... ● HTML foi criado em 1991 ● CSS foi proposto em 1994 ● Javascript foi criado em 1995 ● XML foi proposto em 1997 ● XMLHTTPRequest foi adicionado ao IE 5.0 em 1999 ● AJAX foi “criado” em 2005...
  13. 13. Mas peraí... Qual o motivo doQual o motivo do sucesso repentinosucesso repentino ??
  14. 14. Motivo número 1 ● Marketing é a alma do negócio!!! ● Nome AJAX criado em 18 de fevereiro de 2005 – Jesse James Garret – “Ajax: ANew Approach to Web Applications” ● Artigo propõe um novo paradigma de interação entre usuário e sites web.
  15. 15. Motivo número 2 ● Web 2.0 – Termo proposto pro Tim O'Reilly ● Web como plataforma de serviços e não apenas como plataforma de conteúdo. – Sistemas que agreguem valor ao usuário ● Maior interação do usuário com os sites. – Usuário deixa de ser mero espectador.
  16. 16. Motivo número 2 ● Britannica Online → Wikipedia ● CMS → Wikis ● mp3.com → Napster ● Sites pessoais → Blogs ● Diretórios (taxonomia) → Etiquetas (tags) ● Akamai → BitTorrent
  17. 17. Motivo número 3 ● Popularização da banda larga ● Maior poder de processamento dos computadores
  18. 18. Last but not least, motivo 4 ● Killer app !!! ● Gmail
  19. 19. Resumindo ● Infraestrutura disponível. ● Nome criado. ● Momento de reflexão sobre web = ambiente favorável. ● Aplicativo de sucesso mostrando as possibilidades existentes.
  20. 20. Modelo de comunicação cliente/servidor Fonte: “Ajax: A New Approach to Web Applications”
  21. 21. Elementos chave ● Utiliza HTTP para comunicação cliente/servidor. ● Resposta enviada em diversos formatos: – XML – JSON – HTML – Texto
  22. 22. Elementos chave ● Permite atualizar apenas uma parte da página, via Javascript. ● Executa conexões assíncronas (background) – Interface continua funcional entre envio de requisição e recepção da resposta. ● Aumento do número de conexões, com transferência de quantidade menor de dados por conexão.
  23. 23. Elementos chave ● Requer uma camada extra para processamento:Engine AJAX. ● Engine “tradicionalmente” escrito em Javascript. ● Engine executa boa parte do processamento antes delegados ao servidor e ao navegador.
  24. 24. Engine AJAX Fonte: “Ajax: A New Approach to Web Applications”
  25. 25. Engine AJAX: Atribuições ● Pré-processamento de dados. ● Registro de handler de recepção. ● Envio da requisição. ● Pooling para verificar se processamento foi efetuado. ● Recepção e processamento dos dados recebidos, caso necessário. ● Rendering do resultado no navegador.
  26. 26. Engine AJAX: Pré-Processamento ● Fase tradicionalmente de responsabilidade do navegador. ● Coleta os dados a serem enviados ao servidor: – Dados de formulário – Informações processadas pelo script.
  27. 27. Engine AJAX: Pré-Processamento ● Converte os dados para o formato apropriado para requisição. – Substitui espaços por símbolo + – Substitui acentos e símbolos especiais como &,%,=,+ e outros pelo código UTF-8 ● Monta String de requisição – Formato de URL – Par (chave, valor) – Exemplo: nome=Miguel&sobrenome=Galves
  28. 28. Engine AJAX:Registro de handler e envio de requisição ● Define uma função handler, que irá tratar a resposta assim que esta estiver disponível. ● Define o objeto que será utilizado para envio da requisição: – IE: ActiveXObject(“Microsoft.XMLHTTP”) – Firefox: XMLHTTPRequest() ● Define o método de envio (POST ou GET). ● Define cabeçalhos opcionais. ● Executa o envio.
  29. 29. Engine AJAX: Pooling ● Servidor não envia sinais ao navegador. ● Cliente tem que ficar em pooling, verificando se resposta já foi enviada. ● Processo de pooling ocorre em background – Thread separada, gerenciada pelo navegador. ● A cada ciclo de verificação, a função handler é chamada. – Handler deve verificar se a notificação corresponde ao final do processamento, ou a eventuais erros de envio/recepção
  30. 30. Engine AJAX: Recepção e processamento dos dados ● Resposta pode vir em diversos formatos:XML, HTML, JSON, ... ● XML e JSON: necessário extrair os dados da árvore para uso pelo script. ● Decodificação de strings. ● Eventuais processamentos não efetuados pelo servidor podem ser executados nesta fase, com javascript.
  31. 31. Engine AJAX: Rendering ● Modifica a página exibida no navegador. ● Utiliza a interface de Javascript com CSS para mexer em estilos. ● Utiliza a interface de Javascript com DOM HTML para remover e inserir novos elementos na página.
  32. 32. Vantagens de AJAX ● Transição entre estados mais leve e eficiente. ● Aprimora a interatividade entre o usuário e o site: – Google Calendar ● Permite oferecer funcionalidades próximas às funcionalidades oferecidas por aplicações desktop. – Yahoo! Mail = Outlook – Google Spreadsheets = Microsoft Excel
  33. 33. Mas nem tudo são flores... ● Desenvolvimento de sites utilizando AJAX podem ser muito trabalhosos. ● Existe uma série de condições de contorno que devem ser levadas em conta quando se desenvolve um site em AJAX.
  34. 34. Condições de Contorno ● Compatibilidade de browser ● Concorrência ● Modelo de interação usuário/site – Amnésia – Feedback ● Ferramentas de desenvolvimento
  35. 35. Compatibilidade de browser ● Navegadores apresentam incompatibilidades em vários aspectos: – Registro e tratamento de eventos – Manipulação de DOM – Manipulação do objeto de requisição – CSS ● Desenvolvimento de sites compatíveis com qualquer browser requerem uma boa quantidade de testes e códigos específicos.
  36. 36. Concorrência ● XMLHTTPRequest permite a criação de chamadas assíncronas concorrentes. ● Script deve ser capaz de tratar problemas de concorrência: – Por exemplo: um link clicado duas vezes por enganos disparando duas requisições para um mesmo evento.
  37. 37. Modelo de interação usuário/site ● Modelo mental é muito importante na interação de uma pessoa com um software, site ou objeto. ● Modelo mental relacionado à navegação na internet bem conhecido: – Links, progressão darequisição, espera da resposta, histórico. ● AJAX pode modificar alguns desses modelos.
  38. 38. Modelo de Interação: Amnésia ● Modelo de navegação web: páginas com links, levando de uma para outra. ● Cria-se um histórico de páginas visitadas. – Página visitada = URL único. ● Botões Back e Forward permitem voltar para página anterior.
  39. 39. Modelo de Interação: Amnésia ● Com Ajax, desenvolvedores tendem a criar sites com uma página só. ● Navegador não mantém histórico de navegação. Site com amnésia. – Back e forward inúteis. – Fonte de erros de navegação. ● Desenvolvedores tem que implementar o mecanismo de histórico manualmente.
  40. 40. Modelo de Interação: Feedback ● Em site comum, o navegador exibe status quando se carrega uma página.
  41. 41. Modelo de Interação: Feedback ● Este feedback não acontece quando a requisição é assíncrona. ● Desenvolvedor deve prover o feedback.
  42. 42. Ferramentas de desenvolvimento ● Por ser uma metodologia nova, não existem ferramentas que abrangem todo o fluxo de trabalho de forma adequada. ● Ferramentas necessárias: – Design – Programação Javascript – Debbuger
  43. 43. Debuggers: Firebug ● Plugin para Firefox ● Exibe mensagens de erros de execução Javascript. ● Permite executar passo-a-passo scripts carregados no navegador. ● Permite analisar DOM, Eventos, Layout e CSS da página. ● Mostra a String de requisição enviada ao servidor e o XML recebido.
  44. 44. Debuggers: Webdeveloper ● Plugin para Firefox ● Permite analisar formulários, e modificar modo de envio de requisição (POST/GET). ● Permite análise de CSS, destaca elementos na página, e suporta edição de CSS online. ● Exibe código HTML gerado em runtime por scripts (extremamente útil !!!).
  45. 45. Bibliotecas ● Existe uma grande quantidade de bibliotecas sendo desenvolvidos para facilitar o desenvolvimento de aplicações web. ● Bibliotecas oferecem tipos de funcionalidades diferentes: – Dojo e Rialto – OpenRico e Prototype – Google Web Toolkit – OpenLaszlo, TurboGears, Ruby On Rails
  46. 46. That's all folks ! DUVIDAS ?
  47. 47. Muito obrigado ! Log4Dev Meu Blog de Tecnologia: http://log4dev.wordpress.com

×