SlideShare une entreprise Scribd logo
1  sur  47
Télécharger pour lire hors ligne
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ção
● Motivo do sucesso
● Modelo de funcionamento
● Vantagens
● Problemas
● Ferramentas e libs de suporte
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
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
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”
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
– Python
– Ruby
– Java
● Servidores de
aplicação
– Zope
– Tomcat
– Jboss
● CMS
HTTP 1.1
Mas a interação...
...continua a
mesma !!!
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
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.
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...
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
– “Ajax: ANew Approach to Web Applications”
● Artigo propõe um novo paradigma de
interação entre usuário e sites web.
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.
Motivo número 2
● Britannica Online → Wikipedia
● CMS → Wikis
● mp3.com → Napster
● Sites pessoais → Blogs
● Diretórios (taxonomia) → Etiquetas (tags)
● Akamai → BitTorrent
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 de sucesso mostrando as
possibilidades existentes.
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
– HTML
– Texto
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.
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.
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 para verificar se processamento foi
efetuado.
● Recepção e processamento dos dados
recebidos, caso necessário.
● Rendering do resultado no navegador.
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.
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
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.
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
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.
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.
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
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.
Condições de Contorno
● Compatibilidade de browser
● Concorrência
● Modelo de interação usuário/site
– Amnésia
– Feedback
● Ferramentas de desenvolvimento
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.
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.
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.
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.
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.
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 feedback.
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
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.
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 !!!).
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
That's all folks !
DUVIDAS ?
Muito obrigado !
Log4Dev
Meu Blog de Tecnologia:
http://log4dev.wordpress.com

Contenu connexe

Tendances

Desenvolvimento de Módulos Divi Builder
Desenvolvimento de Módulos Divi BuilderDesenvolvimento de Módulos Divi Builder
Desenvolvimento de Módulos Divi BuilderDaniel Paz
 
Introdução básica ao JavaScript
Introdução básica ao JavaScriptIntrodução básica ao JavaScript
Introdução básica ao JavaScriptCarlos Eduardo Kadu
 
Alto desempenho e escalabilidade em aplicações web utilizando banco de dados ...
Alto desempenho e escalabilidade em aplicações web utilizando banco de dados ...Alto desempenho e escalabilidade em aplicações web utilizando banco de dados ...
Alto desempenho e escalabilidade em aplicações web utilizando banco de dados ...Vagner Santana
 
Conexão Java 2006: Introdução ao Ajax
Conexão Java 2006: Introdução ao AjaxConexão Java 2006: Introdução ao Ajax
Conexão Java 2006: Introdução ao AjaxHelder da Rocha
 
0 Introdução ao Desenvolvimento Web - Apresentação
0   Introdução ao Desenvolvimento Web - Apresentação0   Introdução ao Desenvolvimento Web - Apresentação
0 Introdução ao Desenvolvimento Web - ApresentaçãoMauro Duarte
 
Javascript levado a serio
Javascript levado a serioJavascript levado a serio
Javascript levado a serioJaydson Gomes
 
TDC2016SP - Trilha Frameworks JavaScript
TDC2016SP - Trilha Frameworks JavaScriptTDC2016SP - Trilha Frameworks JavaScript
TDC2016SP - Trilha Frameworks JavaScripttdc-globalcode
 

Tendances (8)

Desenvolvimento de Módulos Divi Builder
Desenvolvimento de Módulos Divi BuilderDesenvolvimento de Módulos Divi Builder
Desenvolvimento de Módulos Divi Builder
 
Introdução básica ao JavaScript
Introdução básica ao JavaScriptIntrodução básica ao JavaScript
Introdução básica ao JavaScript
 
Alto desempenho e escalabilidade em aplicações web utilizando banco de dados ...
Alto desempenho e escalabilidade em aplicações web utilizando banco de dados ...Alto desempenho e escalabilidade em aplicações web utilizando banco de dados ...
Alto desempenho e escalabilidade em aplicações web utilizando banco de dados ...
 
Conexão Java 2006: Introdução ao Ajax
Conexão Java 2006: Introdução ao AjaxConexão Java 2006: Introdução ao Ajax
Conexão Java 2006: Introdução ao Ajax
 
