Você está na página 1de 48

AJAX

Professor Marcelo Pacote @professorpacote


W W W. D O M I N A N D OT I .CO M . B R

W W W. D O M I N A N D OT I .CO M . B R

AJAX - Histrico
Web 1.0
Pginas dinmicas
CGI (Perl, C), ASP, JSP, PHP
Aplicaes web baseadas em pginas

Frameworks: Struts, JSF, WebWork


Web 2.0 (2005 em diante)
A web como plataforma
Desenvolvimento participativo
Interfaces ricas (AJAX)
Professor Marcelo Pacote - @professorpacote

W W W. D O M I N A N D OT I .CO M . B R

Ajax Como funciona?


Elimina a necessidade de recarregamento de paginas da Web
A interao do usurio com a aplicao acontece
assincronamente, independente da comunicao com o
servidor.

Professor Marcelo Pacote - @professorpacote

W W W. D O M I N A N D OT I .CO M . B R

O que AJAX ?
AJAX = Asynchronous JavaScript and XML
Modelo de programao ...
para aplicaes web ricas, baseado em JavaScript
executado no browser e em padres W3C
... no qual o modelo da pgina manipulado por meio de
cdigo javascript
... no qual a pgina atualizada a qualquer momento com
dados obtidos de um servidor

Professor Marcelo Pacote - @professorpacote

W W W. D O M I N A N D OT I .CO M . B R

O que no AJAX?
Apenas o uso de HTML dinmico (DHTML)

Apenas o uso de JavaScript


Apenas o uso de CSS
AJAX pressupe interao assncrona entre browser e servidor
web

Professor Marcelo Pacote - @professorpacote

W W W. D O M I N A N D OT I .CO M . B R

Modelo Web Tradicional


Usuario realiza alguma
ao

browser envia uma


requisio para o
servidor

Servidor gera uma


nova pgina HTML
para o browser
cliente

browser

Servidor

UI

2
http request

servidor
web

BD

html + (css + javascript)


5

4
browser atualiza o
contedo da janela com
o novo html do servidor

Professor Marcelo Pacote - @professorpacote

Dados so
enviados de volta
para o browser
6

W W W. D O M I N A N D OT I .CO M . B R

Modelo da Web Tradicional

Sncrono: cada ao do usurio gera uma requisio e uma


nova resposta
browser

Ao do usurio

Ao do usurio
1

Ao do usurio

tempo
4

servidor
3

Processamento do servidor

Professor Marcelo Pacote - @professorpacote

Processamento do Servidor

W W W. D O M I N A N D OT I .CO M . B R

Do modelo tradicional para AJAX


Ajax adiciona uma camada extra de funcionalidade para o browser,
que ajuda a gerenciar a interao do usurio. Trata-se de uma
camada entre o contedo que o usurio v e os dados enviados
pelo servidor

UI

browser
browser
UI

Chamadas
JavaScript

Servidor
request

Ajax
engine

servidor
Web

response
(XML/JSON)

Banco
de
dados

Gerenciamento dos
dados dinmicos
Professor Marcelo Pacote - @professorpacote

W W W. D O M I N A N D OT I .CO M . B R

Fluxo Ajax Assncrono


Browser
UI:
Ajax:

time

servidor
Processamento no servidor

Professor Marcelo Pacote - @professorpacote

W W W. D O M I N A N D OT I .CO M . B R

Exemplos de uso
Gmail

Google Maps
Google Suggest

Facebook

Professor Marcelo Pacote - @professorpacote

10

W W W. D O M I N A N D OT I .CO M . B R

XmlHttpRequest Object (XHR)


Corao do AJAX

Implementado pela primeira vez no IE5, em 1997


Trabalha com qualquer tipo de arquivo

Normalmente utiliza XML, mas outros formatos so


comuns (TXT, HTML ou JSON).
Objeto instanciado de forma diferente dependendo do
browser.

Professor Marcelo Pacote - @professorpacote

11

W W W. D O M I N A N D OT I .CO M . B R

Propriedades do XmlHttpRequest (XHR)


onreadystatechange funo de callback chamada nas
mudanas de estado.
readyState estado corrente da chamada
responseText resultado de uma requisio (em formato
texto)
responseXML resultado de uma requisio (em formato
XML)
status - cdigo HTTP da resposta

