03 - ajax
48 pág.

03 - ajax


DisciplinaDesenvolvimento de Sistemas141 materiais578 seguidores
Pré-visualização3 páginas
W W W. D OMI NAND OTI .COM.B R WWW.DOMINANDOTI .COM.BR 
AJAX 
Professor Marcelo Pacote \u2013 @professorpacote 
W W W. D OMI NAND OTI .COM.B R 
\uf0a7 Web \u201c1.0\u201d 
\uf0a7 Páginas dinâmicas 
\uf0a7 CGI (Perl, C), ASP, JSP, PHP 
\uf0a7 Aplicações web baseadas em páginas 
\uf0a7 Frameworks: Struts, JSF, WebWork 
\uf0a7 Web \u201c2.0\u201d (2005 em diante) 
\uf0a7 A web como plataforma 
\uf0a7 Desenvolvimento participativo 
\uf0a7 Interfaces ricas (AJAX) 
 
 
AJAX - Histórico 
Professor Marcelo Pacote - @professorpacote 2 
W W W. D OMI NAND OTI .COM.B R 
Ajax \u2013 Como funciona? 
\uf0a7 Elimina a necessidade de recarregamento de paginas da Web 
\uf0a7 A interação do usuário com a aplicação acontece 
assincronamente, independente da comunicação com o 
servidor. 
 
Professor Marcelo Pacote - @professorpacote 3 
W W W. D OMI NAND OTI .COM.B R 
O que é AJAX ? 
\uf0a7 Modelo de programação ... 
\uf0a7 \u2026 para aplicações web ricas, baseado em JavaScript 
executado no browser e em padrões W3C 
\uf0a7 ... no qual o \u201cmodelo\u201d da página é manipulado por meio de 
código javascript 
\uf0a7 ... no qual a página é atualizada a qualquer momento com 
dados obtidos de um servidor 
 
AJAX = Asynchronous JavaScript and XML 
Professor Marcelo Pacote - @professorpacote 4 
W W W. D OMI NAND OTI .COM.B R 
O que não é AJAX? 
\uf0a7 Apenas o uso de HTML dinâmico (DHTML) 
\uf0a7 Apenas o uso de JavaScript 
\uf0a7 Apenas o uso de CSS 
 
AJAX pressupõe interação assíncrona entre browser e servidor 
web 
 
Professor Marcelo Pacote - @professorpacote 5 
W W W. D OMI NAND OTI .COM.B R 
Modelo Web Tradicional 
Servidor 
BD 
browser 
U
I servidor 
web 
 
http request 
html + (css + javascript) 
1 
Usuario realiza alguma 
ação 
2 
browser envia uma 
requisição para o 
servidor 
3 
Servidor gera uma 
nova página HTML 
para o browser 
cliente 
4 
Dados são 
enviados de volta 
para o browser 
5 
browser atualiza o 
conteúdo da janela com 
o novo html do servidor 
Professor Marcelo Pacote - @professorpacote 6 
W W W. D OMI NAND OTI .COM.B R 
Modelo da Web Tradicional 
Síncrono: cada ação do usuário gera uma requisição e uma 
nova resposta 
browser 
servidor 
tempo 
Ação do usuário Ação do usuário Ação do usuário 
Processamento do servidor Processamento do Servidor 
1 
2 
3 
4 
5 
Professor Marcelo Pacote - @professorpacote 7 
W W W. D OMI NAND OTI .COM.B R 
Do modelo \u201ctradicional\u201d para \u201cAJAX\u201d 
Ajax adiciona uma camada extra de funcionalidade para o browser, 
que ajuda a gerenciar a interação do usuário. Trata-se de uma 
camada entre o conteúdo que o usuário vê e os dados enviados 
pelo servidor 
 
browser Servidor 
Banco 
de 
dados 
U
I servidor 
Web 
 
request 
response 
(XML/JSON) 
browser 
UI 
Ajax 
\u201cengine\u201d 
Chamadas 
JavaScript 
 
Gerenciamento dos 
dados dinâmicos 
Professor Marcelo Pacote - @professorpacote 8 
W W W. D OMI NAND OTI .COM.B R 
Fluxo Ajax Assíncrono 
Browser 
UI: 
servidor 
Processamento no servidor 
Ajax: 
time 
Professor Marcelo Pacote - @professorpacote 9 
W W W. D OMI NAND OTI .COM.B R 
Exemplos de uso 
\uf0a7 Gmail 
\uf0a7 Google Maps 
\uf0a7 Google Suggest 
\uf0a7 Facebook 
 
 
 
 
 
Professor Marcelo Pacote - @professorpacote 10 
W W W. D OMI NAND OTI .COM.B R 
XmlHttpRequest Object (XHR) 
\uf0a7 \u201cCoração\u201d do AJAX 
\uf0a7 Implementado pela primeira vez no IE5, em 1997 
\uf0a7 Trabalha com qualquer tipo de arquivo 
\uf0a7 Normalmente utiliza XML, mas outros formatos são 
comuns (TXT, HTML ou JSON). 
\uf0a7 Objeto é instanciado de forma diferente dependendo do 
browser. 
 