0 Introdução ao Desenvolvimento Web - Apresentação
0   Introdução ao Desenvolvimento Web - Apresentação0   Introdução ao Desenvolvimento Web - Apresentação
0 Introdução ao Desenvolvimento Web - Apresentação
 
Boas práticas de API Design
Boas práticas de API DesignBoas práticas de API Design
Boas práticas de API Design
 
Javascript levado a serio
Javascript levado a serioJavascript levado a serio
Javascript levado a serio
 
TDC2016SP - Trilha Frameworks JavaScript
TDC2016SP - Trilha Frameworks JavaScriptTDC2016SP - Trilha Frameworks JavaScript
TDC2016SP - Trilha Frameworks JavaScript
 

Similaire à AJAX

CóPia De Minicurso Smsi
CóPia De Minicurso SmsiCóPia De Minicurso Smsi
CóPia De Minicurso Smsitaniamaciel
 
Técnicas de Programação para a Web
Técnicas de Programação para a WebTécnicas de Programação para a Web
Técnicas de Programação para a WebLuiz Cláudio Silva
 
Desenvolvimento web com .NET Core - Meetup São Carlos
Desenvolvimento web com .NET Core - Meetup São CarlosDesenvolvimento web com .NET Core - Meetup São Carlos
Desenvolvimento web com .NET Core - Meetup São CarlosRodolfo Fadino Junior
 
Introdução à Programação Web com Angular
Introdução à Programação Web com AngularIntrodução à Programação Web com Angular
Introdução à Programação Web com AngularElmano Cavalcanti
 
Técnicas e recursos para desenvolvimento Web em cenários de grande escala
Técnicas e recursos para desenvolvimento Web em cenários de grande escalaTécnicas e recursos para desenvolvimento Web em cenários de grande escala
Técnicas e recursos para desenvolvimento Web em cenários de grande escalaAlexandre Tarifa
 
Introdução ao desenvolvimento da web.pptx
Introdução ao desenvolvimento da web.pptxIntrodução ao desenvolvimento da web.pptx
Introdução ao desenvolvimento da web.pptxMarceloRosenbrock1
 
Como criar infraestrutura de sites para receber milhões de usuários?
Como criar infraestrutura de sites para receber milhões de usuários?Como criar infraestrutura de sites para receber milhões de usuários?
Como criar infraestrutura de sites para receber milhões de usuários?Marcelo Dieder
 
Desenvolvimento web com Software Livre
Desenvolvimento web com Software LivreDesenvolvimento web com Software Livre
Desenvolvimento web com Software LivreRuan Carvalho
 
Desenvolvimento web com software livre
Desenvolvimento web com software livreDesenvolvimento web com software livre
Desenvolvimento web com software livreRuan Carvalho
 
Introdução a Arquitetura de Sistemas
Introdução a Arquitetura de SistemasIntrodução a Arquitetura de Sistemas
Introdução a Arquitetura de SistemasIgor Takenami
 
HackaPET 2019: React
HackaPET 2019: ReactHackaPET 2019: React
HackaPET 2019: ReactMaira Bello
 
ASP.NET MVC - Alexandre Tarifa
ASP.NET MVC - Alexandre TarifaASP.NET MVC - Alexandre Tarifa
ASP.NET MVC - Alexandre Tarifaguestea329c
 

Similaire à AJAX (20)

introdução a ajax
introdução a ajaxintrodução a ajax
introdução a ajax
 
JavaEE
JavaEEJavaEE
JavaEE
 
CóPia De Minicurso Smsi
CóPia De Minicurso SmsiCóPia De Minicurso Smsi
CóPia De Minicurso Smsi
 
Minicurso Smsi
Minicurso SmsiMinicurso Smsi
Minicurso Smsi
 
Técnicas de Programação para a Web
Técnicas de Programação para a WebTécnicas de Programação para a Web
Técnicas de Programação para a Web
 
Desenvolvimento web com .NET Core - Meetup São Carlos
Desenvolvimento web com .NET Core - Meetup São CarlosDesenvolvimento web com .NET Core - Meetup São Carlos
Desenvolvimento web com .NET Core - Meetup São Carlos
 
