Web sites dinâmicos com Ajax + JSP + MySQL

Não é feitiçaria, é Metodologia (essa foi de doer)! Este artigo contém informações de utilização do Ajax aliados ao JSP e MySQL. Devo advertir que não é meu objetivo ensinar JSP ou MySQL e que o principal foco deste artigo é o AJAX (Asynchronous JavaScript And XML) e seus recursos, como o XMLHttpRequest.

brejao

Por Renan Galter Brejão em 02/03/2007

Hits: 57.786 Categoria: Javascript Subcategoria: Avançado

Parte 2: Construindo uma página de inserção de dados

Criei uma página simples para facilitar o entendimento. Nela, temos um formulário com alguns campos, que irão enviar os parâmetros para a página que fará a inserção no banco de dados. Antes de proceder, é melhor que já tenha construído o seu banco de dados, no MySQL.

Crie um banco de dados no MySQL. Meu banco chama-se "projeto2", a tabela chama-se "geral2" e os campos são: codigo (auto incremento), nome, endereco, cidade, telefone, login e senha.

Você pode alterá-los, contanto que modifique as variáveis corretamente, tanto no Ajax quanto no HTML e JSP.

Esta página chama-se "formulario.jsp" e, após o clique no botão "Gravar", deverá enviar os parâmetros para a página "grava_usuario.jsp" e limpar os dados dom campos, preparando para uma nova inserção.

<html>
<head>
<title>Teste</title>
<script>
function verificacampos()
{

var nome = document.getElementById("nome").value;
var senha = document.getElementById("senha").value;
var login = document.getElementById("login").value;
if (senha == "" || login == "" || nome == "")
{
    alert('É necessário digitar os campos Nome, Login e Senha corretamente');
    return false;
}
else
{
        salvar()

}

}
//esta é a função Ajax. Sem ela, nada acontece.
function openAjax() {

var ajax;

try{
    ajax = new XMLHttpRequest(); // XMLHttpRequest para Firefox, Safari, dentre outros.
}catch(ee){
    try{
        ajax = new ActiveXObject("Msxml2.XMLHTTP"); // Para o Internet Explorer
    }catch(e){
        try{
            ajax = new ActiveXObject("Microsoft.XMLHTTP"); // Para o Internet Explorer
        }catch(E){
            ajax = false;
        }
    }
}
return ajax;
}

function salvar()
{
        var nome = document.getElementById('nome').value; //Note que as variáveis são resgatadas pela função getElementById.
        var endereco = document.getElementById('endereco').value;
        var cidade = document.getElementById('cidade').value;
        var telefone = document.getElementById('telefone').value;
        var login = document.getElementById('login').value;
        var senha = document.getElementById('senha').value;

        var exibeResultado = document.getElementById('exibeResultado');

            var ajax = openAjax(); // Inicia o Ajax.
            ajax.open("GET", "grava_usuario.jsp?nome=" + nome +"&endereco=" + endereco + "&cidade=" + cidade + "&telefone=" + telefone +"&login=" + login + "&senha="+ senha, true); // Envia o termo da busca como uma querystring, nos possibilitando o filtro na busca.
            ajax.onreadystatechange = function()
            {
                if(ajax.readyState == 1) // Quando estiver carregando, exibe: carregando...
                {
                    exibeResultado.innerHTML = "Inserindo";
                }
                if(ajax.readyState == 4) // Quando estiver tudo pronto.
                {
                    if(ajax.status == 200)
                    {
                        var resultado = ajax.responseText;
                        exibeResultado.innerHTML = resultado;
                    }
                      else
                      {
                          exibeResultado.innerHTML = "Erro nas funções do Ajax";
                      }
                }
            }
            ajax.send(null); // submete
            document.getElementById("nome").value= "";//limpa os campos
            document.getElementById("endereco").value= "";
            document.getElementById("senha").value= "";
            document.getElementById("login").value= "";
            document.getElementById("cidade").value= "";
            document.getElementById("telefone").value= "";
            document.getElementById("nome").setFocus=true;

}

