ajax

Programação para a Web – Lado do Cliente

Alexandre [email protected]

2

Ementa

� JSP

� Servlet

� Javascript

� XML

� AJAX

3

Referências

� Bibliografia� Use a cabeça! AJAX Profissional

Riordan, Rebecca M.; Riordan, Rebecca M.Altabooks

� Na Internet� http://cursos.meslin.com.br/home/jsp

� http://google.com

4

Plano de Aula

� Intrudoção

� AJAX

� Exercícios

5

Perguntas?

6

Parte 1

� Introdução

O que é AJAX

� Asynchronous Javascript And XML

� (logo, você vai precisar saber Javascript)

7

Por que AJAX?

� Conexão mais eficiente entre script do lado do cliente e o script do lado do servidor (a critério do programador)

� Melhor interface para o usuário

� Mais flexibilidade

� Mais opções

� Politicamente correto, se usado corretamente

� Ecológico, se usado corretamente

8

Como funciona

� O script do lado do cliente chama uma “função” do lado do servidor

� A resposta pode ser síncrona ou assíncrona

9

Comparação de antes e depois de AJAX

10

Comparação de antes e depois de AJAX

Antes do AJAX

� Usuário clicava em alguma coisa na página

� Navegador envia um pedido para o servidor

� Servidor envia uma página totalmente nova para o navegador

Depois do AJAX

� Usuário clica em alguma coisa na página

� Navegador envia um pedido para o servidor

� Servidor envia somente o necessário para modifica a página

� Página modificada através de Javascript

11

Modelo de Programação

� 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 página HTML (dificilmente)

� Uma parte de uma página HTML

� Um texto pleno

� Um arquivo XML

13

14

Perguntas?

Parte 2

� AJAX

15

AJAX – objeto request

� Usando o objeto request com AJAX

1. Crie containers para armazenar as informações (<div>), devidamente identificados

2. Escreva as funções necessárias em Javascript para manter a página (ainda não é AJAX)

3. Crie uma função para criar o objeto request (agora sim!)

4. Faça 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 (não tem a menor importância para nós – 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;

}

table {

border: 6px solid #1f394d;

border-collapse: collapse;

padding: 0 0 20px 0;

width: 95%;

}

td,th {

border: 6px solid #1f394d;

padding: 6px;

}

#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;

}

#tabs a#advanced.active {

background: url('images/advancedTabActive.png') no-repeat;

}

#tabs a#advanced.inactive {

background: url('images/advancedTabInactive.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

{

// genérico

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 não compatível

xmlhttp = null;

}

}

}

return xmlhttp;

}

� O objeto XML HTTP Request

� Construtor

� Métodos

� open(método, url, assíncrono, [username[, password]])

� send(string)

� abort()

� getAllResponseHeaders()

� getResponseHeader(label)

� Propriedades

� readyState

� status

� statusText

� responseXML

� responseText

� onreadystatechange

20


/*


*/


{

var xmlhttp;

try

{

// genérico


}

catch (tryMS)

{

try

{



}

catch (otherMS)

{

try

{



}

catch (failed)

{


xmlhttp = null;

}

}

}

return xmlhttp;

}


� Construtor

� Métodos


� send(string)

� abort()



� Propriedades

� readyState

� status

� statusText

� responseXML

� responseText


21

• Muito dependente da versão do navegador• objeto = new XMLHttpRequest();• objeto = new ActiveXObject(“Msxm12.XMLHTTP”);• objeto = new ActiveXObject(“Microsoft.XMLHTTP”);


/*


*/


{

var xmlhttp;

try

{

// genérico


}

catch (tryMS)

{

try

{



}

catch (otherMS)

{

try

{



}

catch (failed)

{


xmlhttp = null;

}

}

}

return xmlhttp;

}


� Construtor

� Métodos


� send(string)

� abort()



� Propriedades

� readyState

� status

� statusText

� responseXML

� responseText


22

• open()• método: POST ou GET• url: endereço do recurso no servidor• assíncrono: true ou false (tipo do pedido)


/*


*/


{

var xmlhttp;

try

{

// genérico


}

catch (tryMS)

{

try

{



}

catch (otherMS)

{

try

{



}

catch (failed)

{


xmlhttp = null;

}

}

}

return xmlhttp;

}


� Construtor

� Métodos


� send(string)

� abort()



� Propriedades

� readyState

� status

� statusText

� responseXML

� responseText


23

• send()• Envia o pedido• string: somente utilizada no

método POST (null nos outros casos)


/*


*/


{

var xmlhttp;

try

{

// genérico


}

catch (tryMS)

{

try

{



}

catch (otherMS)

{

try

{



}

catch (failed)

{


xmlhttp = null;

}

}

}

return xmlhttp;

}


� Construtor

� Métodos


� send(string)

� abort()



� Propriedades

� readyState

� status

� statusText

� responseXML

� responseText


24

• abort ()• Para o pedido atual


/*


*/


