Introduo ao Ajax

Helder da Rocha
(helder@argonavis.com.br)

Conexo Java 2006

 Programa (1)
1. O que Ajax?
Por que usar?
Quando usar?
Quem usa?
Alternativas
2. Fundamentos tecnolgicos
Arquitetura Web tradicional e Web 2.0
XML
JavaScript
CSS
DOM

Conexo Java 2006

 Programa (2)
3. Ajax passo-a-passo: requisio e resposta
Obtendo o XMLHttpRequest
Iniciando o request)
Obtendo a resposta
Processando a resposta
4. Demonstrao
5. Processamento de respostas em XML
6. Frameworks para uso com Java
Passo-a-passo com DWR
Overview de JSF
Conexo Java 2006
 1 O que Ajax?
O que Ajax? O que no Ajax?
Por que usar?
Quando usar?
Quem usa?
Alternativas

Conexo Java 2006

 Ajax
Ajax uma soluo lado-cliente baseada
em HTML, JavaScript e DOM que permite
que a comunicao entre o browser e o
servidor Web ocorra de forma assncrona
Ajax no uma linguagem nova, nem
mesmo uma tecnologia nova
Ajax no uma soluo lado-servidor

Conexo Java 2006

 Por que usar?
A comunicao HTTP ineficiente
Para cada requisio h uma resposta
Cada resposta devolve uma pgina inteira
preciso esperar toda a pgina carregar
antes de usar uma aplicao Web
Ajax permite comunicao assncrona
Pequenos trechos de dados podem ser
transferidos assncronamente
Permite que aplicao funcione enquanto
dados so transferidos

Conexo Java 2006

 Quando usar?
Use em aplicaes Web interativas que
sofrem com o modelo requisio-resposta
Aplicaes com menus, muitas opes, que
requerem interatividade em tempo real
Aplicaes que modelam aplicaes grficas
de desktop
No use em aplicaes que realmente
precisam carregar uma pgina inteira
Ex: alguns tipos de sistemas de informao

Conexo Java 2006

 Quem usa? Exemplos
Aplicaes mais populares
Google Maps
Google GMail
Yahoo Flickr
...

Conexo Java 2006

 Alternativas
Flash
SVG
Java Web Start

Conexo Java 2006

 2 Fundamentos tecnolgicos
Arquitetura Web e Web 2.0
XML
JavaScript
CSS
DOM

Conexo Java 2006

 Arquitetura Web
Baseada em cliente, protocolo HTTP e servidor
Principais caractersticas
Protocolo de transferncia de arquivos (HTTP: RFC 2068) no mantm
estado da sesso do cliente
Servidor representa sistema de arquivos virtual e responde a comandos
que contm URLs
Cabealhos contm meta-informao de requisio e resposta
Mquina www.xyz.com
Abre conexo para www.xyz.com:80

Soquete de Servio: 80
Uma requisio:
Servidor
GET /index.html HTTP/1.1 ...
HTTP
Cliente
HTTP
S garantida uma (browser) Uma resposta: /
requisio/resposta HTTP/1.1 200 OK ...
por conexo
Fecha conexo
index.html
Conexo Java 2006
 Exemplo de requisio/resposta HTTP
Interpreta Gera
1. Pgina HTML HTML requisio
<img src="tomcat.gif"/> GET

2. Requisio: browser solicita imagem

GET /tomcat.gif HTTP/1.1
Linha em User-Agent: Mozilla 6.0 [en] (Windows 95; I)
branco Cookies: querty=uiop; SessionID=D236S11943245
termina
cabealhos
3. Resposta: servidor devolve cabealho + stream

HTTP 1.1 200 OK tomcat.gif

Server: Apache 1.32
Date: Friday, August 13, 2003 03:12:56 GMT-03
Content-type: image/gif
Content-length: 23779

!#GIF89~ 7
.55.a 64 ...

Conexo Java 2006

Ciclo de vida de aplicao Web
Browser Servidor

Pagina

Pagina
Sesso

Pagina

Pagina

Conexo Java 2006

Ciclo de vida de aplicao Ajax
(Web 2.0)
Browser Servidor

Pagina

Sesso

Pagina

Conexo Java 2006

 XML
Fornece um meio simples de transmitir
informaes estruturadas entre o cliente e o
servidor
Pode-se transferir toda a informao de objetos
independente de linguagem
Validao XML Schema
Manipulao via DOM, SAX, mapeamento objeto-
XML, JAXB, Web Services
Forma mais comum para devolver dados ao
cliente (garante mais controle)

Conexo Java 2006

Documento XML

Conexo Java 2006