</script>

<link rel="stylesheet" type="text/css" href="tabelacss.css"/>
</head>

<body>

<table id="tabela_especial" align="center" width="900">
  <tr>
    <td>
      <table border="1" align="center" width="790">
        <tr>
          <td id="fundo_branco">New Brejos' PUserName_Senha_Administrador </td>
        </tr>
        <tr>
          <td align="left">
            <table align=center width="790">
              <tr>
                <td>
                <form  name="formgrava" action="grava_usuario.jsp">
            <table width="560">
              <tr>
                <td align="right">Nome:</td><td><input type="text" id="nome" size="30" name="nome"></td>
              </tr>
              <tr>
                <td align="right">Endereço:</td><td><input type="text" id="endereco" size="30" name="endereco"></td>
              </tr>
              <tr>
                <td align="right">Cidade:</td><td><input type="text" id="cidade" size="30" name="cidade"></td>
              </tr>
              <tr>
                <td align="right">Telefone:</td><td><input type="text" id="telefone" size="30" name="telefone"></td>
              </tr>
              <tr>
                <td align="right">Login:</td><td><input type="text" id="login" size="30" name="login"></td>
              </tr>
              <tr>
                <td align="right">Senha:</td><td><input type="password" id="senha" size="30" name="senha"></td>
              </tr>
              <tr><br></tr>
              <tr>
                <td align="left"><td><input type="button" size="30" name="gravar" id="gravar" value="Gravar" onclick="verificacampos()">

                <input type="button" size="30" name="cancelar" value="Cancelar">

              </tr>
               </form>
            </table></td>



        </tr>
          </td>
        </tr>
            </table><tr></tr>
          <table>
            <tr align="left">
              <td align="left"><font color="lightgray">Status: </font></td><td align="left"><div id="exibeResultado" align="center"><font color="lightgray">Em espera</font></div></td>
            </tr>
          </table>
          <tr><td align="right"><font color="#EBD8F5">Inserção usando AJAX</font></td></tr>
      </table>

    </td><br>
  </tr>


</table>

</body>
</html>

Note que os campos estão com "name" e com "ID". O campo "name" não é necessário, mas o campo "ID" é extremamente necessário. Note também que a Div "exibeResultado" é necessária, pois o Ajax utiliza-a para exibir os resultados da inserção.

Próximo passo: A página JSP que irá inserir os dados.

Páginas do artigo

   1. Introdução ao AJAX
   2. Construindo uma página de inserção de dados
   3. Página JSP que irá gravar os parâmetros

Outros artigos deste autor

Nenhum artigo encontrado.

Leitura recomendada

XSS - Cross Site Scripting

jQuery - Criando um simples jogo da velha

W3C - World Wide Web Consortium

Google Maps API - Criando e interagindo com seus próprios mapas

MathML - Mathematical Markup Language

Comentários

Opa, parabens pelo artigo! Tema bem atual :D
Só gostaria que fosse em PHP :P

Pra ajudar um pouco, aqui vai uma possibilidade query pro MySQL para uso com o artigo:

