Post on 07-Apr-2016
Desenvolvimento WEB IIContinuaçã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"); }}
AJAXEnvio 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){ 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á ok404- indica erro na recepção dos dados
AJAXEnvio 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 servlete 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
AJAXEnvio de dados ao servidor por meio do método GET e recepção em forma de XML:
Considere o seguinte documento XML
AJAXO 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
AJAXO 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
AJAXO 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
AJAXPara 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
AJAXFunção resposta da classe :
AJAXEstrutura 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>
AJAXComo faço para capturar o nome do primeiro cliente registrado no XML?
var nome= xml.getElementsByTagName("nome")[1].childNodes[0].nodeValue;
AJAXClasse Conexão.java:
- Faz conexão com o Bd007- Inclui - Altera- Exclui - Consulta- Desconecta com o Bd007
AJAXClasse Conexão.java:
ATENÇÃO: Não se esqueça de colocar a senha correta:
con=DriverManager.getConnection("jdbc:mysql://localhost:3306/bd007", "root", "12345");
Obs: linha 26, pag:234.
AJAXClasse 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
AJAXClasse 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”
AJAXArquivo 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);
AJAXArquivo 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();
AJAXclasse 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); }
AJAXclasse Conexão:
public ResultSet consultar (String sql){ try{ rs=st.executeQuery(sql); retorno=1; } catch (SQLException ex){ retorno=-1; } return rs; }
AJAXAtividade 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
AJAXImprimir 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 JSPsEx: 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 humildeNingué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ê.
AJAXAtividade 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
AJAXAtividade 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çãoquem
solucionou
Controle 12 erro de sintaxe colocar parênteses eu
Banco de dados
configuração do MySQL
seguir tutorial estabelecendo conexão com banco de dados terceiros