Ajax

AJAX
Professor Marcelo Pacote @professorpacote

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
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.
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
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
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
Dados so
enviados de volta
para o browser
6
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
Processamento do Servidor
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
Fluxo Ajax Assncrono

Browser
UI:
Ajax:
time
servidor
Processamento no servidor
Exemplos de uso
Gmail
Google Maps
Google Suggest
Facebook
10
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.
11
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
12
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.
13
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)
C
apresentao
API DOM
HTML e CSS
14
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
15
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
16
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.
17
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.
18
Implementao
<valid>
false
</valid>
19
Evento no cliente HTML (1/9)

<input
type="text"
size="20"
id=login"
name="id"
onkeyup="validarLogin()">
20
Configurao da chamada ao servidor (2/9)

function validarLogin() {
var target = document.getElementById(login");
var url = servletValidacao?id=" +
encodeURIComponent(target.value);
sendRequest(url);
}
21
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);
}
}
22
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;
23
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");
}
(...)
24
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>");
}
}
25
A servlet retorna um XML com resultado (7/9)

res.setContentType("text/xml");
res.getWriter().write("<valid>false</valid>");
26
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);
}
}
}
27
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;
}
}
28
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.
29
Exerccio [4] (INMETRO/2009/CESPE) (1/2)
30
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.
31
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.
32
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.
33
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.
34
Exerccio [7] (FIOCRUZ/2010/FGV) (2/2)

Esto corretas:
a) I
b) II
c) III
d) II e III
e) todas as afirmativas
35
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.
36
Gabarito dos Exerccios

[1] d
[2] b
[3] e
[4] ee
[5] c
[6] ee
[7] e
[8] errado
37
Exerccios Complementares
Professor Marcelo Pacote @professorpacote
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.
39
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.
40
Exerccio [2] (IBGE/2010/CESGRANRIO) (1/3)

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

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.
43
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.
44
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.
45
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.
46
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
47
Gabarito
[1] e
[2] c
[3] c
[4] c
[5] e
[6] certo
48

Ajax

Caricato da

Informazioni sul documento

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Ajax

Caricato da

Copyright:

Formati disponibili

AJAX

Professor Marcelo Pacote @professorpacote

Frameworks: Struts, JSF, WebWork

Ajax Como funciona?

Professor Marcelo Pacote - @professorpacote

Professor Marcelo Pacote - @professorpacote

Apenas o uso de JavaScript

Professor Marcelo Pacote - @professorpacote

Modelo Web Tradicional

browser envia uma

Servidor gera uma

html + (css + javascript)

Professor Marcelo Pacote - @professorpacote

Modelo da Web Tradicional

Sncrono: cada ao do usurio gera uma requisio e uma

Professor Marcelo Pacote - @professorpacote

Do modelo tradicional para AJAX

Fluxo Ajax Assncrono

Professor Marcelo Pacote - @professorpacote

Professor Marcelo Pacote - @professorpacote

XmlHttpRequest Object (XHR)

Implementado pela primeira vez no IE5, em 1997

Normalmente utiliza XML, mas outros formatos so

Professor Marcelo Pacote - @professorpacote

Propriedades do XmlHttpRequest (XHR)

Professor Marcelo Pacote - @professorpacote

Exerccio [1] (PETR/2010/CESGRANRIO)

Professor Marcelo Pacote - @professorpacote

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

para o browser. Usar

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

Professor Marcelo Pacote - @professorpacote

No necessrio trazer uma pgina inteira a cada interao.

Vantagem prpria de qualquer aplicao Web

Professor Marcelo Pacote - @professorpacote

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

Professor Marcelo Pacote - @professorpacote

Exerccio [2] (INFRAERO/2011/FCC)

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

Professor Marcelo Pacote - @professorpacote

Professor Marcelo Pacote - @professorpacote

Evento no cliente HTML (1/9)

Professor Marcelo Pacote - @professorpacote

Configurao da chamada ao servidor (2/9)

Professor Marcelo Pacote - @professorpacote

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

function sendRequest (url) {

Criao do objeto XMLHttpRequest (4/9)

Professor Marcelo Pacote - @professorpacote

O request processado pela servlet (5/9)

private HashMap contas = new HashMap();

O request processado pela servlet (6/9)

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

Professor Marcelo Pacote - @professorpacote

O objeto de XMLHttpRequest chama a funo do

Professor Marcelo Pacote - @professorpacote

O HTML DOM atualizado (9/9)

Exerccio [3] (SERPRO/2008/CESPE)

Professor Marcelo Pacote - @professorpacote

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

Professor Marcelo Pacote - @professorpacote

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

Professor Marcelo Pacote - @professorpacote

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