Executando consultas ao MySQL com PHP e AJAX

Ol� pessoal, nesse artigo ser� demonstrado como executar consultas em um banco de dados MySQL utilizando AJAX e PHP. Exibir resultados de consultas utilizando PHP � bem comum, mas nesse exemplo vamos incrementar a nossa consulta utilizando AJAX.

Mas o que � AJAX?

Resposta: Ajax � uma sigla para Asynchronous JavaScript and XML. Basicamente � o uso metodol�gico de tecnologias como JavaScript e XML, providas por navegadores, para tornar p�ginas Web mais interativas com o usu�rio, utilizando-se de solicitaç�es ass�ncronas de informaç�es.

Observaç�o: AJAX n�o � uma linguagem, mas uma forma de construir um site utilizando diversas tecnologias.

Para desenvolver esse artigo foram utilizadas as seguintes ferramentas:

WAMPSERVER (Apache, MySQL, PHP5)
Netbeans 7.2 (Voc� pode utilizar o editor de sua prefer�ncia)
MySQL Query Browser (Gerenciamento do banco de dados)

* Todas as ferramentas podem ser adquiridas gratuitamente na internet.

Vamos criar um banco de dados �Agenda� contendo apenas uma tabela de �Contato�. Para criar a base de dados usamos a ferramenta MySQL Query Browser, segue abaixo script:

Listagem 1: Script para criar o banco �Agenda�.


CREATE DATABASE `Agenda`;
CREATE TABLE `Contato` (
  `ID` int(11) NOT NULL AUTO_INCREMENT,
  `NOME` varchar(100) DEFAULT NULL,
  `FONE` varchar(15) NOT NULL,
  `CELULAR` varchar(15) NOT NULL,
  `EMAIL` varchar(50) DEFAULT NULL,
  PRIMARY KEY (`ID`)
) ENGINE=InnoDB AUTO_INCREMENT=2 DEFAULT CHARSET=utf8;

Agora vamos criar tr�s arquivos:

index.html - vai ser nossa p�gina de interaç�o com o usu�rio;
ajax.js - esse arquivo vai possuir toda a l�gica para as requisiç�es;
contato.php - onde ser� feita a conex�o com o banco e executada as consultas.

Aqui n�o ser� feito uso de CSS ou personalizaç�o de componentes na p�gina, esse n�o � o foco do artigo.

O arquivo index.html

Listagem 2: C�digo HTML da p�gina index.html


<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title></title>
    </head>
    <body>
        <script type="text/javascript" src="ajax.js"></script>
        <div id="Container">
            <h1>Agenda de Contatos utilizando AJAX</h1>
            <hr/>

            <h2>Pesquisar Contato:</h2>
            <div id="Pesquisar">
                Infome o nome: 
                <input type="text" name="txtnome" id="txtnome"/> 
                <input type="button" name="btnPesquisar" value="Pesquisar" onclick="getDados();"/>
            </div>
            <hr/>

            <h2>Resultados da pesquisa:</h2>
            <div id="Resultado"></div>
            <hr>

        </div>
    </body>
</html>

Figura 1: P�gina no navegador

O c�digo HTML n�o tem muito segredo, mas vale destacar duas linhas que merecem import�ncia nesse c�digo.

Estamos importando no arquivo que vai executar toda a m�gica do AJAX.

No evento onclick do bot�o estamos chamando a funç�o getDados() que foi escrita no arquivo ajax.js.

O arquivo ajax.js

Como estamos falando em arquivo ajax.js ent�o vamos criar o c�digo, como segue abaixo:

Listagem 3: Conte�do do arquivo ajax.js.


/**
  * Funç�o para criar um objeto XMLHTTPRequest
  */
 function CriaRequest() {
     try{
         request = new XMLHttpRequest();        
     }catch (IEAtual){
         
         try{
             request = new ActiveXObject("Msxml2.XMLHTTP");       
         }catch(IEAntigo){
         
             try{
                 request = new ActiveXObject("Microsoft.XMLHTTP");          
             }catch(falha){
                 request = false;
             }
         }
     }
     
     if (!request) 
         alert("Seu Navegador n�o suporta Ajax!");
     else
         return request;
 }
 
 /**
  * Funç�o para enviar os dados
  */
 function getDados() {
     
     // Declaraç�o de Vari�veis
     var nome   = document.getElementById("txtnome").value;
     var result = document.getElementById("Resultado");
     var xmlreq = CriaRequest();
     
     // Exibi a imagem de progresso
     result.innerHTML = '<img src="Progresso1.gif"/>';
     
     // Iniciar uma requisiç�o
     xmlreq.open("GET", "Contato.php?txtnome=" + nome, true);
     
     // Atribui uma funç�o para ser executada sempre que houver uma mudança de ado
     xmlreq.onreadystatechange = function(){
         
         // Verifica se foi conclu�do com sucesso e a conex�o fechada (readyState=4)
         if (xmlreq.readyState == 4) {
             
             // Verifica se o arquivo foi encontrado com sucesso
             if (xmlreq.status == 200) {
                 result.innerHTML = xmlreq.responseText;
             }else{
                 result.innerHTML = "Erro: " + xmlreq.statusText;
             }
         }
     };
     xmlreq.send(null);
 }