CREATE DATABASE `projeto2` DEFAULT CHARACTER SET latin1 COLLATE latin1_swedish_ci;
USE `projeto2`;
CREATE TABLE `geral2` (
  `codigo` int(6) NOT NULL auto_increment,
  `nome` varchar(30) collate latin1_general_ci default NULL,
  `endereço` varchar(40) collate latin1_general_ci default NULL,
  `cidade` varchar(20) collate latin1_general_ci default NULL,
  `telefone` varchar(15) collate latin1_general_ci default NULL,
  `login` varchar(15) collate latin1_general_ci default NULL,
  `senha` varchar(15) collate latin1_general_ci default NULL,
  KEY `codigo` (`codigo`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 COLLATE=latin1_general_ci;

Sim, o campo telefone como string foi proposital, já que não teve um tratamento para telefones do tipo (83) 555-4568

#1 Comentário enviado por fernandobrito em 02/03/2007 - 17:15h

Opa, parabens pelo artigo! Tema bem atual :D
Só gostaria que fosse em PHP :P

Pra ajudar um pouco, aqui vai uma possibilidade query pro MySQL para uso com o artigo:

CREATE DATABASE `projeto2` DEFAULT CHARACTER SET latin1 COLLATE latin1_swedish_ci;
USE `projeto2`;
CREATE TABLE `geral2` (
`codigo` int(6) NOT NULL auto_increment,
`nome` varchar(30) collate latin1_general_ci default NULL,
`endereço` varchar(40) collate latin1_general_ci default NULL,
`cidade` varchar(20) collate latin1_general_ci default NULL,
`telefone` varchar(15) collate latin1_general_ci default NULL,
`login` varchar(15) collate latin1_general_ci default NULL,
`senha` varchar(15) collate latin1_general_ci default NULL,
KEY `codigo` (`codigo`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 COLLATE=latin1_general_ci;

Sim, o campo telefone como string foi proposital, já que não teve um tratamento para telefones do tipo (83) 555-4568

Fala fernandobrito, obrigado pelo comentário.
Não postei em PHP porque sou fã incondicional do java.. e até porque não conheço o PHP ;)

valew

#2 Comentário enviado por brejao em 02/03/2007 - 17:56h

Fala fernandobrito, obrigado pelo comentário.
Não postei em PHP porque sou fã incondicional do java.. e até porque não conheço o PHP ;)

valew

Para dar uma ajuda ao fernandobrido segue o código em php.

<?
include "conexao.class.php"; // a minha classe de conexão é em mysqli

$SQL=new Conexao();

$r=$SQL->prepare(
"INSERT INTO projeto2 (nome,endereco,cidade,telefone,login,senha)
VALUES (?,?,?,?,?,?)");

$r->bind_param('ssssss' ,$nome,$endereco,$cidade,$telefone,$login,$senha);

$nome=$_GET['nome'];
$endereco=$_GET['endereco'];
$cidade=$_GET['cidade'];
$login=$_GET['login'];
$senha=$_GET['senha'];

$r->execute();

if($r->affected_rows>0) echo "Dados inseridos";

$r->close();
?>

#3 Comentário enviado por spychaser em 03/03/2007 - 13:30h

Para dar uma ajuda ao fernandobrido segue o código em php.

<?
include "conexao.class.php"; // a minha classe de conexão é em mysqli

$SQL=new Conexao();

$r=$SQL->prepare(
"INSERT INTO projeto2 (nome,endereco,cidade,telefone,login,senha)
VALUES (?,?,?,?,?,?)");

$r->bind_param('ssssss' ,$nome,$endereco,$cidade,$telefone,$login,$senha);

$nome=$_GET['nome'];
$endereco=$_GET['endereco'];
$cidade=$_GET['cidade'];
$login=$_GET['login'];
$senha=$_GET['senha'];

$r->execute();

if($r->affected_rows>0) echo "Dados inseridos";

$r->close();
?>

Kra 100% o tutorial.... foi mto útil pra mim! :-)

#4 Comentário enviado por eudson em 04/03/2007 - 22:54h

Kra 100% o tutorial.... foi mto útil pra mim! :-)

Muito bom o artigo, a única observação é quanto a utilização do innerHTML, que não funciona em todos os browsers. A solução que eu uso é a seguinte:

var o = document.getElementById("exibeResultado"); // pega o objeto
var node = document.createTextNode("Inserindo"); // cria um novo no de texto
for(var cont = 0; cont < o.childNodes.length; cont++) {
  o.removeChild(o.childNodes[cont]); // remove todo o conteudo do objeto
}
o.appendChild(node); // adiciona o novo texto ao objeto

#5 Comentário enviado por ls_junior em 05/03/2007 - 08:01h

Muito bom o artigo, a única observação é quanto a utilização do innerHTML, que não funciona em todos os browsers. A solução que eu uso é a seguinte:

var o = document.getElementById("exibeResultado"); // pega o objeto
var node = document.createTextNode("Inserindo"); // cria um novo no de texto
for(var cont = 0; cont < o.childNodes.length; cont++) {
o.removeChild(o.childNodes[cont]); // remove todo o conteudo do objeto
}
o.appendChild(node); // adiciona o novo texto ao objeto

valew ls_junior. essa eu não sabia.... pessoal obrigado pelos comentários..
fico feliz que meu artigo seja útil...
fernandobrito, não importa a lingua que use, seja ZOPE, PHP ou ASP, qualquer uma delas terá o mesmo efeito se substituir minha página de gravação JSP por outra que manuseie o banco de dados, inserindo os registros corretamente, de acordo com os parâmetros resgatados do AJAX.
:)

#6 Comentário enviado por brejao em 05/03/2007 - 12:09h

valew ls_junior. essa eu não sabia.... pessoal obrigado pelos comentários..
fico feliz que meu artigo seja útil...
fernandobrito, não importa a lingua que use, seja ZOPE, PHP ou ASP, qualquer uma delas terá o mesmo efeito se substituir minha página de gravação JSP por outra que manuseie o banco de dados, inserindo os registros corretamente, de acordo com os parâmetros resgatados do AJAX.
:)

