1 - Desenvolvendo um sistema de pesquisa de alunos por matrícula usando AJAX e JSP (Usando o método GET)

Em artigos anteriores fizemos um estudo bem detalhado de AJAX e do objeto XMLHttpRequest. Chegou a hora de construir algo mais útil. A aplicação que desenvolveremos permitirá pesquisar um aluno baseado em seu número de matrícula. Além disso, os dados serão obtidos a partir de uma chamada a uma página JSP e o método usado para a requisição HTTP será GET (Mais adiante veremos como usar POST).

Os nomes e matrículas dos alunos serão armazenados em um objeto da classe Hashtable da linguagem Java. Esta classe permite associar valores a chaves, ou seja, ideal para o projeto proposto. Em outros artigos você aprenderá a obter um arquivo XML a partir das informações em um banco de dados.

A listagem seguinte apresenta o código completa para o documento JSP que será usado no exemplo:

Código completo para pesquisar.jsp:

<%@ page import="java.util.*" %> <% // recebe a matrícula a ser pesquisada String mat = request.getParameter("matricula"); String aluno = null; // Cria a tabela Hash Hashtable tabela = new Hashtable(); // adiciona os valores desejados tabela.put("547961-4", "Osmar J. Silva"); tabela.put("545844-7", "Dyego Fernandes de Sousa"); tabela.put("768212-3", "Francisco Coelho Cito Feitosa"); // Varre a tabela procurando a matrícula fornecida Iterator it = tabela.keySet().iterator(); while(it.hasNext()){ Object key = it.next(); String chave = (String)(key); if(chave.equals(mat)){ aluno = (String)(tabela.get(key)); } } // constrói o XML e o envia como resposta StringBuffer xml = new StringBuffer(); xml.append("<?xml version=\"1.0\" ?>"); xml.append("<alunos>"); if(aluno != null){ xml.append("<aluno>" + aluno + "</aluno>"); } else{ xml.append("<mensagem>erro</mensagem>"); } xml.append("</alunos>"); response.setContentType("text/xml"); response.setHeader("Cache-Control", "no-cache"); response.getWriter().write(xml.toString()); %>

A análise linha a linha deste código está além do escopo do artigo. Os pontos importantes a serem considerados são:

A página JSP deverá ser chamada com o parâmetro matricula contendo o valor da matrícula a ser pesquisada. Por exemplo, desejando pesquisar a matrícula 547961-4, a chamada correta deverá ser:

http://localhost:8080/pesquisar.jsp?matricula=547961-4

Se o aluno for encontrado, a página devolverá um arquivo XML com o seguinte conteúdo:

<?xml version="1.0" encoding="iso-8859-1" ?> <alunos> <aluno>Osmar J. Silva</aluno> </alunos>

Se o aluno não for encontrado o resultado será:

<?xml version="1.0" encoding="iso-8859-1" ?> <alunos> <mensagem>erro</mensagem> </alunos>

A página HTML que servirá para fazer a consulta dos alunos se parecerá com a figura seguinte:



O formulário a ser usado foi construído com o seguinte código HTML:

<table width="287" border="0" cellspacing="0" cellpadding="4"> <form name="cadastro" action="javascript:void%200" onsubmit="pesquisar()"> <tr> <td width="72">Matrícula:</td> <td width="199"><input name="matricula" type="text" id="matricula"></td> </tr> <tr> <td>Nome:</td> <td><input name="nome" type="text" readonly id="nome" size="40"></td> </tr> <tr> <td> </td> <td><input type="submit" name="Submit" value="Pesquisar!"></td> </tr> </form> </table>

Este formulário possui um detalhe que o diferencia daqueles usados em aplicações web convencionais: o valor informado para a propriedade action:

action="javascript:void%200"

Como a página não será atualizada, é preciso um mecanismo que permita simular o envio do formulário, mas sem realmente faze-lo na verdade. A forma mais usual é fornecer um URL JavaScript que não retorna nada:

javascript:void 0

e, como o espaço entre URLs deve ser informado como %20, o resultado é este valor estranho à primeira vista.

A conexão com o servidor é feita quando o formulário é submetido (o que é apenas uma simulação, já que a aplicação continua na mesma página) através de uma função delegada ao seu evento onsubmit:

onsubmit="pesquisar()"

O código completo para a página HTML está disponível nas linhas seguintes:

Código completo para alunos.htm

