Realizando uma pesquisa no BD com AJAX via objeto XMLHttpRequest
Neste artigo o autor explica como realizar uma pesquisa em um banco de dados, sem realizar o "PostBack" na página, via o objeto XMLHttpRequest, do JavaScript, sem utilizar os controles prontos do ASPNET. O efeito visual causado é interessante,(similar aos eventos onExit() do Delphi)
Realizando uma pesquisa no BD com AJAX sem utilizar os controles prontos do ASPNET.
Olá! Neste artigo vou explicar como realizar uma pesquisa em um banco de dados, sem realizar o "PostBack" na página, via o objeto XMLHttpRequest, do JavaScript, sem utilizar os controles prontos do ASPNET.
O efeito visual causado é muito interessante,(similar aos eventos onExit() do Delphi), ao sair de um determinado campo de código será feita uma pesquisa no banco de dados sem o usuário ver, e mostrado na tela a descrição respectiva ao código, de maneira assíncrona, isto é, o usuário poderá continuar navegando enquanto a pesquisa é realizada.
O banco usitlizado será MySql e a linguagem de "code behind" será o C#. (Lembrando que, como não estamos utilizando componentes prontos do ASPNET, você pode com algumas poucas mudanças utilizar a mesma arquitetura com qualquer outra linguagem)
Pois bem, para começar, e para efeitos didáticos, vamos usar o banco MySql, criar uma tabela bem simples de cadastro de bandas e populá-las, com o seguinte script:
Obs:Só lembrando que, para a devida execução deste exemplo, a máquina deverá ter instalado o provider do MySql, encontrado em www.mysql.com
CREATE TABLE banda(
id int(6) NOT NULL,
nome varchar(50) NULL,
primary key(id)
);
INSERT INTO banda values ( 1,"Dream Theater");
INSERT INTO banda values (2,"Iron Maiden");
INSERT INTO banda values (3,"Kamelot");
INSERT INTO banda values (4,"Angra");
INSERT INTO banda values (5,"Aquaria");
INSERT INTO banda values (6,"Axia");
Ok, feito isto, abra sua ferramenta IDE preferida de ASP.NET( No caso, estou utilizando o Web Developer Express), crie um "New Web Site":
Nesta nova página "Default", adicione 2 controles TextBox, um chamado "tbCodigo" e outro "tbNome":
Bem, aqui já temos tudo que precisamos para "ver" a nossa pesquisa funcionando. Agora vamos começar a "mão na massa":
Crie um arquivo de JavaScript, no Web Developer Express voce pode fazer isto clicando em "Add New Item" no Solution Explorer.
Neste novo arquivo de Javascript, estará toda a"mágica". Primeiramente, criaremos uma função chamada getNome() com o seguinte corpo:
function getNome() {
xmlHttpRequest.open("GET","Persistencia.aspx?idBanda="+document.form1.tbCodigo.value , true);
xmlHttpRequest.onreadystatechange = doAtualiza;
xmlHttpRequest.send(null);
}
A função getNome(), basicamente faz o seguinte: lê o conteúdo de uma página sem precisar abri-la, isto é, pega só a saída da página.
Eis a próxima função, doAtualiza():
function doAtualiza() {
if (xmlHttpRequest.readyState == 4) {
var retorno = xmlHttpRequest.responseText.split("-");
document.forms[0].tbNome.value = retorno[0];
}
}
A função doAtualiza() verifica o status da leitura da nossa página de retorno, e este código 4, é o código que indica que deu tudo certo na leitura. Obs: Para efeitos didáticos, não tratei os outros códigos pela simplicidade da posterior implementação e para que a idéia "macro" desta arquiterua seja entendida de forma clara e objetiva.
Eis a última função, getXMLHttpRequest()
function getXMLHttpRequest() {
var xmlhttp;
if (!xmlhttp && typeof XMLHttpRequest != ''undefined'') {
try {
xmlhttp = new XMLHttpRequest();
} catch (e) {
xmlhttp = false;
}
}
return xmlhttp;
}
Esta função, retorna o nosso objeto XMLHttpResquest(), que é o cara que vai fazer aquela leitura assíncrona pra gente, só do resultado(ou saída) de uma página sem precisar abri-la, e devolver em forma de XML.
Bom, estamos com quase tudo pronto, porém, pode observar, que lá em cima, na primeira função, estamos usando um objeto xmlhttp, certo? Onde ele está declarado? Ainda não odeclaramos, e para isso, vamos utilizar o recurso do JavaScript de podermos declarar uma variável global, desta forma:
var xmlHttpRequest = getXMLHttp();
Agora está na hora de começarmos a fazer uso da primeira função, getNome(). Vemos que ela chama uma página chamada Persistencia.aspx,passando um argumento pelo metodo "GET", chamado "idBanda":
xmlhttpRequest.open("GET","Persistencia.aspx?idBanda=" , true);
Pois bem, vamos criar esta nossa página chamada Persistencia.aspx. Adicione uma nova página ao seu projeto chamada "Persistencia.aspx".
No "code behind" da página, no evento onLoad() desta página "Persistencia.aspx", vamos colocar o seguinte código:
protected void Page_Load(object sender, EventArgs e)
{
string idBanda = this.Request.QueryString.GetValues("idbanda")[0];
string sql = "SELECT nome FROM banda where id = " + idBanda;
string conexao = "database = testes; data source = localhost;username = root; password =root";
MySqlConnection myConexao = new MySqlConnection(conexao);
MySqlDataAdapter daAdapter = new MySqlDataAdapter(sql, myConexao);
DataTable table = new DataTable();
try {
daAdapter.Fill(table);
DataRow[] rows = table.Select();
Response.Write(rows[0][0].ToString() + "-");
}
finally {
myConexao.Close();
}
}
Este código faz o seguinte: Recupera o argumento passado via "GET", ou seja, a queryString, faz uma select no banco verificando o nome da banda e faz um Write, ou seja, justamente porque sabemos que o nosso objeto lá atrás, o XMLHttpRequest, pegará só a saída desta página!
Sendo assim, está pronto nosso código! LEMBRE-SE: Este exemplo para efeitos didáticos foi simplificado, pois sabemos que a boa prática não seria estes comandos de persistência ficarem junto com o código da página, e sim utilizar um DAO, ou algum outro padrao para persistência, mas este já é um outro assunto..
Acabamos quase tudo, só falta um detalhe: Atribuir à saída do campo código, o evento getNome() do JavaScript, que causará um efeito pareceido com o evento "onExit()" do Delphi. Para isto colocaremos a seguinte chamada no código html do controle "tbCodigo" da página "Default.aspx":
onBlur="javascript:getNome();"
E agora, atrelar o arquivo JavaScript à página, com '' script language="JavaScript" src="Funcoes.js"'' antes da tag "html".
Pronto! Confira o efeito visual, digitando algum código da tabela e depois saindo do campo código, com um "TAB", por exemplo, O campo Descricao será atualizado sem nenhum postBack!
É isto ai amigos, espero que tenham gostado e que seja útil, abraços até a próxima!
Olá! Neste artigo vou explicar como realizar uma pesquisa em um banco de dados, sem realizar o "PostBack" na página, via o objeto XMLHttpRequest, do JavaScript, sem utilizar os controles prontos do ASPNET.
O efeito visual causado é muito interessante,(similar aos eventos onExit() do Delphi), ao sair de um determinado campo de código será feita uma pesquisa no banco de dados sem o usuário ver, e mostrado na tela a descrição respectiva ao código, de maneira assíncrona, isto é, o usuário poderá continuar navegando enquanto a pesquisa é realizada.
O banco usitlizado será MySql e a linguagem de "code behind" será o C#. (Lembrando que, como não estamos utilizando componentes prontos do ASPNET, você pode com algumas poucas mudanças utilizar a mesma arquitetura com qualquer outra linguagem)
Pois bem, para começar, e para efeitos didáticos, vamos usar o banco MySql, criar uma tabela bem simples de cadastro de bandas e populá-las, com o seguinte script:
Obs:Só lembrando que, para a devida execução deste exemplo, a máquina deverá ter instalado o provider do MySql, encontrado em www.mysql.com
CREATE TABLE banda(
id int(6) NOT NULL,
nome varchar(50) NULL,
primary key(id)
);
INSERT INTO banda values ( 1,"Dream Theater");
INSERT INTO banda values (2,"Iron Maiden");
INSERT INTO banda values (3,"Kamelot");
INSERT INTO banda values (4,"Angra");
INSERT INTO banda values (5,"Aquaria");
INSERT INTO banda values (6,"Axia");
Ok, feito isto, abra sua ferramenta IDE preferida de ASP.NET( No caso, estou utilizando o Web Developer Express), crie um "New Web Site":
Nesta nova página "Default", adicione 2 controles TextBox, um chamado "tbCodigo" e outro "tbNome":
Bem, aqui já temos tudo que precisamos para "ver" a nossa pesquisa funcionando. Agora vamos começar a "mão na massa":
Crie um arquivo de JavaScript, no Web Developer Express voce pode fazer isto clicando em "Add New Item" no Solution Explorer.
Neste novo arquivo de Javascript, estará toda a"mágica". Primeiramente, criaremos uma função chamada getNome() com o seguinte corpo:
function getNome() {
xmlHttpRequest.open("GET","Persistencia.aspx?idBanda="+document.form1.tbCodigo.value , true);
xmlHttpRequest.onreadystatechange = doAtualiza;
xmlHttpRequest.send(null);
}
A função getNome(), basicamente faz o seguinte: lê o conteúdo de uma página sem precisar abri-la, isto é, pega só a saída da página.
Eis a próxima função, doAtualiza():
function doAtualiza() {
if (xmlHttpRequest.readyState == 4) {
var retorno = xmlHttpRequest.responseText.split("-");
document.forms[0].tbNome.value = retorno[0];
}
}
A função doAtualiza() verifica o status da leitura da nossa página de retorno, e este código 4, é o código que indica que deu tudo certo na leitura. Obs: Para efeitos didáticos, não tratei os outros códigos pela simplicidade da posterior implementação e para que a idéia "macro" desta arquiterua seja entendida de forma clara e objetiva.
Eis a última função, getXMLHttpRequest()
function getXMLHttpRequest() {
var xmlhttp;
if (!xmlhttp && typeof XMLHttpRequest != ''undefined'') {
try {
xmlhttp = new XMLHttpRequest();
} catch (e) {
xmlhttp = false;
}
}
return xmlhttp;
}
Esta função, retorna o nosso objeto XMLHttpResquest(), que é o cara que vai fazer aquela leitura assíncrona pra gente, só do resultado(ou saída) de uma página sem precisar abri-la, e devolver em forma de XML.
Bom, estamos com quase tudo pronto, porém, pode observar, que lá em cima, na primeira função, estamos usando um objeto xmlhttp, certo? Onde ele está declarado? Ainda não odeclaramos, e para isso, vamos utilizar o recurso do JavaScript de podermos declarar uma variável global, desta forma:
var xmlHttpRequest = getXMLHttp();
Agora está na hora de começarmos a fazer uso da primeira função, getNome(). Vemos que ela chama uma página chamada Persistencia.aspx,passando um argumento pelo metodo "GET", chamado "idBanda":
xmlhttpRequest.open("GET","Persistencia.aspx?idBanda=" , true);
Pois bem, vamos criar esta nossa página chamada Persistencia.aspx. Adicione uma nova página ao seu projeto chamada "Persistencia.aspx".
No "code behind" da página, no evento onLoad() desta página "Persistencia.aspx", vamos colocar o seguinte código:
protected void Page_Load(object sender, EventArgs e)
{
string idBanda = this.Request.QueryString.GetValues("idbanda")[0];
string sql = "SELECT nome FROM banda where id = " + idBanda;
string conexao = "database = testes; data source = localhost;username = root; password =root";
MySqlConnection myConexao = new MySqlConnection(conexao);
MySqlDataAdapter daAdapter = new MySqlDataAdapter(sql, myConexao);
DataTable table = new DataTable();
try {
daAdapter.Fill(table);
DataRow[] rows = table.Select();
Response.Write(rows[0][0].ToString() + "-");
}
finally {
myConexao.Close();
}
}
Este código faz o seguinte: Recupera o argumento passado via "GET", ou seja, a queryString, faz uma select no banco verificando o nome da banda e faz um Write, ou seja, justamente porque sabemos que o nosso objeto lá atrás, o XMLHttpRequest, pegará só a saída desta página!
Sendo assim, está pronto nosso código! LEMBRE-SE: Este exemplo para efeitos didáticos foi simplificado, pois sabemos que a boa prática não seria estes comandos de persistência ficarem junto com o código da página, e sim utilizar um DAO, ou algum outro padrao para persistência, mas este já é um outro assunto..
Acabamos quase tudo, só falta um detalhe: Atribuir à saída do campo código, o evento getNome() do JavaScript, que causará um efeito pareceido com o evento "onExit()" do Delphi. Para isto colocaremos a seguinte chamada no código html do controle "tbCodigo" da página "Default.aspx":
onBlur="javascript:getNome();"
E agora, atrelar o arquivo JavaScript à página, com '' script language="JavaScript" src="Funcoes.js"'' antes da tag "html".
Pronto! Confira o efeito visual, digitando algum código da tabela e depois saindo do campo código, com um "TAB", por exemplo, O campo Descricao será atualizado sem nenhum postBack!
É isto ai amigos, espero que tenham gostado e que seja útil, abraços até a próxima!
Confira outros conteúdos:
Por
Allan
Em 2008
Veja os resultado dos nossos alunos
Conquistas reais de quem está aplicando o método
<Perguntas frequentes>
Carreira
Metodologia
Assinatura e Pagamentos
Cadastro