Programação Web Cliente

Programao para a Web Lado do Cliente
Alexandre Meslin
meslin@inf.puc-rio.br
Ementa

JSP
Servlet
Javascript
XML
AJAX
Referncias
Bibliografia
Use a cabea! AJAX Profissional

Riordan, Rebecca M.; Riordan, Rebecca M.
Altabooks
Na Internet

http://cursos.meslin.com.br/home/jsp
http://google.com
Plano de Aula

Intrudoo
AJAX
Exerccios
Perguntas?
Parte 1
Introduo
O que AJAX
Asynchronous Javascript And XML
(logo, voc vai precisar saber Javascript)
Por que AJAX?

Conexo mais eficiente entre script do lado

do cliente e o script do lado do servidor (a
critrio do programador)
Melhor interface para o usurio
Mais flexibilidade
Mais opes
Politicamente correto, se usado corretamente
Ecolgico, se usado corretamente
Como funciona
O script do lado do cliente chama uma

funo do lado do servidor
A resposta pode ser sncrona ou assncrona
Comparao de antes e depois de AJAX
10
Comparao de antes e depois de AJAX

Antes do AJAX
Usurio clicava em
alguma coisa na pgina
Navegador envia um
pedido para o servidor
Servidor envia uma
pgina totalmente nova
para o navegador
Depois do AJAX
Usurio clica em alguma

coisa na pgina
Navegador envia um
pedido para o servidor
Servidor envia somente o
necessrio para modifica
a pgina
Pgina modificada
atravs de Javascript
11
Modelo de Programao

Mesmo modelo
Mesmas tecnologias
Uso de HTML + CSS + Javascript do lado do
cliente
Uso de Java do lado do servidor (JSP e/ou
Servlet)
12
O que pode ser uma resposta

Uma pgina HTML (dificilmente)

Uma parte de uma pgina HTML
Um texto pleno
Um arquivo XML
13
Perguntas?
14
Parte 2
AJAX
15
AJAX objeto request

Usando o objeto request com AJAX

1. Crie containers para armazenar as informaes
(<div>), devidamente identificados
2. Escreva as funes necessrias em Javascript
para manter a pgina (ainda no AJAX)
3. Crie uma funo para criar o objeto request
(agora sim!)
4. Faa o pedido para o servidor
5. Mostre o(s) item(ns)
16
Primeiro exemplo
Retirado do Head First
17
Primeiro exemplo: visual

<body>
<div id="schedulePane">
<div id="tabs">
<a id="welcome" title="welcome" class="active" href="#1"
onclick="showTab('welcome')">Welcome</a>
<a id="beginners" title="beginners" class="inactive" href="#2"
onclick="showTab('beginners')">Beginners</a>
<a id="intermediate" title="intermediate" class="inactive" href="#3"
onclick="showTab('intermediate')">Intermediate</a>
<a id="advanced" title="advanced" class="inactive" href="#4"
onclick="showTab('advanced')">Advanced</a>
</div>
<div id="content">
<h3>
Click a tab to display the course schedule for the selected class
</h3>
</div>
</div>
</body>
18
Primeiro exemplo: estilo (no tem a menor importncia

para ns agora)
<style type="text/css">
body {
background: #1F394D url('images/bgGradient.png');
background-repeat: repeat-x;
margin: 0;
}
#tabs {
position: absolute;
top: 10px;
left: 10px;
width: 650px;
height: 50px;
}
#tabs a {
display: block;
float: left;
height: 0;
overflow: hidden;
padding: 140px 0 0 0;
width: 155px;
z-index: 200;
}
#tabs a#welcome.active {
background: url('images/welcomeTabActive.png') no-repeat;
}
#tabs a#welcome.inactive {
background: url('images/welcomeTabInactive.png') no-repeat;
}
#tabs a#beginners.active {
background: url('images/beginnersTabActive.png') no-repeat;
}
#tabs a#beginners.inactive {
background: url('images/beginnersTabInactive.png') no-repeat;
}
#tabs a#intermediate.active {
background: url('images/intermediateTabActive.png') no-repeat;
}
#tabs a#intermediate.inactive {
background: url('images/intermediateTabInactive.png') no-repeat;
}
table {
border: 6px solid #1f394d;
border-collapse: collapse;
padding: 0 0 20px 0;
width: 95%;
#tabs a#advanced.inactive {
background: url('images/advancedTabInactive.png') no-repeat;
}
}
td,th {
border: 6px solid #1f394d;
padding: 6px;
}
#tabs a#advanced.active {
background: url('images/advancedTabActive.png') no-repeat;
}
#content {
position: absolute;
text-align: center;
background-color: #6fb26f;
top: 60px;
left: 18px;
width: 615px;
height: 380px;
padding: 10px;
}
</style>
19
Primeiro exemplo: objeto request

