Precisa de um freelancer, códigos-fonte e exemplos completos? Bem-vindo(a) ao meu site. Além de realizar alguns serviços como freelancer eu tenho alguns códigos-fonte e exemplos completos de Java, Delphi, PHP, Python, C/C++, Hibernate, JPA, Spring, JSP, Servlets, Ruby, Ruby On Rails e muitas outras linguagens e frameworks. Veja como falar comigo clicando aqui.
Desenvolvendo um sistema de pesquisa
de alunos por matrícula usando AJAX e JSP
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);
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:
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:
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:
Todo o conteúdo deste site,
quando não devidamente observado, pertence a seus idealizadores
e não
poderá ser usado para outras finalidades senão estudo e
aprimoramento de técnicas de programação.
Certifique-se de ler asnotas legaisantes de proceder com
o acesso e leitura do
conteúdo disponibilizado nestas páginas.
Precisa de um freelancer, códigos-fonte e exemplos completos?
Códigos-fonte 
Bancos de Dados
Usuários On-Line
Desenvolvendo um sistema de pesquisa
de alunos por matrícula usando AJAX e JSP
Veja dicas, truques e anotações de 