{

var xmlhttp;

try

{

// genérico


}

catch (tryMS)

{

try

{



}

catch (otherMS)

{

try

{



}

catch (failed)

{


xmlhttp = null;

}

}

}

return xmlhttp;

}


� Construtor

� Métodos


� send(string)

� abort()



� Propriedades

� readyState

� status

� statusText

� responseXML

� responseText


25

• getAllResponseHeaders()• Retorna todos os headers (label e

valor)


/*


*/


{

var xmlhttp;

try

{

// genérico


}

catch (tryMS)

{

try

{



}

catch (otherMS)

{

try

{



}

catch (failed)

{


xmlhttp = null;

}

}

}

return xmlhttp;

}


� Construtor

� Métodos


� send(string)

� abort()



� Propriedades

� readyState

� status

� statusText

� responseXML

� responseText


26

• getResponseHeader()• Retorna o valor de determinado

header (string)


/*


*/


{

var xmlhttp;

try

{

// genérico


}

catch (tryMS)

{

try

{



}

catch (otherMS)

{

try

{



}

catch (failed)

{


xmlhttp = null;

}

}

}

return xmlhttp;

}


� Construtor

� Métodos


� send(string)

� abort()



� Propriedades

� readyState

� status

� statusText

� responseXML

� responseText


27

• readyState• 0: pedido ainda não enviado• 1: pedido sendo enviado• 2: pedido enviado• 3: pedido sendo processado• 4: pedido pronto


/*


*/


{

var xmlhttp;

try

{

// genérico


}

catch (tryMS)

{

try

{



}

catch (otherMS)

{

try

{



}

catch (failed)

{


xmlhttp = null;

}

}

}

return xmlhttp;

}


� Construtor

� Métodos


� send(string)

� abort()



� Propriedades

� readyState

� status

� statusText

� responseXML

� responseText


28

• status• 200: OK• 404: Page not found


/*


*/


{

var xmlhttp;

try

{

// genérico


}

catch (tryMS)

{

try

{



}

catch (otherMS)

{

try

{



}

catch (failed)

{


xmlhttp = null;

}

}

}

return xmlhttp;

}


� Construtor

� Métodos


� send(string)

� abort()



� Propriedades

� readyState

� status

� statusText

� responseXML

� responseText


29

• statusText: texto do status


/*


*/


{

var xmlhttp;

try

{

// genérico


}

catch (tryMS)

{

try

{



}

catch (otherMS)

{

try

{



}

catch (failed)

{


xmlhttp = null;

}

}

}

return xmlhttp;

}


� Construtor

� Métodos


� send(string)

� abort()



� Propriedades

� readyState

� status

� statusText

� responseXML

� responseText


30

• responseXML: resposta em formato XML


/*


*/


{

var xmlhttp;

try

{

// genérico


}

catch (tryMS)

{

try

{



}

catch (otherMS)

{

try

{



}

catch (failed)

{


xmlhttp = null;

}

}

}

return xmlhttp;

}


� Construtor

� Métodos


� send(string)

� abort()



� Propriedades

� readyState

� status

� statusText

� responseXML

� responseText


31

• responseText: resposta em formato texto


/*


*/


{

var xmlhttp;

try

{

// genérico


}

catch (tryMS)

{

try

{



}

catch (otherMS)

{

try

{



}

catch (failed)

{


xmlhttp = null;

}

}

}

return xmlhttp;

}


� Construtor

� Métodos


� send(string)

� abort()



� Propriedades

� readyState

� status

� statusText

� responseXML

� responseText


32

• onreadystatechange: nome da função de callback sem ()

• A função é chamada sempre que o valor de readyState muda

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(); // variável global

if (xmlhttp == null)

{

alert("Navegador não compatível 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 função deverá ser chamada quando os dados estiverem prontos

xmlhttp.onreadystatechange = mostraHorario;

� Abra a conexão usando o método GET

xmlhttp.open(“GET", “PegaPosicao", true);

� Envie o pedido HTTP

xmlhttp.send(textoPost); 35

Recebendo o Pedido

� Na função de call back…� Verifique se o pedido está pronto (status 4)


� Verifique se a página foi encontrada (status 200)


� Obtenha as informações

resultado = xmlhttp.responseText;

OU

resultado = xmlhttp.responseXML;

36

Outro exemplo:

� Cadastro de usuário� Nome

� Estado depois de preencher o nome

� Cidade (apenas do estado selecionado)

� Botão 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: início 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 usuário

� Ao ser preenchido, o campo estado “chama” a função buscaCidades

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


</select>

40

Exemplo: criação do objeto request (util.js)

function createRequest(){

try{

xmlhttp = new XMLHttpRequest(); // genérico} catch (tryMS) {

try{

xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); // exclusivo para MS} catch (otherMS) {

try{

xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); // para outro MS} catch (failed) {

xmlhttp = null; // navegador não compatível com AJAX (será???)}

}}return xmlhttp;

}

41

Exemplo:

� Destino da informação:

<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(); // variável 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 opção

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('Não 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>");

}

}