Professor Marcelo Pacote - @professorpacote

12

W W W. D O M I N A N D OT I .CO M . B R

Exerccio [1] (PETR/2010/CESGRANRIO)


Ajax no meramente uma tecnologia. uma abordagem moderna para
desenvolvimento de sites interativos. A abordagem de desenvolvimento
tradicional tem semelhanas e diferenas em relao ao Ajax. Uma
caracterstica exclusiva de Ajax em relao abordagem tradicional que
a) executa as requisies atravs do protocolo HTTP.
b) usa javascript como linguagem para desenvolver cdigo no lado do
cliente.
c) usa (x)html / css para definir o aspecto visual da pgina.
d) permite recuperao assncrona de dados usando XMLHttpRequest.
e) representa os objetos no lado cliente com DOM.

Professor Marcelo Pacote - @professorpacote

13

W W W. D O M I N A N D OT I .CO M . B R

Ajax
Ajax um modelo para construir aplicaes no browser.
O modelo consiste em:

A. Usar javascript para controlar o envio e a recuperao de informaes.


B. Usar XML para enviar dados do servidor
JavaScript para extrair dados do XML

para o browser. Usar

C. Usar o DOM API JavaScript/HTML para construir interface dinmica

A
controle
JavaScript

B
dados
XML ou outros formatos
(e.g. JSON)

Professor Marcelo Pacote - @professorpacote

C
apresentao
API DOM
HTML e CSS

14

W W W. D O M I N A N D OT I .CO M . B R

Vantagens
Aplicaes com menor tempo de resposta em relao a
arquiteturas clssicas.

No necessrio trazer uma pgina inteira a cada interao.


Aplicaes mais prximas de um ambiente desktop. Maior
interatividade e melhor usabilidade.
Deployment simplificado em relao ao ambiente desktop

Vantagem prpria de qualquer aplicao Web


Executa em qualquer navegador moderno IE, Mozilla, Firefox,
Safari, Opera, Chrome
Utilizao mais eficiente de largura de banda
RIA sem Flash

Professor Marcelo Pacote - @professorpacote

15

W W W. D O M I N A N D OT I .CO M . B R

Desvantagens
Quebra do modelo de navegao da Web

Favoritos, Voltar, Cache, histrico: outro modelo de usabilidade


Metodologias de desenvolvimento precisam evoluir
Como testar?
Como monitorar desempenho?
Quais os patterns/ boas prticas?
Diferentes implementaes entre browsers
Algum j viu esse filme ?
Dependncia de frameworks para aumentar produtividade

Professor Marcelo Pacote - @professorpacote

16

W W W. D O M I N A N D OT I .CO M . B R

Exerccio [2] (INFRAERO/2011/FCC)


Representa uma desvantagem do uso de AJAX:
a) Troca mensagens entre o cliente e o servidor de forma assncrona, ou seja,
envia requisies e continua o processamento sem precisar aguardar a
resposta.
b) Trata-se principalmente de JavaScript que executa no navegador do
usurio. Se for desativado o processamento do JavaScript no navegador, a
aplicao pode falhar.
c) Recebe respostas s requisies na mesma pgina sem a necessidade de
refresh.

d) Executa os processos em paralelo s requisies/respostas.


e) Manipula o contedo XML nas aplicaes para desktop de forma simples.

Professor Marcelo Pacote - @professorpacote

17

W W W. D O M I N A N D OT I .CO M . B R

Implementando AJAX
O que dispara uma requisio AJAX?
Um evento JavaScript sobre qualquer elemento da pgina
(onblur, onclick, etc.)
Como o servidor processa uma requisio AJAX?
O servidor no faz distino de uma requisio AJAX de uma
outra requisio HTML (URL, link, formulrio). Dados so
enviados normalmente via GET ou POST
Que cdigo executado quando os dados do AJAX retornam
para o cliente?
Uma funo JavaScript, definida pela propriedade
onreadystatechange no objeto XmlHttpRequest.
Professor Marcelo Pacote - @professorpacote

18

W W W. D O M I N A N D OT I .CO M . B R

Implementao

<valid>
false
</valid>

Professor Marcelo Pacote - @professorpacote

19

W W W. D O M I N A N D OT I .CO M . B R