Conexo Java 2006
 JavaScript
Linguagem de propsito geral projetada para ser
embutida em aplicaes
Permite interao com o modelo de objetos do
browser e com o DOM
Aplicaes Ajax so escritas em JavaScript
Includo na pgina de trs formas
<script src=url_da_api.js />!
<script> ... codigo esttico </script>!
Dentro de atributos especiais (onload, onXXX) ou
usando prefixo javascript: em atributos comuns

Conexo Java 2006

Exemplo de JavaScript
biblio.js

pagina.html

Conexo Java 2006

 JavaScript
Tem palavras chave parecidas com as de Java
(mas tm outras)
No strongly-typed como Java
Declarao de variveis globais opcional
Declarao de variveis locais com var
Integra-se com Java
baseada em objetos (pode-se criar objetos a
partir de prottipos mas no de herana)
No suporta sobrecarga ou sobreposio
Funes (function) so objetos

Conexo Java 2006

Conexo Java 2006
 JavaScript no browser
Os objetos, variveis, etc. esto disponveis a partir do
objeto raiz, que no browser document
Todos os elementos da pgina esto em uma rvore a
partir de document
Pode-se criar novos elementos e anex-los a document,
fazendo-os aparecer dinamicamente na pgina (usando
o DOM Document Object Model)
Exemplo
document.forms[0] primeiro formulrio da pgina
document.getElementById(botao_2) acessa um
elemento HTML que tenha ID botao_2!

Conexo Java 2006

 CSS
Permite definir estilos reutilizveis para
elementos de pgina
Estilos podem ser atribudos estaticamente a
uma pgina e alterados dinamicamente via
JavaScript e DOM
Includos numa pgina de 3 formas:
Via <link rel=stylesheet href=folha.css />!
<style> ... CSS ... </style>!
Em atributos <span style=...>...</span>!
Veja exemplos

Conexo Java 2006

 CSS Sintaxe bsica
Uma folha de estilos uma coleo de regras
Cada regra tem o formato:
seletores { propriedade: valor, ... }
Seletores so elementos, ids, classes:
h1, h2 {...}!
h1.principal, .outros {...}!
#id35 {...}!
Classes e IDs so definidos em elementos
<h1 class=principal titulo id=id99>!
Propriedades definem estilo:
h1 {color: red}!

Conexo Java 2006

 CSS para layout
H vrias propriedades que definem layout e
visibilidade
position, absolute, relative, static
visibility
display
Vrias podem ser alteradas via JavaScript
para realizar mudanas dinmicas de
posicionamento e visibilidade.

Conexo Java 2006

 Alterando CSS via JavaScript
Localize o elemento
var e = document.getElementById(id02);!
Altere seu estilo
e.className = outros;!
e.style.border=solid red 1px;!
e.style.display=block;!

Conexo Java 2006

 DOM
impossvel usar JavaScript no browser
sem usar document, que a raiz do DOM
O DOM um modelo de objetos padro,
independente de linguagem, usado para
representar elementos, atributos, ns de
texto, etc.
Tem uma API padro independente de
linguagem

Conexo Java 2006

Hierarquia do DOM

Conexo Java 2006

 Como criar ns, atributos
var doc = document;

Conexo Java 2006

Como montar uma rvore

Conexo Java 2006

 innerHTML
Mtodo menos prolixo para gerar XML/
HTML (evita o uso de createElement e
appendChild)
!
pai.innerHtml = <filho>...</filho>;!
!
Mais prtico para alteraes dinmicas
(por exemplo, quando um fragmento
recebido assincronamente)

Conexo Java 2006

 Exemplos interativos
Alerta em JavaScript
Alterao de formulrio em JavaScript
Ocultao com JavaScript e CSS
Alterao de estilo com CSS
Localizao de elemento com DOM
Criao de rvore DOM dinmica

Conexo Java 2006

 Concluses
Aplicaes Ajax so escritas em
JavaScript
CSS e DOM permitem grande parte do
comportamento dinmico (DHTML) usado
em aplicaes Ajax atravs do uso de
JavaScript
importante conhecer essas tecnologias
para utilizar melhor os recursos do Ajax

Conexo Java 2006

 3 Ajax passo-a-passo
Passo 1: Obtendo o XMLHttpRequest
Independente do browser
Passo 2: Abrindo uma conexo
Mtodos do objeto XMLHttpRequest
Passo 3: Obtendo a resposta
Estados (ready states)
Passo 4: Processando a resposta
Obtendo e usando os dados

Conexo Java 2006

 Passo 1:
Obtendo o XMLHttpRequest
O XMLHttpRequest o objeto do DOM que ir realizar
a comunicao assncrona
Ou seja, o corao do Ajax
Nos browsers modernos (IE7, FireFox, etc.) obtido da
seguinte forma:
http_request = new XMLHttpRequest();!

Nos browsers Microsoft antigos, h duas formas

http_request = new ActiveXObject("Msxml2.XMLHTTP");!
http_request = new
ActiveXObject("Microsoft.XMLHTTP");!

dependendo da verso

Conexo Java 2006

 XMLHttpRequest cross-browser
A soluo lidar com os diferentes browsers
var http_request = false;!
if (window.XMLHttpRequest) { // Mozilla, Safari, ...!
http_request = new XMLHttpRequest();!
} else if (window.ActiveXObject) { // IE!
try {!
http_request = new ActiveXObject("Msxml2.XMLHTTP");!
} catch (e) {!
try {!
http_request = new ActiveXObject("Microsoft.XMLHTTP");!
} catch (e) {}!
}!
}!
!
if (!http_request) {!
alert('Giving up :( Cannot create an XMLHTTP instance');!
return false;!
}!
// agora pode usar o http_request!

Conexo Java 2006

 Passo 2:
Iniciando um Request
1. Pegue o que for necessrio do formulrio Web
dado = document.getElementById(campo1).value;!

2. Construa a URL de conexo

url = /scripts/dados.php?dado=escape(dado);!

3. Abra conexo ao servidor

http_request.open("GET", url, true); !

4. Defina uma funo para executar quando terminar

http_request.onreadystatechange = updatePage; !

5. Envie a requisio
http_request.send(null);!

Conexo Java 2006

 Propriedades importantes
onreadystatechange
deve receber o nome de uma funo que ser
executada quando a requisio terminar (callback)
readyState
deve ser lida para se saber em que estado est a
resposta; o estado til 4
status
contm o status HTTP (200, 404, etc.)
responseText e responseXML
contm dados da resposta

Conexo Java 2006

 Passo 3:
Obtendo uma Resposta
1. No faa nada at que o valor de readyState seja 4
2. Leia o que est em responseText ou responseXML
Exemplo (se onreadystatechange apontar para a
funo abaixo, o texto de resposta ser gravado no
value do objeto #resposta)

function updatePage() {!
if (http_request.readyState == 4) { !
var response = http_request.responseText; !
document.getElementById(resposta").value !
= response; !
} !
} !
Pode-se chamar o mtodo de conexo usando o evento onChange
dos campos do form HTML (veja demonstrao a seguir)
Conexo Java 2006
 Passo 4:
Processando a Resposta
A resposta pode retornar texto (text/plain)
ou XML (application/xml, text/xml)
Se for texto (responseText) ela pode ser
usada como est ou ser processada
(usando expresses regulares, etc.)
Se for XML (responseXml), pode ser
manipulada usando DOM e ferramentas
XML para extrair campos significativos

Conexo Java 2006

 4 Demonstrao
Fonte: Make asynchronous requests with
JavaScript and Ajax (Brett McLaughin)
http://www-128.ibm.com/developerworks/
web/library/wa-ajaxintro2/index.html

Conexo Java 2006

 Obtendo o XMLHttpRequest
<script language="javascript" type="text/javascript">
var request = false;
try {
request = new XMLHttpRequest();
} catch (trymicrosoft) {
try {
request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (othermicrosoft) {
try {
request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (failed) {
request = false;
}
}
}

if (!request)
alert("Error initializing XMLHttpRequest!");

function getCustomerInfo() {
Funo de conexo: usar o
}
objeto request para criar e enviar
</script> uma requisio ao servidor

Conexo Java 2006

Passo 2: iniciando uma requisio
Quando o contedo mudar, ser
chamada esta funo que ir criar e
enviar uma requisio Ajax

<body>
<p><img src="breakneck-logo_4c.gif" alt="Break Neck Pizza" /></p>
<form action="POST">
<p>Enter your phone number:
<input type="text" size="14" name="phone" id="phone"
onChange="getCustomerInfo();" />
</p>
<p>Your order will be delivered to:</p>
<div id="address"></div>
<p>Type your order in here:</p>
<p><textarea name="order" rows="6" cols="50" id="order"></
textarea></p>
<p><input type="submit" value="Order Pizza" id="submit" /></p>
</form>
</body>

Conexo Java 2006

 Passo 2: iniciando uma requisio assncrona
(disparada pelo onChange tela anterior)
<script>
function getCustomerInfo() {
var phone = document.getElementById("phone").value;
var url = "/cgi-local/lookupCustomer.php?phone=" + escape(phone);
request.open("GET", url, true);
request.onreadystatechange = updatePage;
request.send(null);
}
Funo que vai receber o evento
function updatePage() {
if (request.readyState == 4) { Passo 3: obtendo uma resposta
if (request.status == 200) {
var response = request.responseText.split("|");
document.getElementById("order").value = response[0];
document.getElementById("address").innerHTML =
response[1].replace(/\n/g, "
");
} else
alert("status is " + request.status);
}
} Passo 4: usando a resposta
</script>

Conexo Java 2006

 Ready States
Pode haver 5 estados durante a requisio e resposta
assncrona
Eles so lidos atravs da propriedade readyState
0 no inicializado
1 no enviado
2 sendo processado (cabealhos)
3 sendo processado (parte dos dados)
4 concludo
So dependentes de browser (o nico realmente
confivel 4)

Conexo Java 2006

 5 Resposta em XML
<ratings>
Facilita apresentao <show>
<title>Alias</title>
dos dados <rating>6.5</rating>
</show>
<show>
<title>Lost</title>
Exemplo <rating>14.2</rating>
</show>
<show>
Processamento <title>Six Degrees</title>
usando DOM <rating>9.1</rating>
</show>
</ratings>

var xmlDoc = request.responseXML;

var showElements = xmlDoc.getElementsByTagName("show");
for (var x=0; x<showElements.length; x++) {
var title = showElements[x].childNodes[0].value;
var rating = showElements[x].childNodes[1].value;
}

Conexo Java 2006

 Transferncia de objetos
O estado de objetos pode ser passado do
servidor para o JavaScript no cliente atravs da
serializao em formato XML
Requer que o servidor converta objeto para XML (ex:
usando mapeamento) e que cliente processe XML
(usando DOM)
Solues de baixo nvel incluem solues prprias,
JAXB, templates e a API JSON (JavaScript Object
Notation)
Soluo mais fcil usar frameworks

Conexo Java 2006

 6 Frameworks
Para qualquer aplicao essencial entender
os fundamentos da programao com Ajax
Para trabalhar com aplicaes mais complexas,
importante poder trabalhar em um nvel de
abstrao maior
Soluo: usar frameworks
Principais frameworks para Java
DOJO (usado em componentes JSF)
DWR (Direct Web Remoting)

Conexo Java 2006

 DWR Direct Web Remoting
Soluo simples da Apache
http://getahead.ltd.uk/dwr/
Permite que cdigo em um browser use
funes Java como se estivesse no
browser (gera JS a partir de classes Java)
Consiste de duas partes
Um servlet
Uma API JavaScript

Conexo Java 2006

Arquitetura

Fonte: DWR
Conexo Java 2006
 Como usar DWR (1)
1. Baixe o pacote em http://getahead.ltd.uk/dwr/
2. Instale o arquivo dwr.jar no seu WEB-INF/lib
3. Configure seu web.xml
<servlet>!
<servlet-name>dwr-invoker</servlet-name>!
<servlet-class>uk.ltd.getahead.dwr.DWRServlet</servlet-
class>!
<init-param>!
<param-name>debug</param-name>!
<param-value>true</param-value>!
</init-param>!
</servlet>!
!
<servlet-mapping>!
<servlet-name>dwr-invoker</servlet-name>!
<url-pattern>/dwr/*</url-pattern>!
</servlet-mapping>!

Conexo Java 2006

 Como usar DWR (2)
4. Crie um arquivo dwr.xml e guarde no WEB-INF
<!DOCTYPE dwr PUBLIC!
"-//GetAhead Limited//DTD Direct Web Remoting 1.0//EN"!
"http://www.getahead.ltd.uk/dwr/dwr10.dtd">!
!
<dwr>!
<allow>!
<create creator="new" javascript="JDate">!
<param name="class" value="java.util.Date"/>!
</create>!
<create creator="new" javascript="Hello">!
<param name="class" value="hello.HelloWorld"/>!
</create>!
</allow>!
</dwr>!

Determina quais classes o DWR pode criar e

disponibilizar para uso pelo JavaScript (classes
precisam ter construtor default)
Conexo Java 2006
 Como usar DWR (3)
5. Abra a URL http://localhost:8080/contexto/dwr/
Lista de classes disponiveis
Lista de mtodos que podem ser chamados

Conexo Java 2006

 Como usar DWR (4)
6. Crie aplicaes que usem os objetos
Veja o cdigo fonte da classe em
http://localhost:8080/contexto/dwr/
Ache a linha que executa o mtodo que voc
quer usar
Cole o texto em uma pgina HTML ou JSP
Inclua os arquivos JavaScript necessrios
<script src='dwr/interface/HelloWorld.js'></script> !
<script src='dwr/engine.js'></script> !

Conexo Java 2006

 Exemplo de uso DWR
Suponha que tenhamos o seguinte cdigo Java
public class HelloWorld {!
public String getMessage(String n) {...}!
}!

Pode-se usar o JavaScript das seguinte formas:

<script src="dwr/interface/HelloWorld.js"></script>!
...!
function handleGetData(str) { !
alert(str); !
}!
HelloWorld.getMessage(Hello, handleGetData); !

ou simplesmente
HelloWorld.getMessage(Hello, !
function(str) { alert(str); }); !

Conexo Java 2006

 Como passar objetos
Suponha que existam as seguintes classes
public class PedidoDAO {!
public void addPedido(Pedido p) {...}!
}!
public Pedido {!
private String nome;!
private double preco;!
private int[] categorias;!
}!

Um Pedido pode ser adicionado em JavaScript da seguinte forma

(notao JSON):
var pedido = { !
nome: Computador, !
preco: 345.99,!
categorias:[456, 999]!
};!
PedidoDAO.addPedido(pedido);!

Conexo Java 2006

 dwr.xml mapeamento essencial
Veja mais em http://getahead.ltd.uk/dwr/server/dwrxml
O tag mais importante dentro de <dwr> <allow>.
Dentro de <allow> h
Creators <create> e Converters <convert>
Creators so necessrios para cada classe em que se
executa mtodos
use com atributo creator=new por enquanto ou veja mais em
getahead.ltd.uk/dwr/server/dwrxml/creators)
javascript=NomeDoObj
scope=request|session|...
<param name=class value=nome.da.Classe />
Converters servem para converter tipos
Conexo Java 2006
 Exemplo
<!DOCTYPE dwr PUBLIC!
"-//GetAhead Limited//DTD Direct Web Remoting 1.0//EN"!
"http://www.getahead.ltd.uk/dwr/dwr10.dtd">!
<dwr>!
<allow>!
<create creator="new" javascript=dao">!
<param name="class value=exemplo.ProdutoDAO"/>!
<include method="getProduto"/> !
<include method=addProduto"/> !
</create> !
<convert converter="bean match=exemplo.Produto">!
<param name="include" value=id, nome, preco"/>!
</convert>!
</allow>!
</dwr>!

Conexo Java 2006

 Utilitrios DWR (opcional)
Inclua util.js
$() l elementos pelo ID:
$ equivale a document.getElementById
Ou seja $(form1) recupera o elemento form1
Outras funes (veja documentao em
http://getahead.ltd.uk/dwr/browser/util/gettext)
getValue(id) / setValue(id, value)
addRows(...) e removeAllRows(id) facilita a
manipulao de tabelas (veja exemplos)

Conexo Java 2006

 Hands-on: como comear
Instale e teste os exemplos
Analise o cdigo e tente incluir as
funcionalidades em sua aplicao.
Lembre-se de
Verificar o dwr.xml
Verificar se objetos (classes) esto no WEB-
INF/classes
Verificar se arquivos JS esto sendo
carregados

Conexo Java 2006

 Hands-on: exerccio
Monte a aplicao abaixo, que permite listar produtos
em uma tabela (nome e preo), acrescentar e remover,
usando DWR

Dicas:
Utilize cdigo HTML disponvel
Siga o passo-a-passo para instalar o DWR
Use como exemplo http://getahead.ltd.uk/dwr/examples/table

Conexo Java 2006

 Outras alternativas: JSF / DOJO
Vrios componentes JSF suportam Ajax. Para us-
los em uma pgina preciso importar as bibliotecas
padro
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>!
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>!
<%@ taglib prefix="dl" uri="http://java.sun.com/blueprints/dl" %>

E depois utilizar o tag abaixo para mapear os

elementos desejados
<dl:dlabel valueBinding="#{Classe.prop}" /> !
Tutorial completo sobre essa tcnica em
http://java.sun.com/javaee/javaserverfaces/ajax/tutorial.jsp

Conexo Java 2006

 Concluses
Ajax uma tcnica para aplicaes Web com programao
lado-cliente que permite maior eficincia e resposta
Ajax depende de programao em JavaScript e utiliza
vrias tecnologias j existentes e consagradas como CSS,
JavaScript, DHTML e DOM
Integrao com Java atravs de frameworks permite que o
modelo de objetos seja compartilhado entre cliente e
servidor
As mais populares solues Java hoje so o DWR e o
DOJO (nativo JSF)

Conexo Java 2006

 Obrigado

helder@argonavis.com.br

Conexo Java 2006