/*
* Cria um objeto XML HTTP Request
*/
function createRequest()
{
var xmlhttp;
try
{
// genrico
xmlhttp = new XMLHttpRequest();
}
catch (tryMS)
{
try
{
// exclusivo para MS
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (otherMS)
{
try
{
// exclusivo para outro tipo de MS
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (failed)
{
// navegador no compatvel
xmlhttp = null;
}
}
}
return xmlhttp;
}

O objeto XML HTTP Request

Construtor
Mtodos

open(mtodo, url, assncrono,
[username[, password]])

send(string)

abort()

getAllResponseHeaders()

getResponseHeader(label)
Propriedades

readyState

status

statusText

responseXML

responseText

onreadystatechange
20

/*
*/
{
var xmlhttp;
try
{
// genrico
}
catch (tryMS)
{
try
{
}
catch (otherMS)
{
try
{
}
catch (failed)
{
xmlhttp = null;
}
}
}
return xmlhttp;
}

Muito dependente da verso do navegador

objeto = new XMLHttpRequest();
objeto = new ActiveXObject(Msxm12.XMLHTTP);
objeto = new ActiveXObject(Microsoft.XMLHTTP);

Construtor
Mtodos


send(string)

abort()


Propriedades

readyState

status

statusText

responseXML

responseText

onreadystatechange
21

/*
*/
{
var xmlhttp;
try
{
// genrico
}
catch (tryMS)
{
try
{
}
catch (otherMS)
{
try
open()
{
outro
de MS
// exclusivo
mtodo:para
POST
outipo
GET
url: endereo do recurso no servidor
}
catch
(failed)
assncrono:
true ou false (tipo do pedido)
{
xmlhttp = null;
}
}
}
return xmlhttp;
}


Construtor
Mtodos


send(string)

abort()


Propriedades

readyState

status

statusText

responseXML

responseText

onreadystatechange
22

/*
*/
{
var xmlhttp;
try
{
// genrico
}
catch (tryMS)
{
try
{
}
catch (otherMS)
{
try
{
// exclusivo
para outro tipo de MS
send()
Envia o pedido
}
catch (failed)
string: somente utilizada no
{
mtodo
POST (null nos outros
// navegador no
compatvel
xmlhttp = null;casos)
}
}
}
return xmlhttp;
}


Construtor
Mtodos


send(string)

abort()


Propriedades

readyState

status

statusText

responseXML

responseText

onreadystatechange
23

/*
*/
{
var xmlhttp;
try
{
// genrico
}
catch (tryMS)
{
try
{
}
catch (otherMS)
{
try
{
// exclusivo
abortpara
() outro tipo de MS
Para o pedido atual
}
catch (failed)
{
xmlhttp = null;
}
}
}
return xmlhttp;
}


Construtor
Mtodos


send(string)

abort()


Propriedades

readyState

status

statusText

responseXML

responseText

onreadystatechange
24

/*
*/
{
var xmlhttp;
try
{
// genrico
}
catch (tryMS)
{
try
{
}
catch (otherMS)
{
try
{
// exclusivo
Retorna todos os headers (label
}
catch (failed)
valor)
{
xmlhttp = null;
}
}
}
return xmlhttp;
}


Construtor
Mtodos


send(string)

abort()


Propriedades

readyState

status

statusText

responseXML

responseText

onreadystatechange
25

/*
*/
{
var xmlhttp;
try
{
// genrico
}
catch (tryMS)
{
try
{
}
catch (otherMS)
{
try
{
// exclusivo
getResponseHeader()
Retorna o valor de determinado
}
catch (failed)
header (string)
{
xmlhttp = null;
}
}
}
return xmlhttp;
}


Construtor
Mtodos


send(string)

abort()


Propriedades

readyState

status

statusText

responseXML

responseText

onreadystatechange
26

/*
*/
{
var xmlhttp;
try
{
// genrico
}
catch (tryMS)
{
try
{
}
catch (otherMS)
{
try
{
}
catch (failed)
{
xmlhttp = null;
}
}
}
return xmlhttp;
}
readyState
0: pedido
1: pedido
2: pedido
3: pedido
4: pedido
ainda no enviado
sendo enviado
enviado
sendo processado
pronto


Construtor
Mtodos


send(string)

abort()


Propriedades

readyState

status

statusText

responseXML

responseText

onreadystatechange
27

/*
*/
{
var xmlhttp;
try
{
// genrico
}
catch (tryMS)
{
try
{
}
catch (otherMS)
{
try
{
// exclusivo
status
200: OK
}
catch (failed)
404: Page not found
{
xmlhttp = null;
}
}
}
return xmlhttp;
}


Construtor
Mtodos


send(string)

abort()


Propriedades

readyState

status

statusText

responseXML

responseText

onreadystatechange
28

/*
*/
{
var xmlhttp;
try
{
// genrico
}
catch (tryMS)
{
try
{
}
catch (otherMS)
{
try
{
// exclusivo
para outro
tipo do
de MS
statusText:
texto
status
}
catch (failed)
{
xmlhttp = null;
}
}
}
return xmlhttp;
}


Construtor
Mtodos


send(string)

abort()


Propriedades

readyState

status

statusText

responseXML

responseText

onreadystatechange
29

/*
*/
{
var xmlhttp;
try
{
// genrico
}
catch (tryMS)
{
try
{
}
catch (otherMS)
{
try
{
// exclusivo
para outro tipo
de MS em formato
responseXML:
resposta
}
catch (failed)
{
xmlhttp = null;
}
}
}
return xmlhttp;
}

XML

Construtor
Mtodos


send(string)

abort()


Propriedades

readyState

status

statusText

responseXML

responseText

onreadystatechange
30

/*
*/
{
var xmlhttp;
try
{
// genrico
}
catch (tryMS)
{
try
{
}
catch (otherMS)
{
try
{
}
responseText: resposta em formato
catch (failed)
{
xmlhttp = null;
}
}
}
return xmlhttp;
}

texto

Construtor
Mtodos


send(string)

abort()


Propriedades

readyState

status

statusText

responseXML

responseText

onreadystatechange
31

/*
*/
{
var xmlhttp;
try
{
// genrico
}
catch (tryMS)
{
try
{
}
catch (otherMS)
{
try
{
// exclusivo
para outro tipo de MSnome da funo de
onreadystatechange:
callback sem ()
}
catch (failed)
A funo chamada sempre que o valor
{
de readyState
muda
// navegador
no compatvel
xmlhttp = null;
}
}
}
return xmlhttp;
}


Construtor
Mtodos


send(string)

abort()


Propriedades

readyState

status

statusText

responseXML

responseText

onreadystatechange
32
Primeiro exemplo: evento

function showTab(quem)
{
// muda a imagem da aba clicada
abas = document.getElementById("tabs").getElementsByTagName("a");
for (var i = 0; i < abas.length; i++)
{
if (abas[i].title == quem)
{
abas[i].className = 'active';
}
else
{
abas[i].className = 'inactive';
}
}
xmlhttp = createRequest();
// varivel global
if (xmlhttp == null)
{
alert("Navegador no compatvel com AJAX.");
return;
}
xmlhttp.onreadystatechange = mostraHorario;
xmlhttp.open("GET", quem + '.html', true);
xmlhttp.send(null);
}
33
Primeiro exemplo: handler

function mostraHorario()
{
if (xmlhttp.readyState == 4)
if (xmlhttp.status == 200)
document.getElementById("content").innerHTML = xmlhttp.responseText;
}
34
Enviando Pedido via GET

Crie o objeto Request HTTP

Informe qual funo dever ser chamada quando os dados

estiverem prontos
xmlhttp.onreadystatechange = mostraHorario;
Abra a conexo usando o mtodo GET

xmlhttp.open(GET", PegaPosicao", true);
Envie o pedido HTTP

xmlhttp.send(textoPost);
35
Recebendo o Pedido
Na funo de call back

Verifique se o pedido est pronto (status 4)

Verifique se a pgina foi encontrada (status 200)

Obtenha as informaes
resultado = xmlhttp.responseText;
OU
resultado = xmlhttp.responseXML;
36
Outro exemplo:
Cadastro de usurio

Nome
Estado depois de
preencher o nome
Cidade (apenas do
estado selecionado)
Boto Envia habilitado
depois de tudo
preenchido
corretamente
37
Exemplo: texto HTML

<body>
<h1>Dados</h1>
<fieldset>
<legend>Entre com os dados</legend>
<form action="BuscaCidades" method="get" name="formulario">
<table border="0">
<tr>
<td align="right">Nome:</td>
<td>
<input type="text" name="nome" onchange="habilitaEstado()" />
</td>
</tr>
<tr>
<td align="right">Estado:</td>
<td>
<select name="estado" onchange="buscaCidades()"
disabled="disabled" id="idEstado">
<option value="">Antes, entre com o seu nome completo</option>
</select>
</td>
</tr>
<tr>
<td align="right">Cidade:</td>
<td>
<select name='cidade' disabled="disabled" id="idCidade">
<option>Antes, selecione um estado</option>
</select>
</td>
</tr>
<tr>
<td align="center">
<input type="submit" value="Envia" />
</td>
</tr>
</table>
</form>
</fieldset>
</body>
</html>
38
Exemplo: cidade
Neste exemplo, um estado informado para

o servidor
Servidor retorna uma lista de cidades no
formato XML
A lista utilizada para povoar um campo
select (dropdown)
39
Exemplo: incio do ciclo

Foi criado o campo select (dropdown) chamado estado e

identificado como idEstado
Este campo ser preenchido com as siglas e os nomes dos
estados

Sigla valor
Nome texto exibido para o usurio
Ao ser preenchido, o campo estado chama a funo

buscaCidades
<select name="estado" onchange="buscaCidades()" disabled="disabled" id="idEstado">

</select>
40
Exemplo: criao do objeto request (util.js)

{
try
{
// genrico
}
catch (tryMS)
{
try
{
}
catch (otherMS)
{
try
{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); // para outro MS
}
catch (failed)
{
xmlhttp = null; // navegador no compatvel com AJAX (ser???)
}
}
}
return xmlhttp;
}
41
Exemplo:
Destino da informao:
<select name='cidade' disabled="disabled" id="idCidade">

<option>Antes, selecione um estado</option>
</select>
42
Exemplo: envia pedido para o servidor

function buscaCidades()
{
var campoCidade = document.getElementById("idCidade");
campoCidade.remove(0);
var opcao = document.createElement("option");
opcao.text = "Espere...";
campoCidade.add(opcao);
// agora, AJAX nele!
xmlhttp = createRequest(); // varivel global
xmlhttp.open("GET", "AjaxBuscaCidades?estado=" +
document.getElementById("idEstado").options[document.getElementById("
idEstado").selectedIndex].value, true);
xmlhttp.onreadystatechange = handleCidades; // sem "()"
xmlhttp.send(null);
document.getElementById("idCidade").removeAttribute("disabled");
}
43
Exemplo: manipulador (handle) dos dados

function handleCidades()
{
{
{
// muda o texto da primeira opo
var campoCidade = document.getElementById("idCidade");
campoCidade.remove(0);
opcao.text = "Selecione uma cidade";
var xmlDoc = xmlhttp.responseXML.documentElement; // todo o documento
var cidades = xmlDoc.getElementsByTagName("cidade"); // vetor de cidades
for (var i = 0; i < cidades.length; i++)
{
nome = cidades[i].firstChild.nodeValue;
opcao = document.createElement("option");
opcao.value = opcao.text = nome;
}
}
else alert('No consegui obter os dados das cidades.');
}
}
44
Exemplo: lado do servidor

package br.com.meslin.ajax;
import java.io.IOException;
import java.io.PrintWriter;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class AjaxBuscaCidades extends HttpServlet {

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
{
Connection con;
String sql;
PreparedStatement stmt;
ResultSet resultSet;
PrintWriter out = response.getWriter();
response.setContentType("text/xml");
out.println("<cidades>");
try
{
con = Conexao.conexao();
sql = "select loc_nosub from log_localidade where ufe_sg = ?;";
stmt = con.prepareStatement(sql);
stmt.setString(1, request.getParameter("estado"));
resultSet = stmt.executeQuery();
while(resultSet.next())
{
out.print("<cidade>");
out.print(resultSet.getString("loc_nosub"));
out.print("</cidade>");
}
}
catch (???Exception e)
{
// TODO Auto-generated catch block
}
out.println("</cidades>");
<cidades> uma
lista de <cidade>
}
}
45
XML: Alguns mtodos e propriedades (os mais teis)
elemento.childNodes[n]
elemento.firstChild
elemento.nodeValue()
elemento.nodeName()
elemento.attributes()
elemento.getAttribute(atributo)
document.getElementsByTagName(tag)
Mais em https://developer.mozilla.org/en-US/docs/DOM/DOM_Reference

46
Exemplo:
Neste exemplo, um servle utilizado para

obter uma lsita de estados (sigla e nome)
Servidor retorna a lista de estados no formato
XML
A lista utilizada para povoar um campo
select (dropdown)

Sigla value
Nome text
47
Exemplo: incio do ciclo

O campo nome possui um evento associado

que chama a funo habilitaEstado
<input type="text" name="nome"
onchange="habilitaEstado()" />
48
Exemplo: destino da informao
<select name="estado" onchange="buscaCidades()"

disabled="disabled" id="idEstado">
</select>
49
Exemplo: envia pedido para o servidor

function habilitaEstado()
{
// verifica se o nome est correto
// (sim, ele est, ento no precisa fazer!)
var campoEstado = document.getElementById("idEstado")
campoEstado.remove(0);
opcao.text = "Espere...";
campoEstado.add(opcao);
// agora, AJAX nele!
xmlhttp.open("GET", "AjaxBuscaEstados", true);
xmlhttp.onreadystatechange = handleEstado;
xmlhttp.send(null);
document.getElementById("idEstado").removeAttribute("disabled");
}
50
Exemplo: manipulador (handle) dos dados

function handleEstado()
{
{
{
// muda o texto da primeira opo
var campoEstado = document.getElementById("idEstado")
campoEstado.remove(0);
opcao.text = "Selecione um estado";
var xmlDoc = xmlhttp.responseXML.documentElement; // todo o documento
var estados = xmlDoc.getElementsByTagName("estado"); // vetor de estados
for (var i = 0; i < estados.length; i++)
{
nome = estados[i].getElementsByTagName("nome")[0].firstChild.nodeValue;
sigla = estados[i].getElementsByTagName("sigla")[0].firstChild.nodeValue;
opcao = document.createElement("option");
opcao.value = sigla;
opcao.text = nome;
}
}
else alert('Could not retrieve data');
}
51
}

<estados> uma lista

de <nome> e <sigla>
52

package br.com.meslin.ajax;
import
import
import
import
import
import
import
import
import
java.io.IOException;
java.io.PrintWriter;
java.sql.Connection;
java.sql.PreparedStatement;
java.sql.ResultSet;
java.sql.SQLException;
javax.servlet.ServletException;
javax.servlet.http.HttpServlet;
javax.servlet.http.HttpServletRequest;
public class AjaxBuscaEstados extends HttpServlet {

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, I...
{
Connection con;
String sql;
PreparedStatement stmt;
ResultSet resultSet;
response.setContentType("text/xml");
out.println("<estados>");
try
{
con = Conexao.conexao();
sql = "select ufe_sg, ufe_no from log_faixa_uf;";
stmt = con.prepareStatement(sql);
resultSet = stmt.executeQuery();
while(resultSet.next())
{
out.println("<estado>");
out.println("<nome>" + resultSet.getString("ufe_no") + "</nome>");
out.println("<sigla>" + resultSet.getString("ufe_sg") + "</sigla>");
out.println("</estado>");
}
}
catch (???Exception e)
{
// TODO Auto-generated catch block
}
out.println("</estados>");
}
}
53
POST ou GET
GET
POST
Mais simples
Mais difcil (nem tanto)
Enviado junto com a URL
Enviado em separado da URL
No pode ser usado para enviar

muitos dados
Visvel na tela do usurio
No pode ser utilizado para enviar

dados sensveis
Texto puro na Internet (precisa

de HTTPS para criptografia
mas isto outro curso)
Pode ser utilizado para enviar

muitos dados
No visvel na tela do usurio
Pode ser utilizado para enviar

dados sensveis
Texto puro na Internet (precisa

de HTTPS para criptografia
mas isto outro curso)
54
Enviando Pedido (com dados) via POST

Crie o objeto pedido HTTP e especifique o mtodo POST

xmlhttp.open("POST", "VerificaUsername", true);
Crie uma string semelhante a QueryString

Use a funo escape para transformar espaos, sinais e outros

caracteres no seus equivalentes %xx
textoPost = "campo1=" + escape(valor1) + "&campo2=" +

escape(valor2) + "&campo3=" + escape(valor3);
Envie o pedido HTTP

Os outros passos so idnticos ao usado anteriormente com o

mtodo GET
55
Exemplo:
<html>
<head>
<script type="text/javascript" src="../util.js"></script>
<script type="text/javascript">
function verificaUsername()
{
xmlhttp.open("POST", "VerificaUsername", true);
xmlhttp.onreadystatechange = handleVerificaUsername;
textoPost = "usuario=" +
escape(document.getElementById("idTexto").value);
xmlhttp.setRequestHeader("Content-Type", "application/xwww-form-urlencoded");
}
function handleVerificaUsername()
{
if(xmlhttp.readyState == 4 && xmlhttp.status == 200)
{
var imagem = document.getElementById("idImagemOK");
if(xmlhttp.responseText.indexOf("OK")>=0)
document.getElementById("idTexto").
style.backgroundPosition = "202px -34px;";
else
document.getElementById("idTexto").
style.backgroundPosition = "202px -52px;";
}
}
}
</script>
<title>Novo Usurio</title>
<style type="text/css">
label
{
width: 200px;;
float: left;
text-align: right;
}
#idTexto
{
background-image: url('status.gif');
background-position: 202px -1px;
background-repeat: no-repeat;
width: 218px;
}
</style>
</head>
<body>
<h2>Para iniciar o seu cadastro, crie um novo usurio
entrando com um username que ainda no esteja
cadastrado</h2>
<h3>(Deveria usar HTTPS)</h3>
<fieldset>
<legend>Entre com um usurio e uma senha</legend>
<form action="CadastraUsername" method="post">
<label>Usurio:</label>
<input type="text" name="usuario" id="idTexto"
onchange="verificaUsername()"><br/>
<label>Senha:</label>
<input type="password" name="senha"/><br>
<input type="submit" value="Envia"/>
</form>
</fieldset>
</body>
</html>
56
Perguntas?
57
Exerccios
58
Exerccio
Faa um pgina que obtenha a hora do

servidor usando AJAX (obviamente).
59
Exerccio
Refaa o exerccio que obtm a hora do

servidor.
Inclua um atraso de 30 segundos no lado do
servidor entre receber o pedido e fornecer a
hora
Do lado do cliente, inclua um elemento
grfico indicando a espera
60
Exerccio
Implemente a pgina
ao lado
61
Exerccio
Implemente uma pagina que fornea

sugesto de nomes de pessoas a medida que
o usurio vai digitando em um campo texto.
62
Exerccio
Utilizando a pgina html

ao lado, implemente as
funcionalidades em
AJAX
Salve o dados em um
arquivo (faa duas
verses):

Texto
XML
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO8859-1">
<title>Controle de Palavras-Chave</title>
</head>
<body>
<h1>Palavras-Chave</h1>
<table>
<tr>
<td><label id="label0">Palavra-chave 0</label></td>
<td><input type="text" /></td>
<td>
<button>Apaga esta entrada</button>
</td>
</tr>
</table>
<button>Adiciona palavra-chave</button>
<button>Salva palavra-chave</button>
<button>Carrega palavra-chave</button>
</body>
</html>
63
Exerccio
Crie uma pgina web que apresente o

arquivo nutrition.xml em uma tabela usando
AJAX.
Para cada <food> do arquivo xml, crie uma
linha na tabela com o nome da comida e seus
valores nutricionais
Extraido de https://gist.github.com/pamelafox/3926362
64
Exerccio
Crie uma pgina html que mostre uma lista

(<ul>) de restaurantes, um em cada <li>
contendo o nome o endereo.
Modifique a cor do texto de acordo com o
tipo de restaurante (sitdown or bar).
Retirado de https://gist.github.com/pamelafox/3926362
65
Exerccio
Faa uma pgina HTML que permita que o usurio se cadastre em

um site de crtica de cinema.
Na pgina de cadastro, o usurio dever entrar com:

Username (deve ser verificado quanto a duplicidade na base de

dados)
Password (deve ser uma senha forte, com pelo menos 8 caracteres,
contendo letras minsculas, maisculas, nmeros e borrolhos)
Verificao de password (deve ser igual a senha j digitada)
Primeiro nome
Sobrenome
Email (o formato dever ser verificado)
Durante o registro, a pgina dever mostrar a capa dos 10 filmes

mais referenciados, 5 a cada instante, ou seja, a cada 5 segundos,
uma nova capa mostrada e a mais antiga retirada (roundrobin). Crie um arquivo esttico XML com a lista dos 10 filmes.
Dica: use a funo setTimeout()
66
Exerccio

Implemente o jogo ao lado

O usurio dever utilizar as
letras para montar palavras.
Cada letra somente poder
ser utilizada uma nica vez
(a letra dever ser
desabilitada)
O boto para submeter a
palavra faz a verificao da
existncia da palavra no
servidor
Dica: a lista de palavras em
portugus pode ser
encontrada no nosso site
(me avise sobre qualquer
erro)
67
Parte 3
JSON
68
O Que JSON

Javascript Object Notation

Uma sintaxe para armazenar e transmitir
informaes em formato texto assim como
feito com XML
Independente de linguagem de programao
Auto-descritivo e fcil de entender
Alguns dizem que JSON menor, mais rpido
e mais fcil do que XML voc decide
69
Exemplo de uma estrutura em JSON

{
"aircraft": "A320",
"pilot": {
"firstName": "John",
"lastName": "Adams"
},
"passenger": [
"George Washington",
"Thomas Jefferson"
]
Refere-se a um objeto
com a seguinte
estrutura e valores:
objeto.aircraft = "A320
objeto.pilot.firstName = "John
objeto.pilot.lastName = "Adams
objeto.passenger[0] = "George Washington
objeto.passenger[1] = "Thomas Jefferson"
}
70
Sintaxe
Baseado em Javascript

Dados aparecem em pares de nome/valor

Dados so separados por vrgula
Chaves {} separam objetos
Colchetes [] seraparam vetores
Sinal de igual = substituido por dois pontos :
71
Sintaxe
Os valores podem ser do tipo

Numrico
String
Booleano
Vetor (array)
Objeto
Null
72
Como converter um texto JSON em um objeto

Javascript
Basta usar a funo eval() basta?!?!?

A funo eval() muito til porem totalmente insegura um parse

do texto deve ser realizado
Exemplo:
var objeto = eval("(" + texto + ")");
var objeto = eval("(" + request.responseText + ")");
Alternativa: os novos navegadores incluem suporte para o objeto

JSON que faz parse e converte os dados para um objeto
Javascript.
Alternativa 2: usar um parse do site http://www.json.org chamado
json2.js
Exemplo
var objeto = JSON.parse(request.responseText)
73
Exemplo extrado do W3Schools

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Exemplo retirado do W3Schools</title>
</head>
<body>
<h2>Create Object from JSON String</h2>
<p>
First Name: <span id="fname"></span><br>
Last Name: <span id="lname"></span><br>
</p>
<script>
var txt = '{"employees":[' +
'{"firstName":"John","lastName":"Doe" },' +
'{"firstName":"Anna","lastName":"Smith" },' +
'{"firstName":"Peter","lastName":"Jones" }]}';
obj = JSON.parse(txt);
document.getElementById("fname").innerHTML=obj.employees[1].firstName
document.getElementById("lname").innerHTML=obj.employees[1].lastName
</script>
</body>
</html>
74
Criando Dados JSON

Use json-lib para criar um objeto da classe JSONObject (obviamente voc

tambm pode gerar o cdigo manualmente)
Faa download em http://json-lib.sourceforge.net/
Esta biblioteca requer as seguintes bibliotecas:

jakarta commons-lang 2.5

http://commons.apache.org/proper/commons-lang/
jakarta commons-beanutils 1.8.0
http://commons.apache.org/proper/commons-beanutils/
jakarta commons-collections 3.2.1
http://commons.apache.org/proper/commons-collections/
jakarta commons-logging 1.1.1
http://commons.apache.org/proper/commons-logging/
ezmorph 1.0.6
http://ezmorph.sourceforge.net/
75
Exemplo: cdigo do lado do cliente

<html>
<head>
<script type="text/javascript" src="../util.js"></script>
<script type="text/javascript">
function mostraResultado()
{
xmlhttp.open("GET", "JSON", false);
xmlhttp.send(null);
if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
{
document.getElementById("resposta").innerHTML+= xmlhttp.responseText +"<br/>";
var resultado = JSON.parse(xmlhttp.responseText);
document.getElementById("resposta").innerHTML+="<br/>Avio: "+resultado.aircraft;
document.getElementById("resposta").innerHTML+="<br/>Piloto: "+resultado.pilot.firstName+"
"+resultado.pilot.lastName;
document.getElementById("resposta").innerHTML+="<br/>Passageiros: ";
for(var passageiro in resultado.passenger)
document.getElementById("resposta").innerHTML+="<br/>"+resultado.passenger[passageiro];
}
}
</script>
</head>
<body>
<button onclick="mostraResultado()">Clique aqui!</button>
<dir id="resposta"></dir>
</body>
</html>
76
Exemplo: cdigo do lado do servidor

package br.com.meslin.ajax.json;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import net.sf.json.JSONObject;
public class JSON extends HttpServlet

{
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException
{
response.setContentType("text/plain");
JSONObject json = new JSONObject();
// Put a simple element
json.put("aircraft", "A320");
// Add a JSON Object
JSONObject pilot = new JSONObject();
pilot.put("firstName", "John");
pilot.put("lastName", "Adams");
json.put("pilot", pilot);
// Accumulate values in an array
json.accumulate("passenger", "George Washington");
json.accumulate("passenger", "Thomas Jefferson");
// Passing a number to toString() adds indentation
System.err.println("JSON: " + json.toString(2));
out.println(json.toString());
}
}
Exemplo extraido de http://answers.oreilly.com/topic/263-how-to-generate-json-from-java/

77
Resultados:
Navegador
Console
78
Perguntas?
79
Exerccios 1
80
Exerccios
Refaa os exerccios anteriores substituindo a

transferncia XML por JSON
81
Programao para a Web Lado do Cliente
Alexandre Meslin
meslin@inf.puc-rio.br

Programação Web Cliente

Transféré par

Informations du document

Description originale:

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Programação Web Cliente

Transféré par

Droits d'auteur :

Formats disponibles

Programao para a Web Lado do Cliente

Use a cabea! AJAX Profissional

Asynchronous Javascript And XML

(logo, voc vai precisar saber Javascript)

Por que AJAX?

Conexo mais eficiente entre script do lado

O script do lado do cliente chama uma

Comparao de antes e depois de AJAX

Comparao de antes e depois de AJAX

Usurio clica em alguma

O que pode ser uma resposta

Uma pgina HTML (dificilmente)

AJAX objeto request

Usando o objeto request com AJAX

Retirado do Head First

Primeiro exemplo: visual

Primeiro exemplo: estilo (no tem a menor importncia

Primeiro exemplo: objeto request

O objeto XML HTTP Request

Primeiro exemplo: objeto request

Muito dependente da verso do navegador

O objeto XML HTTP Request

Primeiro exemplo: objeto request

O objeto XML HTTP Request

Primeiro exemplo: objeto request

O objeto XML HTTP Request

Primeiro exemplo: objeto request

O objeto XML HTTP Request

Primeiro exemplo: objeto request

O objeto XML HTTP Request

Primeiro exemplo: objeto request

O objeto XML HTTP Request

Primeiro exemplo: objeto request

O objeto XML HTTP Request

Primeiro exemplo: objeto request

O objeto XML HTTP Request

Primeiro exemplo: objeto request

O objeto XML HTTP Request

Primeiro exemplo: objeto request

O objeto XML HTTP Request

Primeiro exemplo: objeto request

O objeto XML HTTP Request

Primeiro exemplo: objeto request

O objeto XML HTTP Request

Primeiro exemplo: evento

Primeiro exemplo: handler

Enviando Pedido via GET

Crie o objeto Request HTTP

Informe qual funo dever ser chamada quando os dados

Abra a conexo usando o mtodo GET

Envie o pedido HTTP

Na funo de call back

Verifique se o pedido est pronto (status 4)

Verifique se a pgina foi encontrada (status 200)

Exemplo: texto HTML

Neste exemplo, um estado informado para

Exemplo: incio do ciclo

Foi criado o campo select (dropdown) chamado estado e

Ao ser preenchido, o campo estado chama a funo

<select name="estado" onchange="buscaCidades()" disabled="disabled" id="idEstado">

Exemplo: criao do objeto request (util.js)

<select name='cidade' disabled="disabled" id="idCidade">