Evento no cliente HTML (1/9)


<input

type="text"
size="20"
id=login"
name="id"

onkeyup="validarLogin()">

Professor Marcelo Pacote - @professorpacote

20

W W W. D O M I N A N D OT I .CO M . B R

Configurao da chamada ao servidor (2/9)


function validarLogin() {
var target = document.getElementById(login");
var url = servletValidacao?id=" +
encodeURIComponent(target.value);

sendRequest(url);
}

Professor Marcelo Pacote - @professorpacote

21

W W W. D O M I N A N D OT I .CO M . B R

O objeto de XMLHttpRequest realiza uma chamada (3/9)


var req;

function sendRequest (url) {


req = getXMLHTTPRequest();
if (req) {
req.onreadystatechange = processarResposta;
req.open (GET, url, true);
req.send(null);
}

}
Professor Marcelo Pacote - @professorpacote

22

W W W. D O M I N A N D OT I .CO M . B R

Criao do objeto XMLHttpRequest (4/9)


function getXMLHTTPRequest () {
var xhr = null;
if (window.XMLHttpRequest)
{
// Firefox, Safari, Chrome, IE7+
xhr = new XMLHttpRequest();
} else if (window.ActiveXObject) { // verso ActiveX
// Internet Explorer 6 ou anterior
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
}

return xhr;

Professor Marcelo Pacote - @professorpacote

23

W W W. D O M I N A N D OT I .CO M . B R

O request processado pela servlet (5/9)


public class ServletValidacao extends HttpServlet {

private HashMap contas = new HashMap();


public void init(ServletConfig config) throws ServletException {
super.init(config);
contas.put(package",dados da conta");
contas.put("duke",dados da conta");
contas.put(jabulani",dados da conta");
}
(...)
Professor Marcelo Pacote - @professorpacote

24

W W W. D O M I N A N D OT I .CO M . B R

O request processado pela servlet (6/9)


public void doGet(HttpServletRequest req,HttpServletResponse res)
throws IOException, ServletException {
res.setContentType("text/xml");
String login = req.getParameter("id");
if ((login != null) && ! contas.containsKey(login.trim())) {
res.getWriter().write("<valid>true</valid>");
} else {
res.getWriter().write("<valid>false</valid>");
}
}
Professor Marcelo Pacote - @professorpacote

25

W W W. D O M I N A N D OT I .CO M . B R

A servlet retorna um XML com resultado (7/9)


res.setContentType("text/xml");
res.getWriter().write("<valid>false</valid>");

Professor Marcelo Pacote - @professorpacote

26

W W W. D O M I N A N D OT I .CO M . B R

O objeto de XMLHttpRequest chama a funo do


callback() e processa o resultado (8/9)
function processarResposta () {
// o estado 4 indica requisio completa
if (req.readyState == 4) {
// cdigo 200 indica sucesso
if (req.status == 200) {
atualizarPagina (req.responseXML);
}
}
}

Professor Marcelo Pacote - @professorpacote

27

W W W. D O M I N A N D OT I .CO M . B R

O HTML DOM atualizado (9/9)


function atualizarPagina (responseXML) {
var msg = responseXML.getElementsByTagName("valid")[0].firstChild.nodeValue;
if (msg == "false"){
var mdiv = document.getElementById("userIdMessage");
// especificar css style para div
mdiv.className = "bp_invalid";
mdiv.innerHTML = ID invlido";
var submitBtn = document.getElementById("submit_btn");
submitBtn.disabled = true;
} else {
var mdiv = document.getElementById("userIdMessage");
mdiv.className = "bp_valid";
mdiv.innerHTML = "Valid User Id";
var submitBtn = document.getElementById("submit_btn");
submitBtn.disabled = false;
}
}
Professor Marcelo Pacote - @professorpacote

28

W W W. D O M I N A N D OT I .CO M . B R

Exerccio [3] (SERPRO/2008/CESPE)


(
) O Ajax basicamente oferece uma metodologia para
desenvolvimento de aplicaes na Web que une Javascript e
XML, mas que s pode ser executado em browsers lanados
aps 2001.

Professor Marcelo Pacote - @professorpacote

29

W W W. D O M I N A N D OT I .CO M . B R

Exerccio [4] (INMETRO/2009/CESPE) (1/2)

Professor Marcelo Pacote - @professorpacote

30

W W W. D O M I N A N D OT I .CO M . B R

Exerccio [4] (INMETRO/2009/CESPE) (2/2)


A figura anterior apresenta um cdigo que pode ser interpretado por um
browser web padro habilitado para funcionamento com a tecnologia Ajax
e que a suporta. A respeito do comportamento desse browser quando o
usurio interagir com a correspondente pgina renderizada, julgue os itens
subsequentes.

( ) Sempre que o usurio pressionar uma tecla nos campos nome e hora
do formulrio de nome formulario, ser apresentada uma janela pop-up ao
usurio com a expresso: Seu browser suporta Ajax!
( ) Um novo pedido HTTP ser enviado pelo browser ao servidor HTTP que
enviou a pgina sempre que a funo ajaxFunction for executada com
sucesso.

Professor Marcelo Pacote - @professorpacote

31

W W W. D O M I N A N D OT I .CO M . B R

Exerccio [5] (TCE-RN/2009/CESPE) - adaptada


( ) AJAX permite a construo de aplicaes web dinmicas e
interativas com o usurio, utilizando-se de solicitaes
assncronas de informaes. Para isso, o AJAX integra as
tecnologias XHTML, CSS, DOM, XML, XMLHttpRequest e
JavaScript.

Professor Marcelo Pacote - @professorpacote

32

W W W. D O M I N A N D OT I .CO M . B R

Exerccio [6] (CBM/2007/CESPE)


( ) Em uma aplicao Ajax, um programa JavaScript pode enviar
solicitaes HTTP aos servidores de aplicao via instncias de
XMLHttpRequest. Em uma instncia dessa classe, pode-se
informar a funo que processar a resposta solicitao por
meio da propriedade function.
(
) Em uma aplicao Ajax, um programa JavaScript cliente
pode enviar uma solicitao HTTP assncrona. Nesse caso, o
programa pode continuar a executar antes de a resposta ser
recebida. Um parmetro no mtodo send() de XMLHttpRequest
possibilita informar se a solicitao sncrona ou assncrona.

Professor Marcelo Pacote - @professorpacote

33

W W W. D O M I N A N D OT I .CO M . B R

Exerccio [7] (FIOCRUZ/2010/FGV) (1/2)


AJAX no uma tecnologia, na verdade, envolve vrias, cada
uma atuando da sua prpria maneira, tornando-se juntas uma
poderosa ferramenta. Nesse contexto, alm de suporte
Javascript, analise as afirmativas abaixo, associadas s
tecnologias incorporadas pelo AJAX.
I. Troca e manipulao de dados usando XML e XSLT.
II. Retorno de dados assincronamente usando XMLHttpRequest.

III.Apresentao baseada nas Web Standards usando XHTML e


CSS.

Professor Marcelo Pacote - @professorpacote

34

W W W. D O M I N A N D OT I .CO M . B R

Exerccio [7] (FIOCRUZ/2010/FGV) (2/2)


Esto corretas:

a) I
b) II

c) III
d) II e III
e) todas as afirmativas