<html> <head> <title>Cadastro de Alunos</title> <style type="text/css"> body, td {font: 70% Verdana} </style> </head> <body> <strong>Cadastro de Alunos</strong><br> <br> <table width="287" border="0" cellspacing="0" cellpadding="4"> <form name="cadastro" action="javascript:void%200" onsubmit="pesquisar()"> <tr> <td width="72">Matrícula:</td> <td width="199"><input name="matricula" type="text" id="matricula"></td> </tr> <tr> <td>Nome:</td> <td><input name="nome" type="text" readonly id="nome" size="40"></td> </tr> <tr> <td> </td> <td><input type="submit" name="Submit" value="Pesquisar!"></td> </tr> </form> </table> <br> <span id="status">Status: Pronto</span><br> <script type="text/javascript"> var http; function pesquisar(){ http = obterObjRequisicao(); if(http){ var mat = document.cadastro.matricula.value; var url = "http://localhost:8080/pesquisar.jsp?matricula=" + escape(mat); http.onreadystatechange = processar; http.open("GET", url, true); http.send(null); } return false; } function processar(){ var docXML; if(http.readyState == 4){ if(http.status == 200){ docXML = http.responseXML; analisarDados(docXML); } else{ window.alert('Erro. Não foi possível realizar a operação'); } } } function obterObjRequisicao(){ if(window.XMLHttpRequest){ return new XMLHttpRequest(); } else if(window.ActiveXObject){ return new ActiveXObject("Microsoft.XMLHTTP"); } return null; } function analisarDados(xml){ var txtStatus = document.getElementById("status"); var cont = xml.getElementsByTagName('aluno'); if(cont.length > 0){ // encontrou o aluno txtStatus.innerHTML = "Status: Aluno encontrado com sucesso!"; var nome_aluno = cont[0].childNodes[0].nodeValue; document.cadastro.nome.value = nome_aluno; } else{ // não encontrou txtStatus.innerHTML = "Status: Aluno não encontrado."; document.cadastro.matricula.value = ""; document.cadastro.nome.value = ""; document.cadastro.matricula.focus(); } } //--> </script> </body> </html>

2 - Usando POST

Com o objetivo de demonstrar como o objeto XMLHttpRequest efetua de forma diferenciada as requisições GET e POST, decidiu-se implementar uma nova versão da aplicação prática demonstrada neste artigo, desta vez usando o método POST.

As diferenças entre as duas aplicações ocorrerão somente no trecho de código que efetua a requisição ao servidor. A versão com POST deve se basear no modelo a seguir:

if(http){ var mat = document.cadastro.matricula.value; var url = "http://localhost:8080/estudos/pesquisar.jsp"; http.onreadystatechange = processar; http.open("POST", url, true); http.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8"); http.send("matricula=" + escape(mat)); }

As diferenças podem ser resumidas da seguinte forma:

1) Não há mais os parâmetros no endereço da página que sofrerá a requisição;
2) O método de envio é definido como POST:

http.open("POST", url, true);

3) O cabeçalho Content-Type da requisição agora é definido como sendo dados de um formulário:

http.setRequestHeader("Content-Type", " application/x-www-form-urlencoded; charset=UTF-8");

4) Os parâmetros da requisição são enviados no método send():

http.send("matricula=" + escape(mat));

Graduado em Ciência da Computação pela UNIP (Universidade Paulista) e atualmente morando em Goiânia-GO. Desde 1998 tem atuado no desenvolvimento de sistemas, seja como responsável principal ou como freelancer ou consultor. Entre as linguagens que já desenvolveu pode-se incluir Java, Delphi, C++, Python, Perl, PHP, Ruby, etc. Alguns projetos já desenvolvidos incluem salas de chat, fóruns, sistemas de gerenciamento de notícias, blogs, sistemas de helpdesk, sites corporativos, sistemas acadêmicos e financeiros. É o proprietário e principal editor de conteúdo do site Arquivo de Códigos.

Atua também como professor do curso de Sistemas de Informação da Faculdade Delta (http://www.faculdadedelta.edu.br)

Este usuário atua como freelancer Veja a relação de freelancers

Use este formulário para inserir um novo comentário para este artigo ou tutorial. É preciso estar logado no site. Se você já um usuário registrado, efetue o login no menu esquerdo de nossas páginas.

Título do comentário:

Seu comentário:

Dicas de formatação: Não é permitido código HTML nos comentários. No entanto, você pode conseguir boas formatações usando: [b][/b] - para negrito [ul][/ul] - para listas não ordenadas [li][/li] - para itens da lista [pre][/pre] - para exibir trechos de códigos-fonte (de forma a manter a formatação e facilitar a leitura)

O objeto XMLHttpRequest e o XML DOM

Desenvolvendo um sistema de pesquisa de alunos por matrícula usando AJAX e JSP

Introdução ao processamento assíncrono usando AJAX

Ruby - Escrevendo seu primeiro programa em Ruby

Apache Maven - Baixando, instalando e testando o Apache Maven

Adobe Flex - Escrevendo um sistema de login de usuários usando Flex + PHP

C - Criando seu primeiro programa C usando o Dev-C++

Apache Tomcat - Usando o container e servidor web Apache Tomcat - Introdução

Ruby - Instalando e executando Ruby no Windows

AJAX - Introdução ao processamento assíncrono usando AJAX

Java Servlets - Escrevendo, compilando e executando seu primeiro Servlet

Java - Gerenciadores de Layout - Apresentando BorderLayout

Ruby On Rails - Instalando Ruby On Rails no Windows

Apache Tomcat - Entendendo a chamada à pagina inicial do Tomcat

Apache Tomcat - Estrutura básica de uma aplicação web desenvolvida em Java

Adobe Flex - Baixando, instalando e testando o SDK do Adobe Flex no Windows

MySQL - Instalando e Executando o MySQL no Windows

Java - Gerenciadores de Layout - Apresentando FlowLayout

Tipos de dados da linguagem Java