Desenvolviemento web com ASP.Net e MVC
Desenvolviemento web com ASP.Net e MVCDesenvolviemento web com ASP.Net e MVC
Desenvolviemento web com ASP.Net e MVC
 
Palestra ASP.NET MVC
Palestra ASP.NET MVCPalestra ASP.NET MVC
Palestra ASP.NET MVC
 
Introdução à Programação Web com Angular
Introdução à Programação Web com AngularIntrodução à Programação Web com Angular
Introdução à Programação Web com Angular
 
Técnicas e recursos para desenvolvimento Web em cenários de grande escala
Técnicas e recursos para desenvolvimento Web em cenários de grande escalaTécnicas e recursos para desenvolvimento Web em cenários de grande escala
Técnicas e recursos para desenvolvimento Web em cenários de grande escala
 
2006 - ASP.NET.ppt
2006 - ASP.NET.ppt2006 - ASP.NET.ppt
2006 - ASP.NET.ppt
 
Introdução ao desenvolvimento da web.pptx
Introdução ao desenvolvimento da web.pptxIntrodução ao desenvolvimento da web.pptx
Introdução ao desenvolvimento da web.pptx
 
Google Web Toolkit
Google Web ToolkitGoogle Web Toolkit
Google Web Toolkit
 
Intro desenvolvimento-web
Intro desenvolvimento-webIntro desenvolvimento-web
Intro desenvolvimento-web
 
Como criar infraestrutura de sites para receber milhões de usuários?
Como criar infraestrutura de sites para receber milhões de usuários?Como criar infraestrutura de sites para receber milhões de usuários?
Como criar infraestrutura de sites para receber milhões de usuários?
 
Desenvolvimento web com Software Livre
Desenvolvimento web com Software LivreDesenvolvimento web com Software Livre
Desenvolvimento web com Software Livre
 
Desenvolvimento web com software livre
Desenvolvimento web com software livreDesenvolvimento web com software livre
Desenvolvimento web com software livre
 
Introdução a Arquitetura de Sistemas
Introdução a Arquitetura de SistemasIntrodução a Arquitetura de Sistemas
Introdução a Arquitetura de Sistemas
 
HackaPET 2019: React
HackaPET 2019: ReactHackaPET 2019: React
HackaPET 2019: React
 
ASP.NET MVC - Alexandre Tarifa
ASP.NET MVC - Alexandre TarifaASP.NET MVC - Alexandre Tarifa
ASP.NET MVC - Alexandre Tarifa
 

Plus de Miguel Galves

Processamento de tweets em tempo real com Python, Django e Celery - TDC 2014
Processamento de tweets em tempo real com Python, Django e Celery - TDC 2014Processamento de tweets em tempo real com Python, Django e Celery - TDC 2014
Processamento de tweets em tempo real com Python, Django e Celery - TDC 2014Miguel Galves
 
Redis para iniciantes - TDC 2014
Redis para iniciantes - TDC 2014Redis para iniciantes - TDC 2014
Redis para iniciantes - TDC 2014Miguel Galves
 
New Strategy to detect SNPs
New Strategy to detect SNPsNew Strategy to detect SNPs
New Strategy to detect SNPsMiguel Galves
 
Comparison of Genomic DNA to cDNA Alignment Methods
Comparison of Genomic DNA to cDNA Alignment MethodsComparison of Genomic DNA to cDNA Alignment Methods
Comparison of Genomic DNA to cDNA Alignment MethodsMiguel Galves
 
Qualificação de Mestrado
Qualificação de MestradoQualificação de Mestrado
Qualificação de MestradoMiguel Galves
 
Uma abordagem computacional para a determinação de polimorfismos de base única
Uma abordagem computacional para a determinação de polimorfismos de base únicaUma abordagem computacional para a determinação de polimorfismos de base única
Uma abordagem computacional para a determinação de polimorfismos de base únicaMiguel Galves
 
Django: Uso de frameworks ágeis para desenvolvimento web
Django: Uso de frameworks ágeis para desenvolvimento webDjango: Uso de frameworks ágeis para desenvolvimento web
Django: Uso de frameworks ágeis para desenvolvimento webMiguel Galves
 
