A apresentação está carregando. Por favor, espere

A apresentação está carregando. Por favor, espere

Desenvolvimento WEB II Continuação AJAX Professora: Kelly de Paula Cunha.

Apresentações semelhantes


Apresentação em tema: "Desenvolvimento WEB II Continuação AJAX Professora: Kelly de Paula Cunha."— Transcrição da apresentação:

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


Carregar ppt "Desenvolvimento WEB II Continuação AJAX Professora: Kelly de Paula Cunha."

Apresentações semelhantes


Anúncios Google