O c�digo est� comentado, mas vale ressaltar que para trabalhar com requisiç�es AJAX temos que criar um objeto do tipo XMLHTTPRequest, mas esse objeto n�o � padr�o para todos os navegadores, ent�o a funç�o �CriaRequest()� executa uma s�rie de verificaç�es sobre o tipo de navegador e retorna um objeto XMLHTTPRequest. Basicamente Firefox, Opera, Safari e Chrome utilizam o mesmo tipo, mas para o Internet Explorer � utilizado ActiveXObject que muda conforme a vers�o do I.E, ent�o � feita outra verificaç�o para criar um objeto compat�vel com a vers�o do navegador em quest�o. Podem existir navegadores que n�o suportem AJAX ent�o nesse caso ser� emitida uma mensagem avisando o usu�rio desse problema.

Na funç�o �getDados()� � onde ocorre toda a m�gica do AJAX, basicamente essa funç�o trabalha com requisiç�es e respostas, nada muito diferente do conceito do desenvolvimento WEB, a diferença � que nesse caso n�o ser� necess�ria uma nova �carga� na p�gina para carregar as respostas, aquele famoso refresh.

Foram Declaradas tr�s vari�veis: a primeira � �nome� que vai receber o conte�do do componente �txtnome� para pesquisar, a segunda � �result� que recebe o local da p�gina onde queremos que seja carregada a resposta da requisiç�o e a terceira recebe um objeto XMLHTTPRequest que � retornado da funç�o CriaRequest().

Notem que foi atribu�da uma animaç�o (Progresso1.gif) para a vari�vel result, ou seja, essa animaç�o ser� carregada no in�cio da requisiç�o, uma esp�cie de progresso enquanto usu�rio aguarda o retorno da pesquisa.

Uma vez instanciado o objeto XMLHTTPResquest temos que abrir uma requisiç�o chamando o m�todo open(). Esse m�todo requer 3 par�metros:

Primeiro argumento define qual m�todo de envio dever� ser utilizado (GET ou POST).
Segundo argumento especifica a URL do script no servidor.
Terceiro argumento especifica que a requisiç�o dever� ser ass�ncrona.

O m�todo send() envia a requisiç�o para o servidor. A requisiç�o pode retornar dois tipos de resposta, responseText e responseXml. Vamos usar nesse artigo o tipo responseText.

Depois vamos ficar monitorando a propriedade readyState atrav�s do evento onreadystatechange, at� o seu valor ser igual a 4 (requisiç�o finalizada). A segunda condiç�o verifica se o status � igual a 200 (�OK�), se essas duas condiç�es forem atendidas � s� carregar o conte�do da resposta no local previamente definido na vari�vel result (), sen�o carrega a mensagem de erro.

A Figura 2demonstra como funciona uma requisiç�o normal e outra usando AJAX.

Figura 2: Fluxo de trabalho de uma p�gina WEB

O arquivo contato.php

Nesse arquivo vamos conectar ao banco e executar nossa consulta de verdade, at� agora preparamos o ambiente para receber nossa requisiç�o e carregar nossa resposta.

Listagem 4: C�digo php para executar consulta.


