SlideShare uma empresa Scribd logo
1 de 64
Baixar para ler offline
Conexão Java 2006
Introdução ao Ajax
Helder da Rocha
(helder@argonavis.com.br)
Conexão Java 2006
Programa (1)
1.  O que é Ajax?
–  Por que usar?
–  Quando usar?
–  Quem usa?
–  Alternativas
2.  Fundamentos tecnológicos
–  Arquitetura Web tradicional e Web 2.0
–  XML
–  JavaScript
–  CSS
–  DOM
Conexão Java 2006
Programa (2)
3.  Ajax passo-a-passo: requisição e resposta
–  Obtendo o XMLHttpRequest
–  Iniciando o request)
–  Obtendo a resposta
–  Processando a resposta
4.  Demonstração
5.  Processamento de respostas em XML
6.  Frameworks para uso com Java
–  Passo-a-passo com DWR
–  Overview de JSF
Conexão Java 2006
1 O que é Ajax?
– O que é Ajax? O que não é Ajax?
– Por que usar?
– Quando usar?
– Quem usa?
– Alternativas
Conexão Java 2006
Ajax
•  Ajax é uma solução lado-cliente baseada
em HTML, JavaScript e DOM que permite
que a comunicação entre o browser e o
servidor Web ocorra de forma assíncrona
•  Ajax não é uma linguagem nova, nem
mesmo uma tecnologia nova
•  Ajax não é uma solução lado-servidor
Conexão Java 2006
Por que usar?
•  A comunicação HTTP é ineficiente
– Para cada requisição há uma resposta
– Cada resposta devolve uma página inteira
– É preciso esperar toda a página carregar
antes de usar uma aplicação Web
•  Ajax permite comunicação assíncrona
– Pequenos trechos de dados podem ser
transferidos assíncronamente
– Permite que aplicação funcione enquanto
dados são transferidos
Conexão Java 2006
Quando usar?
•  Use em aplicações Web interativas que
sofrem com o modelo requisição-resposta
– Aplicações com menus, muitas opções, que
requerem interatividade em tempo real
– Aplicações que modelam aplicações gráficas
de desktop
•  Não use em aplicações que realmente
precisam carregar uma página inteira
– Ex: alguns tipos de sistemas de informação
Conexão Java 2006
Quem usa? Exemplos
•  Aplicações mais populares
– Google Maps
– Google GMail
– Yahoo Flickr
– ...
Conexão Java 2006
Alternativas
•  Flash
•  SVG
•  Java Web Start
Conexão Java 2006
2 Fundamentos tecnológicos
•  Arquitetura Web e Web 2.0
•  XML
•  JavaScript
•  CSS
•  DOM
Conexão Java 2006
Arquitetura Web
•  Baseada em cliente, protocolo HTTP e servidor
•  Principais características
–  Protocolo de transferência de arquivos (HTTP: RFC 2068) não mantém
estado da sessão do cliente
–  Servidor representa sistema de arquivos virtual e responde a comandos
que contém URLs
–  Cabeçalhos contém meta-informação de requisição e resposta
Máquina www.xyz.com
Abre conexão para www.xyz.com:80
Fecha conexão
Uma requisição:
GET /index.html HTTP/1.1 ...
Uma resposta:
HTTP/1.1 200 OK ...
SoquetedeServiço:80
index.html
/
Cliente
HTTP
(browser)
Servidor
HTT’P
Só é garantida uma
requisição/resposta
por conexão
Conexão Java 2006
•  1. Página HTML
<img src="tomcat.gif"/>
•  2. Requisição: browser solicita imagem
•  3. Resposta: servidor devolve cabeçalho + stream
GET /tomcat.gif HTTP/1.1
User-Agent: Mozilla 6.0 [en] (Windows 95; I)
Cookies: querty=uiop; SessionID=D236S11943245
HTTP 1.1 200 OK
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 6¤Ü4 ...
Interpreta
HTML
Gera
requisição
GET
Linha em
branco
termina
cabeçalhos
tomcat.gif
Exemplo de requisição/resposta HTTP
Conexão Java 2006
Ciclo de vida de aplicação Web
Browser
Pagina
Pagina
Pagina
Pagina
Servidor
Sessão
Conexão Java 2006
Ciclo de vida de aplicação Ajax
(Web 2.0)
Browser
Pagina
Pagina
Servidor
Sessão
Conexão Java 2006
XML
•  Fornece um meio simples de transmitir
informações estruturadas entre o cliente e o
servidor
–  Pode-se transferir toda a informação de objetos
independente de linguagem
–  Validação XML Schema
–  Manipulação via DOM, SAX, mapeamento objeto-
XML, JAXB, Web Services
•  Forma mais comum para devolver dados ao
cliente (garante mais controle)
Conexão Java 2006
Documento XML
Conexão Java 2006
Conexão Java 2006
JavaScript
•  Linguagem de propósito geral projetada para ser
embutida em aplicações
•  Permite interação com o modelo de objetos do
browser e com o DOM
•  Aplicações Ajax são escritas em JavaScript
•  Incluído na página de três formas
–  <script src=“url_da_api.js” />!
–  <script> ... codigo estático </script>!
–  Dentro de atributos especiais (onload, onXXX) ou
usando prefixo javascript: em atributos comuns
Conexão Java 2006
Exemplo de JavaScript
biblio.js
pagina.html
Conexão Java 2006
JavaScript
•  Tem palavras chave parecidas com as de Java
(mas têm outras)
•  Não é strongly-typed como Java
–  Declaração de variáveis globais é opcional
–  Declaração de variáveis locais com “var”
•  Integra-se com Java
•  É baseada em objetos (pode-se criar objetos a
partir de protótipos mas não de herança)
–  Não suporta sobrecarga ou sobreposição
–  Funções (function) são objetos
Conexão Java 2006
Conexão Java 2006
JavaScript no browser
•  Os objetos, variáveis, etc. estão disponíveis a partir do
objeto raiz, que no browser é document
•  Todos os elementos da página estão em uma árvore a
partir de document
•  Pode-se criar novos elementos e anexá-los a document,
fazendo-os aparecer dinamicamente na página (usando
o DOM – Document Object Model)
•  Exemplo
–  document.forms[0] – primeiro formulário da página
–  document.getElementById(“botao_2”) – acessa um
elemento HTML que tenha ID botao_2!
Conexão Java 2006
CSS
•  Permite definir estilos reutilizáveis para
elementos de página
•  Estilos podem ser atribuídos estaticamente a
uma página e alterados dinamicamente via
JavaScript e DOM
•  Incluídos numa página de 3 formas:
–  Via <link rel=stylesheet href=“folha.css” />!
–  <style> ... CSS ... </style>!
–  Em atributos <span style=“...”>...</span>!
•  Veja exemplos
Conexão Java 2006
CSS Sintaxe básica
•  Uma folha de estilos é uma coleção de regras
•  Cada regra tem o formato:
–  seletores { propriedade: valor, ... }
•  Seletores são elementos, ids, classes:
–  h1, h2 {...}!
–  h1.principal, .outros {...}!
–  #id35 {...}!
•  Classes e IDs são definidos em elementos
–  <h1 class=“principal titulo” id=“id99”>!
•  Propriedades definem estilo:
–  h1 {color: red}!
Conexão Java 2006
CSS para layout
•  Há várias propriedades que definem layout e
visibilidade
–  position, absolute, relative, static
–  visibility
–  display
•  Várias podem ser alteradas via JavaScript
para realizar mudanças dinâmicas de
posicionamento e visibilidade.
Conexão 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”;!
Conexão Java 2006
DOM
•  É impossível usar JavaScript no browser
sem usar document, que é a raiz do DOM
•  O DOM é um modelo de objetos padrão,
independente de linguagem, usado para
representar elementos, atributos, nós de
texto, etc.
•  Tem uma API padrão independente de
linguagem
Conexão Java 2006
Hierarquia do DOM
Conexão Java 2006
Como criar nós, atributos
var doc = document;
Conexão Java 2006
Como montar uma árvore
Conexão Java 2006
innerHTML
•  Método menos prolixo para gerar XML/
HTML (evita o uso de createElement e
appendChild)
!
pai.innerHtml = “<filho>...</filho>”;!
!
•  Mais prático para alterações dinâmicas
(por exemplo, quando um fragmento é
recebido assincronamente)
Conexão Java 2006
Exemplos interativos
•  Alerta em JavaScript
•  Alteração de formulário em JavaScript
•  Ocultação com JavaScript e CSS
•  Alteração de estilo com CSS
•  Localização de elemento com DOM
•  Criação de árvore DOM dinâmica
Conexão Java 2006
Conclusões
•  Aplicações Ajax são escritas em
JavaScript
•  CSS e DOM permitem grande parte do
comportamento dinâmico (DHTML) usado
em aplicações Ajax através do uso de
JavaScript
•  É importante conhecer essas tecnologias
para utilizar melhor os recursos do Ajax
Conexão Java 2006
3 Ajax passo-a-passo
•  Passo 1: Obtendo o XMLHttpRequest
– Independente do browser
•  Passo 2: Abrindo uma conexão
– Métodos do objeto XMLHttpRequest
•  Passo 3: Obtendo a resposta
– Estados (ready states)
•  Passo 4: Processando a resposta
– Obtendo e usando os dados
Conexão Java 2006
Passo 1:
Obtendo o XMLHttpRequest
•  O XMLHttpRequest é o objeto do DOM que irá realizar
a comunicação assíncrona
–  Ou seja, é o coração 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 versão
Conexão Java 2006
XMLHttpRequest cross-browser
•  A solução é 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!
Conexão Java 2006
Passo 2:
Iniciando um Request
1. Pegue o que for necessário do formulário Web
dado = document.getElementById(“campo1”).value;!
2. Construa a URL de conexão
url = “/scripts/dados.php?dado=escape(dado)”;!
3. Abra conexão ao servidor
http_request.open("GET", url, true); !
4. Defina uma função para executar quando terminar
http_request.onreadystatechange = updatePage; !
5. Envie a requisição
http_request.send(null);!
Conexão Java 2006
Propriedades importantes
•  onreadystatechange
–  deve receber o nome de uma função que será
executada quando a requisição terminar (callback)
•  readyState
–  deve ser lida para se saber em que estado está a
resposta; o estado útil é 4
•  status
–  contém o status HTTP (200, 404, etc.)
•  responseText e responseXML
–  contém dados da resposta
Conexão Java 2006
Passo 3:
Obtendo uma Resposta
1. Não faça nada até que o valor de readyState seja 4
2. Leia o que está em responseText ou responseXML
•  Exemplo (se onreadystatechange apontar para a
função 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 método de conexão usando o evento onChange
dos campos do form HTML (veja demonstração a seguir)
Conexão 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 expressões regulares, etc.)
•  Se for XML (responseXml), pode ser
manipulada usando DOM e ferramentas
XML para extrair campos significativos
Conexão Java 2006
4 Demonstração
•  Fonte: Make asynchronous requests with
JavaScript and Ajax (Brett McLaughin)
– http://www-128.ibm.com/developerworks/
web/library/wa-ajaxintro2/index.html
Conexão Java 2006
<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() {
}
</script>
Obtendo o XMLHttpRequest
Função de conexão: usará o
objeto request para criar e enviar
uma requisição ao servidor
Conexão Java 2006
<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>
Passo 2: iniciando uma requisição
Quando o conteúdo mudar, será
chamada esta função que irá criar e
enviar uma requisição Ajax
Conexão Java 2006
<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);
}
function updatePage() {
if (request.readyState == 4) {
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);
}
}
</script>
Passo 2: iniciando uma requisição assíncrona
(disparada pelo onChange – tela anterior)
Passo 3: obtendo uma resposta
Função que vai receber o evento
Passo 4: usando a resposta
Conexão Java 2006
Ready States
•  Pode haver 5 estados durante a requisição e resposta
assíncrona
•  Eles são lidos através da propriedade readyState
–  0 – não inicializado
–  1 – não enviado
–  2 – sendo processado (cabeçalhos)
–  3 – sendo processado (parte dos dados)
–  4 – concluído
•  São dependentes de browser (o único realmente
confiável é 4)
Conexão Java 2006
5 Resposta em XML
•  Facilita apresentação
dos dados
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;
}
<ratings>
<show>
<title>Alias</title>
<rating>6.5</rating>
</show>
<show>
<title>Lost</title>
<rating>14.2</rating>
</show>
<show>
<title>Six Degrees</title>
<rating>9.1</rating>
</show>
</ratings>
Exemplo
Processamento
usando DOM
Conexão Java 2006
Transferência de objetos
•  O estado de objetos pode ser passado do
servidor para o JavaScript no cliente através da
serialização em formato XML
–  Requer que o servidor converta objeto para XML (ex:
usando mapeamento) e que cliente processe XML
(usando DOM)
–  Soluções de baixo nível incluem soluções próprias,
JAXB, templates e a API JSON (JavaScript Object
Notation)
–  Solução mais fácil é usar frameworks
Conexão Java 2006
6 Frameworks
•  Para qualquer aplicação é essencial entender
os fundamentos da programação com Ajax
•  Para trabalhar com aplicações mais complexas,
é importante poder trabalhar em um nível de
abstração maior
•  Solução: usar frameworks
•  Principais frameworks para Java
–  DOJO (usado em componentes JSF)
–  DWR (Direct Web Remoting)
Conexão Java 2006
DWR – Direct Web Remoting
•  Solução simples da Apache
– http://getahead.ltd.uk/dwr/
•  Permite que código em um browser use
funções Java como se estivesse no
browser (gera JS a partir de classes Java)
•  Consiste de duas partes
– Um servlet
– Uma API JavaScript
Conexão Java 2006
Arquitetura
Fonte: DWR
Conexão 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>!
Conexão 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)
Conexão Java 2006
Como usar DWR (3)
5. Abra a URL http://localhost:8080/contexto/dwr/
–  Lista de classes disponiveis
–  Lista de métodos que podem ser chamados
Conexão Java 2006
Como usar DWR (4)
•  6. Crie aplicações que usem os objetos
– Veja o código fonte da classe em
http://localhost:8080/contexto/dwr/
– Ache a linha que executa o método que você
quer usar
– Cole o texto em uma página HTML ou JSP
– Inclua os arquivos JavaScript necessários
<script src='dwr/interface/HelloWorld.js'></script> !
<script src='dwr/engine.js'></script> !
Conexão Java 2006
Exemplo de uso DWR
•  Suponha que tenhamos o seguinte código 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); !
HelloWorld.getMessage(“Hello”, !
function(str) { alert(str); }); !
ou simplesmente
Conexão Java 2006
Como passar objetos
•  Suponha que existam as seguintes classes
•  Um Pedido pode ser adicionado em JavaScript da seguinte forma
(notação JSON):
public class PedidoDAO {!
public void addPedido(Pedido p) {...}!
}!
public Pedido {!
private String nome;!
private double preco;!
private int[] categorias;!
}!
var pedido = { !
nome: “Computador”, !
preco: 345.99,!
categorias:[456, 999]!
};!
PedidoDAO.addPedido(pedido);!
Conexão 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 são necessários para cada classe em que se
executa métodos
–  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
Conexão 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>!
Conexão Java 2006
Utilitários DWR (opcional)
•  Inclua util.js
•  $() lê elementos pelo ID:
–  $ equivale a document.getElementById
–  Ou seja $(form1) recupera o elemento form1
•  Outras funções (veja documentação em
http://getahead.ltd.uk/dwr/browser/util/gettext)
–  getValue(id) / setValue(id, value)
–  addRows(...) e removeAllRows(id) – facilita a
manipulação de tabelas (veja exemplos)
Conexão Java 2006
Hands-on: como começar
•  Instale e teste os exemplos
•  Analise o código e tente incluir as
funcionalidades em sua aplicação.
Lembre-se de
– Verificar o dwr.xml
– Verificar se objetos (classes) estão no WEB-
INF/classes
– Verificar se arquivos JS estão sendo
carregados
Conexão Java 2006
Hands-on: exercício
•  Monte a aplicação abaixo, que permite listar produtos
em uma tabela (nome e preço), acrescentar e remover,
usando DWR
•  Dicas:
–  Utilize código HTML disponível
–  Siga o passo-a-passo para instalar o DWR
–  Use como exemplo http://getahead.ltd.uk/dwr/examples/table
Conexão Java 2006
Outras alternativas: JSF / DOJO
•  Vários componentes JSF suportam Ajax. Para usá-
los em uma página é preciso importar as bibliotecas
padrão
<%@ 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 técnica em
http://java.sun.com/javaee/javaserverfaces/ajax/tutorial.jsp
Conexão Java 2006
Conclusões
•  Ajax é uma técnica para aplicações Web com programação
lado-cliente que permite maior eficiência e resposta
•  Ajax depende de programação em JavaScript e utiliza
várias tecnologias já existentes e consagradas como CSS,
JavaScript, DHTML e DOM
•  Integração com Java através de frameworks permite que o
modelo de objetos seja compartilhado entre cliente e
servidor
•  As mais populares soluções Java hoje são o DWR e o
DOJO (nativo JSF)
Conexão Java 2006
Obrigado
helder@argonavis.com.br

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Apresentação sobre MVVMC
Apresentação sobre MVVMCApresentação sobre MVVMC
Apresentação sobre MVVMC
 
Framework Yii
Framework YiiFramework Yii
Framework Yii
 
Minicurso de JavaScript (Portuguese)
Minicurso de JavaScript (Portuguese)Minicurso de JavaScript (Portuguese)
Minicurso de JavaScript (Portuguese)
 
AJAX
AJAXAJAX
AJAX
 
As grandes novidades do JSF 2.0!
As grandes novidades do JSF 2.0!As grandes novidades do JSF 2.0!
As grandes novidades do JSF 2.0!
 
Servlets e JSP
Servlets e JSPServlets e JSP
Servlets e JSP
 
MongoDB + PHP
MongoDB + PHPMongoDB + PHP
MongoDB + PHP
 
WebService Restful em Java
WebService Restful em JavaWebService Restful em Java
WebService Restful em Java
 
introdução a ajax
introdução a ajaxintrodução a ajax
introdução a ajax
 
Utilizando NoSQL no desenvolvimento de soluções inteligentes
Utilizando NoSQL no desenvolvimento de soluções inteligentesUtilizando NoSQL no desenvolvimento de soluções inteligentes
Utilizando NoSQL no desenvolvimento de soluções inteligentes
 
Curso de JSP
Curso de JSPCurso de JSP
Curso de JSP
 
REST Web Services com Java
REST Web Services com JavaREST Web Services com Java
REST Web Services com Java
 
DOMinando JavaScript
DOMinando JavaScriptDOMinando JavaScript
DOMinando JavaScript
 
jsp-intro
jsp-introjsp-intro
jsp-intro
 
Introdução a programação para a Internet
Introdução a programação para a InternetIntrodução a programação para a Internet
Introdução a programação para a Internet
 
Desenvolvendo com Dojo Toolkit
Desenvolvendo com Dojo ToolkitDesenvolvendo com Dojo Toolkit
Desenvolvendo com Dojo Toolkit
 
Introdução básica ao JavaScript
Introdução básica ao JavaScriptIntrodução básica ao JavaScript
Introdução básica ao JavaScript
 
Abstração do banco de dados com PHP Doctrine
Abstração do banco de dados com PHP DoctrineAbstração do banco de dados com PHP Doctrine
Abstração do banco de dados com PHP Doctrine
 
Introdução Ruby 1.8.7 + Rails 3
Introdução Ruby 1.8.7 + Rails 3Introdução Ruby 1.8.7 + Rails 3
Introdução Ruby 1.8.7 + Rails 3
 
Jboss Seam
Jboss SeamJboss Seam
Jboss Seam
 

Destaque

Desenvovelndo Aplicações com PHP, AJAX e Y!UI Yahoo User Interface
Desenvovelndo Aplicações com PHP, AJAX e Y!UI Yahoo User InterfaceDesenvovelndo Aplicações com PHP, AJAX e Y!UI Yahoo User Interface
Desenvovelndo Aplicações com PHP, AJAX e Y!UI Yahoo User InterfaceDomingos Teruel
 
Gráficos Vetoriais na Web com SVG
Gráficos Vetoriais na Web com SVGGráficos Vetoriais na Web com SVG
Gráficos Vetoriais na Web com SVGHelder da Rocha
 

Destaque (6)

Tutorial EJB 3.0 (2009)
Tutorial EJB 3.0 (2009)Tutorial EJB 3.0 (2009)
Tutorial EJB 3.0 (2009)
 
Desenvovelndo Aplicações com PHP, AJAX e Y!UI Yahoo User Interface
Desenvovelndo Aplicações com PHP, AJAX e Y!UI Yahoo User InterfaceDesenvovelndo Aplicações com PHP, AJAX e Y!UI Yahoo User Interface
Desenvovelndo Aplicações com PHP, AJAX e Y!UI Yahoo User Interface
 
Java Messaging Service
Java Messaging ServiceJava Messaging Service
Java Messaging Service
 
Olha pro ceu (2013)
Olha pro ceu (2013)Olha pro ceu (2013)
Olha pro ceu (2013)
 
Tutorial JSF 2.0 (2012)
Tutorial JSF 2.0 (2012)Tutorial JSF 2.0 (2012)
Tutorial JSF 2.0 (2012)
 
Gráficos Vetoriais na Web com SVG
Gráficos Vetoriais na Web com SVGGráficos Vetoriais na Web com SVG
Gráficos Vetoriais na Web com SVG
 

Semelhante a Conexão Java 2006: Introdução ao Ajax

CóPia De Minicurso Smsi
CóPia De Minicurso SmsiCóPia De Minicurso Smsi
CóPia De Minicurso Smsitaniamaciel
 
Curso de WebServlets (Java EE 7)
Curso de WebServlets (Java EE 7)Curso de WebServlets (Java EE 7)
Curso de WebServlets (Java EE 7)Helder da Rocha
 
Apache Wicket - Desenvolvimento WEB orientado a componentes
Apache Wicket - Desenvolvimento WEB orientado a componentesApache Wicket - Desenvolvimento WEB orientado a componentes
Apache Wicket - Desenvolvimento WEB orientado a componentesCI&T
 
T03_LM3: Javascript (2013-2014)
T03_LM3: Javascript (2013-2014)T03_LM3: Javascript (2013-2014)
T03_LM3: Javascript (2013-2014)Carlos Santos
 
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 sobre desenvolvimento web
Introdução sobre desenvolvimento webIntrodução sobre desenvolvimento web
Introdução sobre desenvolvimento webRodrigo Rodrigues
 
PHP e AJAX: do Request ao Framework
PHP e AJAX: do Request ao FrameworkPHP e AJAX: do Request ao Framework
PHP e AJAX: do Request ao FrameworkRafael Dohms
 
Desenvolvimento Web com JSF
Desenvolvimento Web com JSFDesenvolvimento Web com JSF
Desenvolvimento Web com JSFDalton Valadares
 
Novidades do JAX-RS 2.0
Novidades do JAX-RS 2.0Novidades do JAX-RS 2.0
Novidades do JAX-RS 2.0jesuinoPower
 
Projeto Octopus - Database Sharding para ActiveRecord
Projeto Octopus - Database Sharding para ActiveRecordProjeto Octopus - Database Sharding para ActiveRecord
Projeto Octopus - Database Sharding para ActiveRecordtchandy
 
PHP e AJAX: do Request ao Framework
PHP e AJAX: do Request ao FrameworkPHP e AJAX: do Request ao Framework
PHP e AJAX: do Request ao FrameworkRafael Dohms
 
Slide Aula - Curso CakePHP
Slide Aula - Curso CakePHPSlide Aula - Curso CakePHP
Slide Aula - Curso CakePHPRangel Javier
 
Nadando em Dinheiro com jQuery
Nadando em Dinheiro com jQueryNadando em Dinheiro com jQuery
Nadando em Dinheiro com jQueryReinaldo Junior
 

Semelhante a Conexão Java 2006: Introdução ao Ajax (20)

Ajax
AjaxAjax
Ajax
 
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
 
Curso de WebServlets (Java EE 7)
Curso de WebServlets (Java EE 7)Curso de WebServlets (Java EE 7)
Curso de WebServlets (Java EE 7)
 
Apache Wicket - Desenvolvimento WEB orientado a componentes
Apache Wicket - Desenvolvimento WEB orientado a componentesApache Wicket - Desenvolvimento WEB orientado a componentes
Apache Wicket - Desenvolvimento WEB orientado a componentes
 
T03_LM3: Javascript (2013-2014)
T03_LM3: Javascript (2013-2014)T03_LM3: Javascript (2013-2014)
T03_LM3: Javascript (2013-2014)
 
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
 
Fundamentos de arquitetura Web
Fundamentos de arquitetura WebFundamentos de arquitetura Web
Fundamentos de arquitetura Web
 
Introdução sobre desenvolvimento web
Introdução sobre desenvolvimento webIntrodução sobre desenvolvimento web
Introdução sobre desenvolvimento web
 
Curso jsf
Curso jsfCurso jsf
Curso jsf
 
PHP e AJAX: do Request ao Framework
PHP e AJAX: do Request ao FrameworkPHP e AJAX: do Request ao Framework
PHP e AJAX: do Request ao Framework
 
Desenvolvimento Web com JSF
Desenvolvimento Web com JSFDesenvolvimento Web com JSF
Desenvolvimento Web com JSF
 
jQuery
jQueryjQuery
jQuery
 
jQuery
jQueryjQuery
jQuery
 
Novidades do JAX-RS 2.0
Novidades do JAX-RS 2.0Novidades do JAX-RS 2.0
Novidades do JAX-RS 2.0
 
Projeto Octopus - Database Sharding para ActiveRecord
Projeto Octopus - Database Sharding para ActiveRecordProjeto Octopus - Database Sharding para ActiveRecord
Projeto Octopus - Database Sharding para ActiveRecord
 
Aula 1 apresentação
Aula 1   apresentaçãoAula 1   apresentação
Aula 1 apresentação
 
PHP e AJAX: do Request ao Framework
PHP e AJAX: do Request ao FrameworkPHP e AJAX: do Request ao Framework
PHP e AJAX: do Request ao Framework
 
Slide Aula - Curso CakePHP
Slide Aula - Curso CakePHPSlide Aula - Curso CakePHP
Slide Aula - Curso CakePHP
 
Nadando em Dinheiro com jQuery
Nadando em Dinheiro com jQueryNadando em Dinheiro com jQuery
Nadando em Dinheiro com jQuery
 

Mais de Helder da Rocha

Como criar um mapa temático interativo com dados abertos e D3.js
Como criar um mapa temático interativo com dados abertos e D3.jsComo criar um mapa temático interativo com dados abertos e D3.js
Como criar um mapa temático interativo com dados abertos e D3.jsHelder da Rocha
 
Transforming public data into thematic maps (TDC2019 presentation)
Transforming public data into thematic maps (TDC2019 presentation)Transforming public data into thematic maps (TDC2019 presentation)
Transforming public data into thematic maps (TDC2019 presentation)Helder da Rocha
 
TDC 2019: transformando 
dados
públicos
em mapas interativos
TDC 2019: transformando 
dados
públicos
em mapas interativosTDC 2019: transformando 
dados
públicos
em mapas interativos
TDC 2019: transformando 
dados
públicos
em mapas interativosHelder da Rocha
 
Padrões essenciais de mensageria para integração de sistemas
Padrões essenciais de mensageria para integração de sistemasPadrões essenciais de mensageria para integração de sistemas
Padrões essenciais de mensageria para integração de sistemasHelder da Rocha
 
Visualização de dados e a Web
Visualização de dados e a WebVisualização de dados e a Web
Visualização de dados e a WebHelder da Rocha
 
Eletrônica Criativa: criando circuitos com materiais alternativos
Eletrônica Criativa: criando circuitos com materiais alternativosEletrônica Criativa: criando circuitos com materiais alternativos
Eletrônica Criativa: criando circuitos com materiais alternativosHelder da Rocha
 
Introdução à Visualização de Dados (2015)
Introdução à Visualização de Dados (2015)Introdução à Visualização de Dados (2015)
Introdução à Visualização de Dados (2015)Helder da Rocha
 
API de segurança do Java EE 8
API de segurança do Java EE 8API de segurança do Java EE 8
API de segurança do Java EE 8Helder da Rocha
 
Curso de Java Persistence API (JPA) (Java EE 7)
Curso de Java Persistence API (JPA) (Java EE 7)Curso de Java Persistence API (JPA) (Java EE 7)
Curso de Java Persistence API (JPA) (Java EE 7)Helder da Rocha
 
Curso de Enterprise JavaBeans (EJB) (JavaEE 7)
Curso de Enterprise JavaBeans (EJB) (JavaEE 7)Curso de Enterprise JavaBeans (EJB) (JavaEE 7)
Curso de Enterprise JavaBeans (EJB) (JavaEE 7)Helder da Rocha
 
Introdução a JPA (2010)
Introdução a JPA (2010)Introdução a JPA (2010)
Introdução a JPA (2010)Helder da Rocha
 
Curso de RESTful WebServices em Java com JAX-RS (Java EE 7)
Curso de RESTful WebServices em Java com JAX-RS (Java EE 7)Curso de RESTful WebServices em Java com JAX-RS (Java EE 7)
Curso de RESTful WebServices em Java com JAX-RS (Java EE 7)Helder da Rocha
 
Minicurso de Segurança em Java EE 7
Minicurso de Segurança em Java EE 7Minicurso de Segurança em Java EE 7
Minicurso de Segurança em Java EE 7Helder da Rocha
 
Atualização Java 8 (2014)
Atualização Java 8 (2014)Atualização Java 8 (2014)
Atualização Java 8 (2014)Helder da Rocha
 
Curso de Java: Introdução a lambda e Streams
Curso de Java: Introdução a lambda e StreamsCurso de Java: Introdução a lambda e Streams
Curso de Java: Introdução a lambda e StreamsHelder da Rocha
 
Threads 07: Sincronizadores
Threads 07: SincronizadoresThreads 07: Sincronizadores
Threads 07: SincronizadoresHelder da Rocha
 
Threads 08: Executores e Futures
Threads 08: Executores e FuturesThreads 08: Executores e Futures
Threads 08: Executores e FuturesHelder da Rocha
 

Mais de Helder da Rocha (20)

Como criar um mapa temático interativo com dados abertos e D3.js
Como criar um mapa temático interativo com dados abertos e D3.jsComo criar um mapa temático interativo com dados abertos e D3.js
Como criar um mapa temático interativo com dados abertos e D3.js
 
Transforming public data into thematic maps (TDC2019 presentation)
Transforming public data into thematic maps (TDC2019 presentation)Transforming public data into thematic maps (TDC2019 presentation)
Transforming public data into thematic maps (TDC2019 presentation)
 
TDC 2019: transformando 
dados
públicos
em mapas interativos
TDC 2019: transformando 
dados
públicos
em mapas interativosTDC 2019: transformando 
dados
públicos
em mapas interativos
TDC 2019: transformando 
dados
públicos
em mapas interativos
 
Padrões essenciais de mensageria para integração de sistemas
Padrões essenciais de mensageria para integração de sistemasPadrões essenciais de mensageria para integração de sistemas
Padrões essenciais de mensageria para integração de sistemas
 
Visualização de dados e a Web
Visualização de dados e a WebVisualização de dados e a Web
Visualização de dados e a Web
 
Eletrônica Criativa: criando circuitos com materiais alternativos
Eletrônica Criativa: criando circuitos com materiais alternativosEletrônica Criativa: criando circuitos com materiais alternativos
Eletrônica Criativa: criando circuitos com materiais alternativos
 
Introdução à Visualização de Dados (2015)
Introdução à Visualização de Dados (2015)Introdução à Visualização de Dados (2015)
Introdução à Visualização de Dados (2015)
 
API de segurança do Java EE 8
API de segurança do Java EE 8API de segurança do Java EE 8
API de segurança do Java EE 8
 
Java 9, 10, 11
Java 9, 10, 11Java 9, 10, 11
Java 9, 10, 11
 
Curso de Java Persistence API (JPA) (Java EE 7)
Curso de Java Persistence API (JPA) (Java EE 7)Curso de Java Persistence API (JPA) (Java EE 7)
Curso de Java Persistence API (JPA) (Java EE 7)
 
Curso de Enterprise JavaBeans (EJB) (JavaEE 7)
Curso de Enterprise JavaBeans (EJB) (JavaEE 7)Curso de Enterprise JavaBeans (EJB) (JavaEE 7)
Curso de Enterprise JavaBeans (EJB) (JavaEE 7)
 
Introdução a JPA (2010)
Introdução a JPA (2010)Introdução a JPA (2010)
Introdução a JPA (2010)
 
Curso de RESTful WebServices em Java com JAX-RS (Java EE 7)
Curso de RESTful WebServices em Java com JAX-RS (Java EE 7)Curso de RESTful WebServices em Java com JAX-RS (Java EE 7)
Curso de RESTful WebServices em Java com JAX-RS (Java EE 7)
 
Minicurso de Segurança em Java EE 7
Minicurso de Segurança em Java EE 7Minicurso de Segurança em Java EE 7
Minicurso de Segurança em Java EE 7
 
Curso de Java: Threads
Curso de Java: ThreadsCurso de Java: Threads
Curso de Java: Threads
 
Atualização Java 8 (2014)
Atualização Java 8 (2014)Atualização Java 8 (2014)
Atualização Java 8 (2014)
 
Curso de Java: Introdução a lambda e Streams
Curso de Java: Introdução a lambda e StreamsCurso de Java: Introdução a lambda e Streams
Curso de Java: Introdução a lambda e Streams
 
Threads 07: Sincronizadores
Threads 07: SincronizadoresThreads 07: Sincronizadores
Threads 07: Sincronizadores
 
Threads 09: Paralelismo
Threads 09: ParalelismoThreads 09: Paralelismo
Threads 09: Paralelismo
 
Threads 08: Executores e Futures
Threads 08: Executores e FuturesThreads 08: Executores e Futures
Threads 08: Executores e Futures
 

Conexão Java 2006: Introdução ao Ajax

  • 1. Conexão Java 2006 Introdução ao Ajax Helder da Rocha (helder@argonavis.com.br)
  • 2. Conexão Java 2006 Programa (1) 1.  O que é Ajax? –  Por que usar? –  Quando usar? –  Quem usa? –  Alternativas 2.  Fundamentos tecnológicos –  Arquitetura Web tradicional e Web 2.0 –  XML –  JavaScript –  CSS –  DOM
  • 3. Conexão Java 2006 Programa (2) 3.  Ajax passo-a-passo: requisição e resposta –  Obtendo o XMLHttpRequest –  Iniciando o request) –  Obtendo a resposta –  Processando a resposta 4.  Demonstração 5.  Processamento de respostas em XML 6.  Frameworks para uso com Java –  Passo-a-passo com DWR –  Overview de JSF
  • 4. Conexão Java 2006 1 O que é Ajax? – O que é Ajax? O que não é Ajax? – Por que usar? – Quando usar? – Quem usa? – Alternativas
  • 5. Conexão Java 2006 Ajax •  Ajax é uma solução lado-cliente baseada em HTML, JavaScript e DOM que permite que a comunicação entre o browser e o servidor Web ocorra de forma assíncrona •  Ajax não é uma linguagem nova, nem mesmo uma tecnologia nova •  Ajax não é uma solução lado-servidor
  • 6. Conexão Java 2006 Por que usar? •  A comunicação HTTP é ineficiente – Para cada requisição há uma resposta – Cada resposta devolve uma página inteira – É preciso esperar toda a página carregar antes de usar uma aplicação Web •  Ajax permite comunicação assíncrona – Pequenos trechos de dados podem ser transferidos assíncronamente – Permite que aplicação funcione enquanto dados são transferidos
  • 7. Conexão Java 2006 Quando usar? •  Use em aplicações Web interativas que sofrem com o modelo requisição-resposta – Aplicações com menus, muitas opções, que requerem interatividade em tempo real – Aplicações que modelam aplicações gráficas de desktop •  Não use em aplicações que realmente precisam carregar uma página inteira – Ex: alguns tipos de sistemas de informação
  • 8. Conexão Java 2006 Quem usa? Exemplos •  Aplicações mais populares – Google Maps – Google GMail – Yahoo Flickr – ...
  • 9. Conexão Java 2006 Alternativas •  Flash •  SVG •  Java Web Start
  • 10. Conexão Java 2006 2 Fundamentos tecnológicos •  Arquitetura Web e Web 2.0 •  XML •  JavaScript •  CSS •  DOM
  • 11. Conexão Java 2006 Arquitetura Web •  Baseada em cliente, protocolo HTTP e servidor •  Principais características –  Protocolo de transferência de arquivos (HTTP: RFC 2068) não mantém estado da sessão do cliente –  Servidor representa sistema de arquivos virtual e responde a comandos que contém URLs –  Cabeçalhos contém meta-informação de requisição e resposta Máquina www.xyz.com Abre conexão para www.xyz.com:80 Fecha conexão Uma requisição: GET /index.html HTTP/1.1 ... Uma resposta: HTTP/1.1 200 OK ... SoquetedeServiço:80 index.html / Cliente HTTP (browser) Servidor HTT’P Só é garantida uma requisição/resposta por conexão
  • 12. Conexão Java 2006 •  1. Página HTML <img src="tomcat.gif"/> •  2. Requisição: browser solicita imagem •  3. Resposta: servidor devolve cabeçalho + stream GET /tomcat.gif HTTP/1.1 User-Agent: Mozilla 6.0 [en] (Windows 95; I) Cookies: querty=uiop; SessionID=D236S11943245 HTTP 1.1 200 OK 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 6¤Ü4 ... Interpreta HTML Gera requisição GET Linha em branco termina cabeçalhos tomcat.gif Exemplo de requisição/resposta HTTP
  • 13. Conexão Java 2006 Ciclo de vida de aplicação Web Browser Pagina Pagina Pagina Pagina Servidor Sessão
  • 14. Conexão Java 2006 Ciclo de vida de aplicação Ajax (Web 2.0) Browser Pagina Pagina Servidor Sessão
  • 15. Conexão Java 2006 XML •  Fornece um meio simples de transmitir informações estruturadas entre o cliente e o servidor –  Pode-se transferir toda a informação de objetos independente de linguagem –  Validação XML Schema –  Manipulação via DOM, SAX, mapeamento objeto- XML, JAXB, Web Services •  Forma mais comum para devolver dados ao cliente (garante mais controle)
  • 18. Conexão Java 2006 JavaScript •  Linguagem de propósito geral projetada para ser embutida em aplicações •  Permite interação com o modelo de objetos do browser e com o DOM •  Aplicações Ajax são escritas em JavaScript •  Incluído na página de três formas –  <script src=“url_da_api.js” />! –  <script> ... codigo estático </script>! –  Dentro de atributos especiais (onload, onXXX) ou usando prefixo javascript: em atributos comuns
  • 19. Conexão Java 2006 Exemplo de JavaScript biblio.js pagina.html
  • 20. Conexão Java 2006 JavaScript •  Tem palavras chave parecidas com as de Java (mas têm outras) •  Não é strongly-typed como Java –  Declaração de variáveis globais é opcional –  Declaração de variáveis locais com “var” •  Integra-se com Java •  É baseada em objetos (pode-se criar objetos a partir de protótipos mas não de herança) –  Não suporta sobrecarga ou sobreposição –  Funções (function) são objetos
  • 22. Conexão Java 2006 JavaScript no browser •  Os objetos, variáveis, etc. estão disponíveis a partir do objeto raiz, que no browser é document •  Todos os elementos da página estão em uma árvore a partir de document •  Pode-se criar novos elementos e anexá-los a document, fazendo-os aparecer dinamicamente na página (usando o DOM – Document Object Model) •  Exemplo –  document.forms[0] – primeiro formulário da página –  document.getElementById(“botao_2”) – acessa um elemento HTML que tenha ID botao_2!
  • 23. Conexão Java 2006 CSS •  Permite definir estilos reutilizáveis para elementos de página •  Estilos podem ser atribuídos estaticamente a uma página e alterados dinamicamente via JavaScript e DOM •  Incluídos numa página de 3 formas: –  Via <link rel=stylesheet href=“folha.css” />! –  <style> ... CSS ... </style>! –  Em atributos <span style=“...”>...</span>! •  Veja exemplos
  • 24. Conexão Java 2006 CSS Sintaxe básica •  Uma folha de estilos é uma coleção de regras •  Cada regra tem o formato: –  seletores { propriedade: valor, ... } •  Seletores são elementos, ids, classes: –  h1, h2 {...}! –  h1.principal, .outros {...}! –  #id35 {...}! •  Classes e IDs são definidos em elementos –  <h1 class=“principal titulo” id=“id99”>! •  Propriedades definem estilo: –  h1 {color: red}!
  • 25. Conexão Java 2006 CSS para layout •  Há várias propriedades que definem layout e visibilidade –  position, absolute, relative, static –  visibility –  display •  Várias podem ser alteradas via JavaScript para realizar mudanças dinâmicas de posicionamento e visibilidade.
  • 26. Conexão 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”;!
  • 27. Conexão Java 2006 DOM •  É impossível usar JavaScript no browser sem usar document, que é a raiz do DOM •  O DOM é um modelo de objetos padrão, independente de linguagem, usado para representar elementos, atributos, nós de texto, etc. •  Tem uma API padrão independente de linguagem
  • 29. Conexão Java 2006 Como criar nós, atributos var doc = document;
  • 30. Conexão Java 2006 Como montar uma árvore
  • 31. Conexão Java 2006 innerHTML •  Método menos prolixo para gerar XML/ HTML (evita o uso de createElement e appendChild) ! pai.innerHtml = “<filho>...</filho>”;! ! •  Mais prático para alterações dinâmicas (por exemplo, quando um fragmento é recebido assincronamente)
  • 32. Conexão Java 2006 Exemplos interativos •  Alerta em JavaScript •  Alteração de formulário em JavaScript •  Ocultação com JavaScript e CSS •  Alteração de estilo com CSS •  Localização de elemento com DOM •  Criação de árvore DOM dinâmica
  • 33. Conexão Java 2006 Conclusões •  Aplicações Ajax são escritas em JavaScript •  CSS e DOM permitem grande parte do comportamento dinâmico (DHTML) usado em aplicações Ajax através do uso de JavaScript •  É importante conhecer essas tecnologias para utilizar melhor os recursos do Ajax
  • 34. Conexão Java 2006 3 Ajax passo-a-passo •  Passo 1: Obtendo o XMLHttpRequest – Independente do browser •  Passo 2: Abrindo uma conexão – Métodos do objeto XMLHttpRequest •  Passo 3: Obtendo a resposta – Estados (ready states) •  Passo 4: Processando a resposta – Obtendo e usando os dados
  • 35. Conexão Java 2006 Passo 1: Obtendo o XMLHttpRequest •  O XMLHttpRequest é o objeto do DOM que irá realizar a comunicação assíncrona –  Ou seja, é o coração 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 versão
  • 36. Conexão Java 2006 XMLHttpRequest cross-browser •  A solução é 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!
  • 37. Conexão Java 2006 Passo 2: Iniciando um Request 1. Pegue o que for necessário do formulário Web dado = document.getElementById(“campo1”).value;! 2. Construa a URL de conexão url = “/scripts/dados.php?dado=escape(dado)”;! 3. Abra conexão ao servidor http_request.open("GET", url, true); ! 4. Defina uma função para executar quando terminar http_request.onreadystatechange = updatePage; ! 5. Envie a requisição http_request.send(null);!
  • 38. Conexão Java 2006 Propriedades importantes •  onreadystatechange –  deve receber o nome de uma função que será executada quando a requisição terminar (callback) •  readyState –  deve ser lida para se saber em que estado está a resposta; o estado útil é 4 •  status –  contém o status HTTP (200, 404, etc.) •  responseText e responseXML –  contém dados da resposta
  • 39. Conexão Java 2006 Passo 3: Obtendo uma Resposta 1. Não faça nada até que o valor de readyState seja 4 2. Leia o que está em responseText ou responseXML •  Exemplo (se onreadystatechange apontar para a função 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 método de conexão usando o evento onChange dos campos do form HTML (veja demonstração a seguir)
  • 40. Conexão 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 expressões regulares, etc.) •  Se for XML (responseXml), pode ser manipulada usando DOM e ferramentas XML para extrair campos significativos
  • 41. Conexão Java 2006 4 Demonstração •  Fonte: Make asynchronous requests with JavaScript and Ajax (Brett McLaughin) – http://www-128.ibm.com/developerworks/ web/library/wa-ajaxintro2/index.html
  • 42. Conexão Java 2006 <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() { } </script> Obtendo o XMLHttpRequest Função de conexão: usará o objeto request para criar e enviar uma requisição ao servidor
  • 43. Conexão Java 2006 <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> Passo 2: iniciando uma requisição Quando o conteúdo mudar, será chamada esta função que irá criar e enviar uma requisição Ajax
  • 44. Conexão Java 2006 <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); } function updatePage() { if (request.readyState == 4) { 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); } } </script> Passo 2: iniciando uma requisição assíncrona (disparada pelo onChange – tela anterior) Passo 3: obtendo uma resposta Função que vai receber o evento Passo 4: usando a resposta
  • 45. Conexão Java 2006 Ready States •  Pode haver 5 estados durante a requisição e resposta assíncrona •  Eles são lidos através da propriedade readyState –  0 – não inicializado –  1 – não enviado –  2 – sendo processado (cabeçalhos) –  3 – sendo processado (parte dos dados) –  4 – concluído •  São dependentes de browser (o único realmente confiável é 4)
  • 46. Conexão Java 2006 5 Resposta em XML •  Facilita apresentação dos dados 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; } <ratings> <show> <title>Alias</title> <rating>6.5</rating> </show> <show> <title>Lost</title> <rating>14.2</rating> </show> <show> <title>Six Degrees</title> <rating>9.1</rating> </show> </ratings> Exemplo Processamento usando DOM
  • 47. Conexão Java 2006 Transferência de objetos •  O estado de objetos pode ser passado do servidor para o JavaScript no cliente através da serialização em formato XML –  Requer que o servidor converta objeto para XML (ex: usando mapeamento) e que cliente processe XML (usando DOM) –  Soluções de baixo nível incluem soluções próprias, JAXB, templates e a API JSON (JavaScript Object Notation) –  Solução mais fácil é usar frameworks
  • 48. Conexão Java 2006 6 Frameworks •  Para qualquer aplicação é essencial entender os fundamentos da programação com Ajax •  Para trabalhar com aplicações mais complexas, é importante poder trabalhar em um nível de abstração maior •  Solução: usar frameworks •  Principais frameworks para Java –  DOJO (usado em componentes JSF) –  DWR (Direct Web Remoting)
  • 49. Conexão Java 2006 DWR – Direct Web Remoting •  Solução simples da Apache – http://getahead.ltd.uk/dwr/ •  Permite que código em um browser use funções Java como se estivesse no browser (gera JS a partir de classes Java) •  Consiste de duas partes – Um servlet – Uma API JavaScript
  • 51. Conexão 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>!
  • 52. Conexão 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)
  • 53. Conexão Java 2006 Como usar DWR (3) 5. Abra a URL http://localhost:8080/contexto/dwr/ –  Lista de classes disponiveis –  Lista de métodos que podem ser chamados
  • 54. Conexão Java 2006 Como usar DWR (4) •  6. Crie aplicações que usem os objetos – Veja o código fonte da classe em http://localhost:8080/contexto/dwr/ – Ache a linha que executa o método que você quer usar – Cole o texto em uma página HTML ou JSP – Inclua os arquivos JavaScript necessários <script src='dwr/interface/HelloWorld.js'></script> ! <script src='dwr/engine.js'></script> !
  • 55. Conexão Java 2006 Exemplo de uso DWR •  Suponha que tenhamos o seguinte código 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); ! HelloWorld.getMessage(“Hello”, ! function(str) { alert(str); }); ! ou simplesmente
  • 56. Conexão Java 2006 Como passar objetos •  Suponha que existam as seguintes classes •  Um Pedido pode ser adicionado em JavaScript da seguinte forma (notação JSON): public class PedidoDAO {! public void addPedido(Pedido p) {...}! }! public Pedido {! private String nome;! private double preco;! private int[] categorias;! }! var pedido = { ! nome: “Computador”, ! preco: 345.99,! categorias:[456, 999]! };! PedidoDAO.addPedido(pedido);!
  • 57. Conexão 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 são necessários para cada classe em que se executa métodos –  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
  • 58. Conexão 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>!
  • 59. Conexão Java 2006 Utilitários DWR (opcional) •  Inclua util.js •  $() lê elementos pelo ID: –  $ equivale a document.getElementById –  Ou seja $(form1) recupera o elemento form1 •  Outras funções (veja documentação em http://getahead.ltd.uk/dwr/browser/util/gettext) –  getValue(id) / setValue(id, value) –  addRows(...) e removeAllRows(id) – facilita a manipulação de tabelas (veja exemplos)
  • 60. Conexão Java 2006 Hands-on: como começar •  Instale e teste os exemplos •  Analise o código e tente incluir as funcionalidades em sua aplicação. Lembre-se de – Verificar o dwr.xml – Verificar se objetos (classes) estão no WEB- INF/classes – Verificar se arquivos JS estão sendo carregados
  • 61. Conexão Java 2006 Hands-on: exercício •  Monte a aplicação abaixo, que permite listar produtos em uma tabela (nome e preço), acrescentar e remover, usando DWR •  Dicas: –  Utilize código HTML disponível –  Siga o passo-a-passo para instalar o DWR –  Use como exemplo http://getahead.ltd.uk/dwr/examples/table
  • 62. Conexão Java 2006 Outras alternativas: JSF / DOJO •  Vários componentes JSF suportam Ajax. Para usá- los em uma página é preciso importar as bibliotecas padrão <%@ 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 técnica em http://java.sun.com/javaee/javaserverfaces/ajax/tutorial.jsp
  • 63. Conexão Java 2006 Conclusões •  Ajax é uma técnica para aplicações Web com programação lado-cliente que permite maior eficiência e resposta •  Ajax depende de programação em JavaScript e utiliza várias tecnologias já existentes e consagradas como CSS, JavaScript, DHTML e DOM •  Integração com Java através de frameworks permite que o modelo de objetos seja compartilhado entre cliente e servidor •  As mais populares soluções Java hoje são o DWR e o DOJO (nativo JSF)