Desenvolvimento WEB II
Continuação AJAX
Professora: Kelly de Paula Cunha
AJAX
Funções necessárias para estabelecer uma
comunicação com o servidor utilizando o AJAX:
- Envio de requisição:
- POST: Formulário
- GET: Pequenas informações
- Retorno de requisições:
- texto simples
- XML
AJAX
Tanto para enviar uma requisição ao servidor,
quanto para receber o resultado é necessário
criar um objeto da classe:
• XMLHttpRequest: navegadores Firefox,
Mozila, Opera e Safari
• ActiveXObject: Internet Explorer
AJAX
Verificação de qual é o navegador e criação do
objeto adequado para o navegador do usuário:
var req=null;
function criaObj(){
if(window.XMLHttpRequest){
req=new XMLHttpRequest();
}else if(window.ActiveXObject){
req=new ActiveXObject("Microsoft.XMLHTTP");
}
}
AJAX
Envio de requisição pelo método POST e recepção em forma de texto
simples:
function enviar(formulario){
var dados="id=" + formulario.id.value +"&nome=" +
formulario.nome.value + "&renda=" + formulario.renda.value
+ "&indicador=" + formulario.indicador.value;
criaObj();
req.onreadystatechange=resposta;
req.open("POST", "Controle",true);
req.setRequestHeader("Content-Type", "\
application/x-www-form-urlencoded");
req.send(dados);
return false;
}
AJAX
Envio de requisição pelo método POST e recepção em forma
de texto simples:
function resposta(){
if(req.readyState==4){
Possíveis
respostas para o estado do objeto req:
if(req.status==200){
varrespostas
texto=req.responseText;
Possíveis
para req
o STATUS
do objeto
0 - inicializado:
o objeto
foi criado,
mas oreq:
método open ainda não
foi chamado.
alert(texto);
200significa
que o objeto
está
ok
1 - lendo:
o
método
open
foi
chamado,
mas os dados ainda não foram
limparCampos();
404indica erro na recepção dos dados
enviados.
} o pedido foi enviado.
2- lido:
}3 - interativo: uma parte da resposta foi recebida.
4 - completo: todos os dados foram recebidos e a conexão foi fechada.
}
AJAX
Envio de requisição pelo método POST e recepção em forma de texto
simples:
function enviar(formulario){
var dados="id=" + formulario.id.value +"&nome=" +
formulario.nome.value + "&renda=" + formulario.renda.value
+ "&indicador=" + formulario.indicador.value;
criaObj();
req.onreadystatechange=resposta;
req.open("POST", "Controle",true);
req.setRequestHeader("Content-Type",
"\ GET), o nome da
O método open é utilizado para definir o (POST ou
servlet
application/x-www-form-urlencoded");
eDefine
o tipoode
sincronismo.
tipo
de conteúdo do formulário para o servidor.
req.send(dados);
return
false;
O
valor true
indica
enviogramaticalmente
de dados de forma
assíncrona.
É utilizada
para
analisar
os dados
postados pelo POST
}
O valor false, o envio síncrono
AJAX
Envio de dados ao servidor por meio do método GET e
recepção em forma de XML:
Considere o seguinte documento XML
AJAX
O que é o JSTL?
• JavaServer Pages Standard Template Library,
• mecanismo básico de recuperação de dados,
– banco de dados,
– arquivo de contexto e (ou) XML
AJAX
O que é o JSTL?
• JavaServer Pages Standard Template Library,
• mecanismo básico de recuperação de dados,
– banco de dados,
– arquivo de contexto e (ou) XML
AJAX
O que é o XML?
• Extensible Markup Language
• formato para a criação de documentos com dados
organizados de forma hierárquica
• propósito principal é a facilidade de compartilhamento
de informações através da internet.
• não depende das plataformas de hardware ou de
software
AJAX
Para fazer a leitura do documento XML, o AJAX utiliza o
Documento Object Model (DOM)
O DOM define uma maneira-padrão de acessar e
manipular documentos XML apresentando o documento
como uma estrutura em forma de árvore, com elementos,
atributos e seu conteúdo
AJAX
Função resposta da classe :
AJAX
Estrutura do documento XML:
<?xml version=‘1.0’ encoding=‘ISO-8859-1’?>
<clientes>
<cliente>
<id>4</id>
<nome>Pedro Henrique</nome>
<renda>1800.00</renda>
</cliente>
<cliente>
<id>5</id>
<nome>Paulo Silva</nome>
<renda>1005.00</renda>
</cliente>
</clientes>
AJAX
Como faço para capturar o nome do primeiro cliente
registrado no XML?
var nome=
xml.getElementsByTagName("nome")[1].childNodes[0].no
deValue;
AJAX
Classe Conexão.java:
-
Faz conexão com o Bd007
Inclui
Altera
Exclui
Consulta
Desconecta com o Bd007
AJAX
Classe Conexão.java:
ATENÇÃO: Não se esqueça de colocar a senha correta:
con=DriverManager.getConnection("jdbc:mysql://localhos
t:3306/bd007", "root", "12345");
Obs: linha 26, pag:234.
AJAX
Classe servlet Controle.java:
-Gerencia o fluxo de comunicação entre a camada View
(telas) e a camada Model (banco de dados)
-> recebe as requisições dos arquivos JSP por meio dos
métodos doPOST e doGET
AJAX
Classe servlet Controle.java:
Pergunta: Se as requisições que chegam para a classe Controle
podem estar partindo de diversos arquivos JSP, como é possível
identificar a origem da requisição ou a operação desejada?
Parametro indicador:
“pesquisaid”
“consultar”
“pesquisatodos”
“listagem”
“incluir”
“alterar”
“telaalterar”
“excluir”
AJAX
Arquivo TelaIncluir.jsp
- Exibe um valor de id automaticamente assim que a
página é exibida (Busca no BD o maior valor de id e soma
1)
- Para isso:
criaObj();
req.onreadystatechange=retornoId;
var url="Controle?indicador=pesquisaid";
req.open("GET", url, true);
req.send(null);
AJAX
Arquivo TelaIncluir.jsp acessando a classe Controle:
String indicador = request.getParameter("indicador");
if (indicador.equals("pesquisaid")){
sql="select max(id) from cliente";
}
Em seguida faz a conexão com o banco de dados:
Conexão conbd = new Conexão();
conbd.conectar();
AJAX
classe Controle acessando a classe Conexão:
if (conbd.getRetorno()== -1){
out.println("Erro na conexão com o banco de dados");
} else {
if (indicador.equals("pesquisaid")){
ResultSet rs=conbd.consultar(sql);
try{
if(rs.next()){
out.print(rs.getInt(1)+1);
}
} catch (SQLException ex){
out.print(1);
}
AJAX
classe Conexão:
public ResultSet consultar (String sql){
try{
rs=st.executeQuery(sql);
retorno=1;
} catch (SQLException ex){
retorno=-1;
}
return rs;
}
AJAX
Atividade 8
- Continue o desenvolvimento da aplicação Exemplo007
(livro WEB TOTAL, pág.230)
- Botão Incluir funcionando:
-> Busca automática do ID máximo cadastrado
-> Inserção de novo cliente no BD
AJAX
Dicas:
É improvável que a
aplicação funcione
corretamente logo na
primeira vez que é
executada
- Erros em programação
são muito comuns, não se
desespere!!!
AJAX
Procure sempre
entender o que está
fazendo e usando
Em grandes projetos,
ninguém cria 100% do
código, mas é altamente
recomendável saber de
tudo que está usando: o
que é, para que serve,
como funciona e que
situações usar aquilo.
AJAX
Encontrar os próprios
erros faz parte das
tarefas de um
programador
tirar dúvidas é uma
coisa, querer que outra
pessoa resolva todos os
problemas no seu código
é outra
AJAX
Imprimir os valores de dados e variáveis é a forma mais
simples e rápida para um programador inspecionar resultados
Mande mostrar caixas de alertas para verificar o conteúdo das
variáveis nos arquivos JSPs
Ex: alert("clientes" + clientes.length);
AJAX
Depure o código: os
depuradores mostram
a conclusão lógica de
uma parte do programa.
Assim o programador
pode percorrer linha por
linha e inspecionar tudo
como valores de variáveis e
etc.
- Coloque pontos de
interrupção na classe Controle
e na classe Conexão para
verificar se elas estão sendo
acessadas.
AJAX
Se mesmo após estes
testes você não encontrar
o problema, peça para
os colegas testarem.
Tarefas feitas
repetitivamente
tornam-se mecânicas, e
por isso você pode estar
passando por cima de
pequenos erros sem
perceber
AJAX
Finalmente, como última
dica; Seja humilde
Ninguém sabe tudo!
Quando você toma uma
postura como esta, mantém
os braços abertos para
receber novas informações e
aprender mais,
principalmente com aqueles
que sabem algo diferente de
você.
AJAX
Atividade 8
- Continue o desenvolvimento da aplicação Exemplo007
(livro WEB TOTAL, pág.230)
- Botão Incluir funcionando:
-> Busca automática do ID máximo cadastrado
-> Inserção de novo cliente no BD
AJAX
Atividade 9
- Crie uma planilha (no Microsoft Excel) com o nome:
Controle_erros_ Exemplo007_seu_nome
- Preencha a tabela com os erros que aparecerem durante
o desenvolvimento do seu projeto
Local
numero da linha
problema
solução
quem
solucionou
Controle
12
erro de sintaxe
colocar parênteses
eu
configuração do
MySQL
seguir tutorial estabelecendo conexão com banco de
dados
terceiros
Banco de
dados