45

<cidades> é uma lista de <cidade>

XML: Alguns métodos 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 � text47

Exemplo: início do ciclo

� O campo nome possui um evento associado que “chama” a função habilitaEstado

<input type="text" name="nome"

onchange="habilitaEstado()" />

48

Exemplo: destino da informação

<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á, então não precisa fazer!)

var campoEstado = document.getElementById("idEstado")

campoEstado.remove(0);


opcao.text = "Espere...";

campoEstado.add(opcao);

// agora, AJAX nele!

xmlhttp = createRequest();

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 opção

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 java.sql.Connection;

import java.sql.PreparedStatement;

import java.sql.ResultSet;

import java.sql.SQLException;





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

� Mais simples

� Enviado junto com a URL

� Não pode ser usado para enviar muitos dados

� Visível na tela do usuário� Não pode ser utilizado para enviar

dados sensíveis

� Texto puro na Internet (precisa de HTTPS para criptografia –mas isto é outro curso)

POST

� Mais difícil (nem tanto…)

� Enviado em separado da URL

� Pode ser utilizado para enviar muitos dados

� Não é visível na tela do usuário� Pode ser utilizado para enviar

dados sensíveis

� 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 método POST


xmlhttp.open("POST", "VerificaUsername", true);

� Crie uma string semelhante a QueryString� Use a função escape para transformar espaços, sinais e outros

caracteres no seus equivalentes %xx

textoPost = "campo1=" + escape(valor1) + "&campo2=" + escape(valor2) + "&campo3=" + escape(valor3);

� Envie o pedido HTTP

xmlhttp.send(textoPost);

� Os outros passos são idênticos ao usado anteriormente com o método 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/x-

www-form-urlencoded");

xmlhttp.send(textoPost);

}

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 Usuário</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 usuário

entrando com um username que ainda não esteja

cadastrado</h2>

<h3>(Deveria usar HTTPS)</h3>

<fieldset>

<legend>Entre com um usuário e uma senha</legend>

<form action="CadastraUsername" method="post">

<label>Usuário:</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

57

Perguntas?

58

Exercícios

Exercício

� Faça um página que obtenha a hora do servidor usando AJAX (obviamente).

59

Exercício

� Refaça o exercício que obtém 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 gráfico indicando a espera

60

Exercício

� Implemente a página ao lado

61

Exercício

� Implemente uma pagina que forneça sugestão de nomes de pessoas a medida que o usuário vai digitando em um campo texto.

62

Exercício

� Utilizando a página html ao lado, implemente as funcionalidades em AJAX

� Salve o dados em um arquivo (faça duas versões):

� 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=ISO-8859-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

Exercício

� Crie uma página 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

Exercício

� Crie uma página html que mostre uma lista(<ul>) de restaurantes, um em cada <li> contendo o nome o endereço.

� Modifique a cor do texto de acordo com o tipo de restaurante (“sitdown” or “bar”).

� Retirado de https://gist.github.com/pamelafox/3926362

65

Exercício

� Faça uma página HTML que permita que o usuário se cadastre em um site de crítica de cinema.

� Na página de cadastro, o usuário 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 minúsculas, maiúsculas, números e borrolhos)� Verificação de password (deve ser igual a senha já digitada)� Primeiro nome� Sobrenome� Email (o formato deverá ser verificado)

� Durante o registro, a página 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 (round-robin). Crie um arquivo estático XML com a lista dos 10 filmes.

� Dica: use a função setTimeout()

66

Exercício

� Implemente o jogo ao lado� O usuário deverá utilizar as

letras para montar palavras.� Cada letra somente poderá

ser utilizada uma única vez (a letra deverá ser desabilitada)

� O botão para submeter a palavra faz a verificação da existência da palavra no servidor

� Dica: a lista de palavras em português 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 informações em formato texto – assim como é feito com XML

� Independente de linguagem de programação

� Auto-descritivo e fácil de entender

� Alguns dizem que JSON é menor, mais rápido e mais fácil 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 são separados por vírgula

� Chaves {} separam objetos

� Colchetes [] seraparam vetores

� Sinal de igual = é substituido por dois pontos :

71

Sintaxe

� Os valores podem ser do tipo

� Numérico

� String

� Booleano

� Vetor (array)

� Objeto

� Null

72

Como converter um texto JSON em um objeto Javascript

� Basta usar a função eval() – basta?!?!?� A função 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

� Exemplovar objeto = JSON.parse(request.responseText)

73

Exemplo extraído 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ê também pode gerar o código manualmente)

� Faça 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: código 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/>Avião: "+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: código do lado do servidor

package br.com.meslin.ajax.json;







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

79

Perguntas?

80

Exercícios 1

Exercícios

� Refaça os exercícios anteriores substituindo a transferência XML por JSON

81

Programação para a Web – Lado do Cliente

Alexandre [email protected]

ajax

Documents