Professor Marcelo Pacote - @professorpacote

35

W W W. D O M I N A N D OT I .CO M . B R

Exerccio [8] (CORREIOS/2011/CESPE/Analista)


(
) O Ajax incorpora diferentes tecnologias, como o DOM, o
XML, o XSLT, o objeto XMLHttpRequest, o objeto
XMLHttpResponse e o Javascript, cuja funo fazer a juno
entre os elementos.

Professor Marcelo Pacote - @professorpacote

36

W W W. D O M I N A N D OT I .CO M . B R

Gabarito dos Exerccios


[1] d

[2] b
[3] e

[4] ee
[5] c
[6] ee
[7] e
[8] errado

Professor Marcelo Pacote - @professorpacote

37

W W W. D O M I N A N D OT I .CO M . B R

Exerccios Complementares
Professor Marcelo Pacote @professorpacote
W W W. D O M I N A N D OT I .CO M . B R

W W W. D O M I N A N D OT I .CO M . B R

Exerccio [1] (CM/2009/CESGRANRIO) (1/2)


AJAX (do ingls Asynchronous Javascript And XML) tem sido
largamente utilizado no desenvolvimento de aplicaes WEB. Um dos
conceitos centrais do AJAX a possibilidade de serem feitas
requisies ao servidor atravs de cdigo Javascript, rodando no
navegador do usurio. Esse recurso empregado principalmente para
permitir que
a) o processamento das regras de negcio da aplicao seja distribudo
aos clientes, minimizando a carga do servidor.