<?php
// Verifica se existe a vari�vel txtnome
if (isset($_GET["txtnome"])) {
    $nome = $_GET["txtnome"];
    // Conexao com o banco de dados
    $server = "localhost";
    $user = "root";
    $senha = "011224";
    $base = "agenda";
    $conexao = mysql_connect($server, $user, $senha) or die("Erro na conex�o!");
    mysql_select_db($base);
    // Verifica se a vari�vel est� vazia
    if (empty($nome)) {
        $sql = "SELECT * FROM contato";
    } else {
        $nome .= "%";
        $sql = "SELECT * FROM contato WHERE nome like '$nome'";
    }
    sleep(1);
    $result = mysql_query($sql);
    $cont = mysql_affected_rows($conexao);
    // Verifica se a consulta retornou linhas 
    if ($cont > 0) {
        // Atribui o c�digo HTML para montar uma tabela
        $tabela = "<table border='1'>
                    <thead>
                        <tr>
                            <th>NOME</th>
                            <th>TELEFONE</th>
                            <th>CELULAR</th>
                            <th>EMAIL</th>
                        </tr>
                    </thead>
                    <tbody>
                    <tr>";
        $return = "$tabela";
        // Captura os dados da consulta e inseri na tabela HTML
        while ($linha = mysql_fetch_array($result)) {
            $return.= "<td>" . utf8_encode($linha["NOME"]) . "</td>";
            $return.= "<td>" . utf8_encode($linha["FONE"]) . "</td>";
            $return.= "<td>" . utf8_encode($linha["CELULAR"]) . "</td>";
            $return.= "<td>" . utf8_encode($linha["EMAIL"]) . "</td>";
            $return.= "</tr>";
        }
        echo $return.="</tbody></table>";
    } else {
        // Se a consulta n�o retornar nenhum valor, exibi mensagem para o usu�rio
        echo "N�o foram encontrados registros!";
    }
}
?>

O C�digo est� comentado, mas alguns pontos merecem destaque: logo no in�cio verificamos se existe a vari�vel �txtnome�, caso exista o c�digo php ser� executado, usamos o a funç�o �sleep(1)� para congelar por 1 segundo a execuç�o do c�digo e exibir a nossa animaç�o (Progresso1.gif). A conex�o com o banco e a forma de executar as instruç�es SQL para consulta n�o tem nenhum segredo. Verifica se a vari�vel �$nome� que recebeu o conte�do de �txtnome� est� vazia, caso esteja executamos uma consulta padr�o sem nenhum tipo de filtro, sen�o executamos outra instruç�o SQL mas passando o conte�do de �$nome� como par�metro para pesquisar por nome usando LIKE, assim n�o ser� necess�rio digitar o nome completo do contato, somente as iniciais do primeiro nome, por exemplo.

Outro detalhe bacana nesse c�digo � que retornamos os resultados da consulta dentro de uma tabela HTML. Para isso criamos uma vari�vel �$tabela�, atribuimos o in�cio da tabela e depois, usando um loop, atribu�mos os resultados da consulta. Desse modo as informaç�es j� ser�o carregadas na p�gina como uma tabela HTML.

Caso n�o seja encontrado nenhum registro no banco com o conte�do da vari�vel �$nome� � retornada uma mensagem sem formataç�o nenhuma.

Foram cadastrados alguns contatos previamente no banco, segue na Figura 3 os registros obtidos atrav�s de consulta utilizando MySQL Query Browser.

Figura 3: Todos os contatos gravados no banco

Na Figura 4 temos o resultado da pesquisa no navegador. Para exibir esse resultado n�o foi necess�rio digitar nada no campo, pois codificamos no arquivo contato.php que caso n�o seja passado nenhum valor ser� carregada uma consulta com todos os registros do banco.

Figura 4: Tabela com todos os contatos

Agora vamos pesquisar todos os contatos que começam com a letra �C�:

Figura 5: Contatos que começam com a letra C

Como �ltimo teste, pesquisamos usando a letra �N�. Como j� foi mostrado acima, n�o existem contatos começando com essa letra, ent�o ser� emitida uma mensagem avisando o usu�rio.

Figura 6: Mensagem para o usu�rio

Bom pessoal, foi demonstrado nesse artigo como pode ser simples trabalhar com AJAX e PHP, sendo que a funç�o �CriaRequest()� descrita no arquivo ajax.js � quase que padr�o, pois ali conseguimos prever a maioria das situaç�es que podem ocorrer em quase todos os browsers atualmente usados.

Mas � sempre bom ressaltar que devemos usar AJAX com cautela, onde podemos citar algumas situaç�es. Numa aplicaç�o Ajax transfere-se muito do processamento do servidor para o cliente, essa mudança tem custos porque estaremos a delegar ao cliente a responsabilidade de realizar determinadas operaç�es para as quais n�o estaria inicialmente destinado. Podemos sobrecarregar o cliente caso n�o se tomem as devidas precauç�es durante a fase de desenvolvimento deste tipo de aplicaç�o Web.

Mas no geral sabendo usar o AJAX ele pode trazer muito mais vantagens que desvantagens.

At� o pr�ximo artigo!

Executando consultas ao MySQL com PHP e AJAX

Veja neste artigo como executar consultas rápidas e dinâmicas a bancos de dados MySQL utilizando PHP e AJAX.

O arquivo index.html

O arquivo ajax.js

O arquivo contato.php

Artigos relacionados