Professor Marcelo Pacote - @professorpacote 11 
W W W. D OMI NAND OTI .COM.B R 
Propriedades do XmlHttpRequest (XHR) 
\uf0a7 onreadystatechange \u2013 função de callback chamada nas 
mudanças de estado. 
\uf0a7 readyState \u2013 estado corrente da chamada 
\uf0a7 responseText \u2013 resultado de uma requisição (em formato 
texto) 
\uf0a7 responseXML \u2013 resultado de uma requisição (em formato 
XML) 
\uf0a7 status - código HTTP da resposta 
 
Professor Marcelo Pacote - @professorpacote 12 
W W W. D OMI NAND OTI .COM.B R 
Exercício [1] (PETR/2010/CESGRANRIO) 
Ajax não é meramente uma tecnologia. É uma abordagem moderna para 
desenvolvimento de sites interativos. A abordagem de desenvolvimento 
tradicional tem semelhanças e diferenças em relação ao Ajax. Uma 
característica exclusiva de Ajax em relação à abordagem tradicional é que 
a) executa as requisições através do protocolo HTTP. 
b) usa javascript como linguagem para desenvolver código no lado do 
cliente. 
c) usa (x)html / css para definir o aspecto visual da página. 
d) permite recuperação assíncrona de dados usando XMLHttpRequest. 
e) representa os objetos no lado cliente com DOM. 
 
Professor Marcelo Pacote - @professorpacote 13 
W W W. D OMI NAND OTI .COM.B R 
Ajax 
\uf0a7 Ajax é um modelo para construir aplicações no browser. 
\uf0a7 O modelo consiste em: 
A. Usar javascript para controlar o envio e a recuperação de informações. 
B. Usar XML para enviar dados do servidor para o browser. Usar 
JavaScript para extrair dados do XML 
C. Usar o DOM API JavaScript/HTML para construir interface dinâmica 
 
apresentação 
API DOM 
 HTML e CSS 
C 
dados 
XML ou outros formatos 
(e.g. JSON) 
B 
controle 
JavaScript 
A 
Professor Marcelo Pacote - @professorpacote 14 
W W W. D OMI NAND OTI .COM.B R 
Vantagens 
\uf0a7 Aplicações com menor tempo de resposta em relação a 
arquiteturas clássicas. 
 Não é necessário trazer uma página inteira a cada interação. 
\uf0a7 Aplicações mais próximas de um ambiente desktop. Maior 
interatividade e melhor usabilidade. 
\uf0a7 Deployment simplificado em relação ao ambiente desktop 
 Vantagem própria de qualquer aplicação Web 
\uf0a7 Executa em qualquer navegador moderno IE, Mozilla, Firefox, 
Safari, Opera, Chrome 
\uf0a7 Utilização mais eficiente de largura de banda 
\uf0a7 RIA sem Flash 
 
Professor Marcelo Pacote - @professorpacote 15 
W W W. D OMI NAND OTI .COM.B R 
Desvantagens 
\uf0a7 Quebra do modelo de navegação da Web 
\uf0a7 Favoritos, Voltar, Cache, histórico: outro modelo de usabilidade 
\uf0a7 Metodologias de desenvolvimento precisam evoluir 
\uf0a7 Como testar? 
\uf0a7 Como monitorar desempenho? 
\uf0a7 Quais os patterns/ boas práticas? 
\uf0a7 Diferentes implementações entre browsers 
\uf0a7 Alguém já viu esse filme ? 
\uf0a7 Dependência de frameworks para aumentar produtividade 
 
Professor Marcelo Pacote - @professorpacote 16 
W W W. D OMI NAND OTI .COM.B R 
Exercício [2] (INFRAERO/2011/FCC) 
Representa uma desvantagem do uso de AJAX: 
a) Troca mensagens entre o cliente e o servidor de forma assíncrona, ou seja, 
envia requisições e continua o processamento sem precisar aguardar a 
resposta. 
b) Trata-se principalmente de JavaScript que executa no navegador do 
usuário. Se for desativado o processamento do JavaScript no navegador, a 
aplicação pode falhar. 
c) Recebe respostas às requisições na mesma página sem a necessidade de 
refresh. 
d) Executa os processos em paralelo às requisições/respostas. 
e) Manipula o conteúdo XML nas aplicações para desktop de forma simples. 
 
Professor Marcelo Pacote - @professorpacote 17 
W W W. D OMI NAND OTI .COM.B R 
Implementando AJAX 
\uf0a7 O que dispara uma requisição AJAX? 
\uf0a7 Um evento JavaScript sobre qualquer elemento da página 
(onblur, onclick, etc.)\u200f 
\uf0a7 Como o servidor processa uma requisição AJAX? 
\uf0a7 O servidor não faz distinção de uma requisição AJAX de uma 
outra requisição HTML (URL, link, formulário). Dados são 
enviados normalmente via GET ou POST 
\uf0a7 Que código é executado quando os dados