Data Mining em redes sociais
Data Mining em redes sociaisData Mining em redes sociais
Data Mining em redes sociaisMiguel Galves
 

Plus de Miguel Galves (9)

Processamento de tweets em tempo real com Python, Django e Celery - TDC 2014
Processamento de tweets em tempo real com Python, Django e Celery - TDC 2014Processamento de tweets em tempo real com Python, Django e Celery - TDC 2014
Processamento de tweets em tempo real com Python, Django e Celery - TDC 2014
 
Redis para iniciantes - TDC 2014
Redis para iniciantes - TDC 2014Redis para iniciantes - TDC 2014
Redis para iniciantes - TDC 2014
 
New Strategy to detect SNPs
New Strategy to detect SNPsNew Strategy to detect SNPs
New Strategy to detect SNPs
 
Comparison of Genomic DNA to cDNA Alignment Methods
Comparison of Genomic DNA to cDNA Alignment MethodsComparison of Genomic DNA to cDNA Alignment Methods
Comparison of Genomic DNA to cDNA Alignment Methods
 
Qualificação de Mestrado
Qualificação de MestradoQualificação de Mestrado
Qualificação de Mestrado
 
Uma abordagem computacional para a determinação de polimorfismos de base única
Uma abordagem computacional para a determinação de polimorfismos de base únicaUma abordagem computacional para a determinação de polimorfismos de base única
Uma abordagem computacional para a determinação de polimorfismos de base única
 
Django: Uso de frameworks ágeis para desenvolvimento web
Django: Uso de frameworks ágeis para desenvolvimento webDjango: Uso de frameworks ágeis para desenvolvimento web
Django: Uso de frameworks ágeis para desenvolvimento web
 
GIS em 3 horas
GIS em 3 horasGIS em 3 horas
GIS em 3 horas
 
Data Mining em redes sociais
Data Mining em redes sociaisData Mining em redes sociais
Data Mining em redes sociais
 

AJAX

  • 1. AJAX Paradigma e Técnicas para Programação de Interfaces WEB Miguel Galves UNESP - 2006
  • 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. 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. 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. 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. Anatomia simplificada de um sistema HTTP/HTML Fonte: “Ajax: A New Approach to Web Applications”
  • 7. Panorama inicial ● HTML ● Apache ● CGI ● C e Perl HTTP 1.0
  • 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
  • 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. 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. 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. Mas peraí... Qual o motivo doQual o motivo do sucesso repentinosucesso repentino ??
  • 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. 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. Motivo número 2 ● Britannica Online → Wikipedia ● CMS → Wikis ● mp3.com → Napster ● Sites pessoais → Blogs ● Diretórios (taxonomia) → Etiquetas (tags) ● Akamai → BitTorrent
  • 17. Motivo número 3 ● Popularização da banda larga ● Maior poder de processamento dos computadores
  • 18. Last but not least, motivo 4 ● Killer app !!! ● Gmail
  • 19. Resumindo ● Infraestrutura disponível. ● Nome criado. ● Momento de reflexão sobre web = ambiente favorável. ● Aplicativo de sucesso mostrando as possibilidades existentes.
  • 20. Modelo de comunicação cliente/servidor Fonte: “Ajax: A New Approach to Web Applications”
  • 21. Elementos chave ● Utiliza HTTP para comunicação cliente/servidor. ● Resposta enviada em diversos formatos: – XML – JSON – HTML – Texto
  • 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. 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. Engine AJAX Fonte: “Ajax: A New Approach to Web Applications”
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. Condições de Contorno ● Compatibilidade de browser ● Concorrência ● Modelo de interação usuário/site – Amnésia – Feedback ● Ferramentas de desenvolvimento
  • 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. 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. 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. 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. 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. Modelo de Interação: Feedback ● Em site comum, o navegador exibe status quando se carrega uma página.
  • 41. Modelo de Interação: Feedback ● Este feedback não acontece quando a requisição é assíncrona. ● Desenvolvedor deve prover o feedback.
  • 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. 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. 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. 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. That's all folks ! DUVIDAS ?
  • 47. Muito obrigado ! Log4Dev Meu Blog de Tecnologia: http://log4dev.wordpress.com