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.
Introdução ao AJAX
O que é o AJAX? Muitos desenvolvedores web já desejaram programar usando tal metodologia, mas não obtinham os conceitos necessários. Sim, o Ajax não é uma tecnologia ou linguagem de programação, mas uma metodologia na qual envolve tecnologias como JavaScript, XML e, obviamente, HTML.
O principal objetivo do Ajax é construir uma interação mais veloz e interativa com o usuário, bem como tornar dinâmico o uso do web site. Em outras palavras, o Ajax torna seu web site atraente e não usa métodos antigos de construções de páginas, como o REFRESH, fazendo com o que seu site fique nos moldes de uma aplicação desktop.
Quando interagimos com aplicativos baseados no Ajax, não precisamos esperar que a página se recarregue a cada interação que fazemos com ela. À medida que vamos utilizando seus recursos, a interface vai se moldando às nossas necessidades, baseando-se em nossas ações e requisições perante a ela.
Existem dois métodos de construção de web sites, o método tradicional e o método de construção usando o Ajax.
O método tradicional age assim: cada evento acionado pelo usuário (mouse, teclado, etc...) transforma-se em uma requisição HTTP, na qual uma nova página com os dados são requeridos no servidor. Este método antigo, faz com que o usuário espere por cada resposta do servidor, além de sobrecarregar a rede com dados desnecessários. Por exemplo, em uma página de inserção de dados, com formulário, uma nova requisição HTTP não seria necessário, caso o usuário desejasse inserir muitos registros. A página seria exatamente a mesma e, o método faria com que cada inserção requeresse a mesma página com o formulário novamente.
Já o método com Ajax tornaria a página mais dinâmica visto que, cada clique no botão "Inserir" enviaria somente os dados necessários, livrando o usuário de esperar o famoso REFRESH.
Abaixo temos duas ilustrações simplificando os dois esquemas:
O principal objetivo do Ajax é construir uma interação mais veloz e interativa com o usuário, bem como tornar dinâmico o uso do web site. Em outras palavras, o Ajax torna seu web site atraente e não usa métodos antigos de construções de páginas, como o REFRESH, fazendo com o que seu site fique nos moldes de uma aplicação desktop.
Quando interagimos com aplicativos baseados no Ajax, não precisamos esperar que a página se recarregue a cada interação que fazemos com ela. À medida que vamos utilizando seus recursos, a interface vai se moldando às nossas necessidades, baseando-se em nossas ações e requisições perante a ela.
Existem dois métodos de construção de web sites, o método tradicional e o método de construção usando o Ajax.
O método tradicional age assim: cada evento acionado pelo usuário (mouse, teclado, etc...) transforma-se em uma requisição HTTP, na qual uma nova página com os dados são requeridos no servidor. Este método antigo, faz com que o usuário espere por cada resposta do servidor, além de sobrecarregar a rede com dados desnecessários. Por exemplo, em uma página de inserção de dados, com formulário, uma nova requisição HTTP não seria necessário, caso o usuário desejasse inserir muitos registros. A página seria exatamente a mesma e, o método faria com que cada inserção requeresse a mesma página com o formulário novamente.
Já o método com Ajax tornaria a página mais dinâmica visto que, cada clique no botão "Inserir" enviaria somente os dados necessários, livrando o usuário de esperar o famoso REFRESH.
Abaixo temos duas ilustrações simplificando os dois esquemas:
Abaixo temos a performance da criança...
Bom, chega de lero-lero. Próximo passo: Construindo um formulário de inserção utilizando o Ajax.
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