b) o usurio envie uma requisio assncrona e verifique o resultado da


mesma mais tarde, sem precisar aguardar pela resposta imediata do
servidor.

Professor Marcelo Pacote - @professorpacote

39

W W W. D O M I N A N D OT I .CO M . B R

Exerccio [1] (CM/2009/CESGRANRIO) (2/2)


c) as pginas carreguem mais rapidamente, pois as requisies
so paralelizadas e compactadas durante o trnsito.
d) as pginas compostas diretamente em XML, ao invs de
XHTML ou HTML, sejam apresentadas no navegador do usurio.

e) partes de uma pgina web sejam atualizadas, sem que o


browser recarregue a pgina inteira do servidor, proporcionando
uma interface com melhor usabilidade.

Professor Marcelo Pacote - @professorpacote

40

W W W. D O M I N A N D OT I .CO M . B R

Exerccio [2] (IBGE/2010/CESGRANRIO) (1/3)


O cdigo HTML, em construo, abaixo demonstra a utilizao
de AJAX.

Professor Marcelo Pacote - @professorpacote

41

W W W. D O M I N A N D OT I .CO M . B R

Exerccio [2] (IBGE/2010/CESGRANRIO) (2/3)

Professor Marcelo Pacote - @professorpacote

42

W W W. D O M I N A N D OT I .CO M . B R

Exerccio [2] (IBGE/2010/CESGRANRIO) (3/3)


Para que esse cdigo possa utilizar a tecnologia AJAX, na linha "xhr =
new object();", "xhr" deve receber um objeto Javascript que torna
possvel a comunicao assncrona com o servidor, sem a
necessidade de recarregar a pgina por completo. Para tanto, no
cdigo acima, "object" deve ser substitudo por
a) responseXML.
b) MIME.

c) XMLHttpRequest.
d) DOMParser.
e) setRequestReader.

Professor Marcelo Pacote - @professorpacote

43

W W W. D O M I N A N D OT I .CO M . B R

Exerccio [3] (MPU-DESV/2010/CESPE)


( ) JavaScript uma linguagem de criao de scripts de uso
geral, projetada para ser embutida em aplicativos que executam
em um navegador Web. Os aplicativos Ajax so escritos em
JavaScript.

Professor Marcelo Pacote - @professorpacote

44

W W W. D O M I N A N D OT I .CO M . B R

Exerccio [4] (BASA/2010/CESPE)


A Web 2.0 uma recente tendncia de uso da Web como
plataforma, envolvendo redes sociais e ferramentas com maior
grau de interao e colaborao, porm no faz uso de novas
linguagens de programao, mas sim de novo modo de
utilizao das j existentes. Quanto temtica de linguagens
para a Web, julgue o item:
(
) Por meio da tecnologia AJAX, possvel fazer o envio de
formulrios HTML por meio de estruturas de dados baseadas
em XML, sem a necessidade de recarregar novas pginas no
navegador.

Professor Marcelo Pacote - @professorpacote

45

W W W. D O M I N A N D OT I .CO M . B R

Exerccio [5] (MPU-PERITO/2010/CESPE)


(
) O objeto XMLHttpRequest apresenta a estrutura das
pginas web como um conjunto de objetos programveis que
pode ser manipulado com JavaScript.

Professor Marcelo Pacote - @professorpacote

46

W W W. D O M I N A N D OT I .CO M . B R

Exerccio [6] (MPU/2010/CESPE/Tecnico)


( ) Uma pgina web que utiliza a tecnologia Ajax depende de
navegadores que implementaram o objeto XMLHttpRequest e
faz uso de JavaScript

Professor Marcelo Pacote - @professorpacote

47

W W W. D O M I N A N D OT I .CO M . B R

Gabarito
[1] e

[2] c
[3] c

[4] c
[5] e
[6] certo

Professor Marcelo Pacote - @professorpacote

48

W W W. D O M I N A N D OT I .CO M . B R