Upload
edufelizardo1
View
7
Download
0
Embed Size (px)
DESCRIPTION
ajax
Citation preview
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
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
21
• Muito dependente da versão do navegador• objeto = new XMLHttpRequest();• objeto = new ActiveXObject(“Msxm12.XMLHTTP”);• objeto = new ActiveXObject(“Microsoft.XMLHTTP”);
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
22
• open()• método: POST ou GET• url: endereço do recurso no servidor• assíncrono: true ou false (tipo do pedido)
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
23
• send()• Envia o pedido• string: somente utilizada no
método POST (null nos outros casos)
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
24
• abort ()• Para o pedido atual
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
25
• getAllResponseHeaders()• Retorna todos os headers (label e
valor)
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
26
• getResponseHeader()• Retorna o valor de determinado
header (string)
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
27
• readyState• 0: pedido ainda não enviado• 1: pedido sendo enviado• 2: pedido enviado• 3: pedido sendo processado• 4: pedido pronto
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
28
• status• 200: OK• 404: Page not found
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
29
• statusText: texto do status
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
30
• responseXML: resposta em formato XML
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
31
• responseText: resposta em formato texto
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
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
xmlhttp = new XMLHttpRequest();
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
� 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)
if (xmlhttp.readyState == 4)
� Verifique se a página foi encontrada (status 200)
if (xmlhttp.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">
<option value="">Antes, entre com o seu nome completo</option>
</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()
{
if (xmlhttp.readyState == 4)
{
if (xmlhttp.status == 200)
{
// muda o texto da primeira opção
var campoCidade = document.getElementById("idCidade");
campoCidade.remove(0);
var opcao = document.createElement("option");
opcao.text = "Selecione uma cidade";
campoCidade.add(opcao);
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;
campoCidade.add(opcao);
}
}
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">
<option value="">Antes, entre com o seu nome completo</option>
</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);
var opcao = document.createElement("option");
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()
{
if (xmlhttp.readyState == 4)
{
if (xmlhttp.status == 200)
{
// muda o texto da primeira opção
var campoEstado = document.getElementById("idEstado")
campoEstado.remove(0);
var opcao = document.createElement("option");
opcao.text = "Selecione um estado";
campoEstado.add(opcao);
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;
campoEstado.add(opcao);
}
}
else alert('Could not retrieve data');
}
}51
Exemplo: lado do servidor
� <estados> é uma lista de <nome> e <sigla>
52
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 AjaxBuscaEstados extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, I...
{
Connection con;
String sql;
PreparedStatement stmt;
ResultSet resultSet;
PrintWriter out = response.getWriter();
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 = createRequest();
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 = createRequest();
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 = createRequest();
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 java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import net.sf.json.JSONObject;
public class JSON extends HttpServlet
{
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException
{
PrintWriter out = response.getWriter();
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]