eh, deu pra entender que o que importa é o Ajax
valeu, vou fazer alguns testes divertidos aqui! :)

#7 Comentário enviado por fernandobrito em 06/03/2007 - 05:20h

eh, deu pra entender que o que importa é o Ajax
valeu, vou fazer alguns testes divertidos aqui! :)

Parabéns, belo artigo, muito tem se falado em Ajax, já acessei vários sites feitos em Ajax e realmente é uma tecnologia interessante.

#8 Comentário enviado por agk em 08/03/2007 - 14:16h

Parabéns, belo artigo, muito tem se falado em Ajax, já acessei vários sites feitos em Ajax e realmente é uma tecnologia interessante.

Esse artigo é o melhor q encontrei, junta 3 ferramentas 1 pouco dificil de c utilizar, vc esta de parabens obrigado por ter feito esse artigo, vc praticamente salvol a minha vida, pra vicar otimo so completando com uma consulta...
vlw msm esse artido é muito util e tem q ser + divulgado!!!!

#9 Comentário enviado por girinoboy em 10/04/2007 - 17:38h

Esse artigo é o melhor q encontrei, junta 3 ferramentas 1 pouco dificil de c utilizar, vc esta de parabens obrigado por ter feito esse artigo, vc praticamente salvol a minha vida, pra vicar otimo so completando com uma consulta...
vlw msm esse artido é muito util e tem q ser + divulgado!!!!

muito bom!

#10 Comentário enviado por jeffersondantas em 12/04/2007 - 10:53h

muito bom!

Mt Bom o artigo...
só uma dica, na leitura do formulário para armazenar os dados você poderia simplificar por exemplo por...

Function Varre(id)
{

// onde id é o ID do Form

    var dados = new Array();

    for( i=0; i < document.getElementById(id).elements.length; i++)
   {
        var aux = encodeURIComponent(document.getElementById(id).elements[i].name);
	aux += "=";
	aux += encodeURIComponent(document.getElementById(id).elements[i].value);
	dados.push(aux);
    }
	
    return dados.join("&");
}

...assim pegaria os valores mais facilmente...
mais uma vez mt bom o artigo...
flw

#11 Comentário enviado por PHD em 16/07/2007 - 14:46h

Mt Bom o artigo...
só uma dica, na leitura do formulário para armazenar os dados você poderia simplificar por exemplo por...

