Carregar apresentação
A apresentação está carregando. Por favor, espere
PublicouClara Duarte das Neves Alterado mais de 8 anos atrás
1
Desenvolvimento WEB II Continuação AJAX Professora: Kelly de Paula Cunha
2
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
3
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
4
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"); }
5
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; }
6
Envio de requisição pelo método POST e recepção em forma de texto simples: function resposta(){ if(req.readyState==4){ if(req.status==200){ var texto=req.responseText; alert(texto); limparCampos(); } } } Possíveis respostas para o estado do objeto req: 0 - inicializado: o objeto req foi criado, mas o método open ainda não foi chamado. 1 - lendo: o método open foi chamado, mas os dados ainda não foram enviados. 2- lido: o pedido foi enviado. 3 - interativo: uma parte da resposta foi recebida. 4 - completo: todos os dados foram recebidos e a conexão foi fechada. Possíveis respostas para o STATUS do objeto req: 200- significa que o objeto está ok 404- indica erro na recepção dos dados
7
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; } O método open é utilizado para definir o (POST ou GET), o nome da servlet e o tipo de sincronismo. O valor true indica envio de dados de forma assíncrona. O valor false, o envio síncrono Define o tipo de conteúdo do formulário para o servidor. É utilizada para analisar gramaticalmente os dados postados pelo POST
8
AJAX Envio de dados ao servidor por meio do método GET e recepção em forma de XML: Considere o seguinte documento XML
9
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
10
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
11
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
12
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
13
AJAX Função resposta da classe :
14
AJAX Estrutura do documento XML: 4 Pedro Henrique 1800.00 5 Paulo Silva 1005.00
15
AJAX Como faço para capturar o nome do primeiro cliente registrado no XML? var nome= xml.getElementsByTagName("nome")[1].childNodes[0].no deValue;
16
AJAX Classe Conexão.java: -Faz conexão com o Bd007 -Inclui -Altera -Exclui -Consulta -Desconecta com o Bd007
17
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.
18
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
19
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”
20
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);
21
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();
22
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); }
23
AJAX classe Conexão: public ResultSet consultar (String sql){ try{ rs=st.executeQuery(sql); retorno=1; } catch (SQLException ex){ retorno=-1; } return rs; }
24
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
25
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!!!
26
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.
27
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
28
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);
29
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.
30
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
31
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ê.
32
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
33
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 Localnumero da linhaproblemasolução quem solucionou Controle12erro de sintaxecolocar parênteseseu Banco de dados configuração do MySQL seguir tutorial estabelecendo conexão com banco de dadosterceiros
Apresentações semelhantes
© 2024 SlidePlayer.com.br Inc.
All rights reserved.