Function Varre(id)
{

// onde id é o ID do Form

var dados = new Array();

for( i=0; i < document.getElementById(id).elements.length; i++)
{
var aux = encodeURIComponent(document.getElementById(id).elements[i].name);
aux += "=";
aux += encodeURIComponent(document.getElementById(id).elements[i].value);
dados.push(aux);
}

return dados.join("&");
}

...assim pegaria os valores mais facilmente...
mais uma vez mt bom o artigo...
flw

Cara, estou com um problema ao usar esse modelo para enviar dados ao servidor e ao banco de dados. O primeiro envio é efetuado sem problemas, mas se for enviar as mesmas informações novamente, a página não é enviada. É como se ela ficasse no cache no navegador, sem ser processada novamente pelo servidor.
Exemplo: o usuário faz o login com sucesso, porém ao deslogar não consegue logar novamente porque a página, a ser carregada assincronamente, não é solicitada novamente ao servidor.
Alguém sabe como me ajudar?

#12 Comentário enviado por juliak em 21/01/2008 - 16:36h

Cara, estou com um problema ao usar esse modelo para enviar dados ao servidor e ao banco de dados. O primeiro envio é efetuado sem problemas, mas se for enviar as mesmas informações novamente, a página não é enviada. É como se ela ficasse no cache no navegador, sem ser processada novamente pelo servidor.
Exemplo: o usuário faz o login com sucesso, porém ao deslogar não consegue logar novamente porque a página, a ser carregada assincronamente, não é solicitada novamente ao servidor.
Alguém sabe como me ajudar?

pode deixar disponivel o fonte tabelacss.css
ou enviar por email lescoutinhovr@yahoo.com.br

muito bom o artigo!
e que os seus novos artigos tbm sejam em java :)

#13 Comentário enviado por tivrfoa em 01/03/2008 - 17:23h

pode deixar disponivel o fonte tabelacss.css
ou enviar por email lescoutinhovr@yahoo.com.br

muito bom o artigo!
e que os seus novos artigos tbm sejam em java :)

como faço para que em caso de sucesso , ao invés de exibir uma mensagem jogar o usuario para uma outra pagina ?
o comando jsp - response.sendRedirect("inicio.jsp"); parou de funcionar., invés de direcionar para a pagina inicio.jsp, ele esta exibindo a paginda dentro da div ...

#14 Comentário enviado por jpraminelli em 21/09/2009 - 17:08h

como faço para que em caso de sucesso , ao invés de exibir uma mensagem jogar o usuario para uma outra pagina ?
o comando jsp - response.sendRedirect("inicio.jsp"); parou de funcionar., invés de direcionar para a pagina inicio.jsp, ele esta exibindo a paginda dentro da div ...

ai voce entende bem de ajax parabens voce poderia me ajudar com meu trabalho ele esta postado nesse post eu sou novo no linux eu so preciso tirar algumas duvidas me da um help la o linkin do post e esse:

http://www.vivaolinux.com.br/topico/Desenvolvimento-de-Jogos/como-instalar-o-libmysqlclient15off-no-ubuntu-10.04 




te agradeço muito valew

#15 Comentário enviado por ktinho em 06/12/2010 - 15:47h

ai voce entende bem de ajax parabens voce poderia me ajudar com meu trabalho ele esta postado nesse post eu sou novo no linux eu so preciso tirar algumas duvidas me da um help la o linkin do post e esse:

http://www.vivaolinux.com.br/topico/Desenvolvimento-de-Jogos/como-instalar-o-libmysqlclient15off-no-...

te agradeço muito valew

Muito bom !

#16 Comentário enviado por leandrobrunoo em 04/12/2012 - 16:10h

Muito bom !

Parte 2: Construindo uma página de inserção de dados

Páginas do artigo

Outros artigos deste autor

Leitura recomendada

Comentários

Contribuir com comentário