Fala pessoal, como o artigo de AJAX vem sendo muito acessado, resolvi fazer outro. Nesse artigo nós iremos aprender como fazer consultas no banco de dados sem a necessidade de refresh na página. Irei utilizar como exemplo, um simples “sistema de noticias”, onde cadastraremos noticias no banco de dados e através de um formulário faremos a busca de uma determinada noticia e exibiremos seu conteudo. Vamos lá!

Veja o resultado final, clicando aqui. (Procure por “Lorem Ipsum“, pois é o exemplo que está cadastrado)

1. Banco de dados

Antes de mais nada vamos criar nossa tabela no banco de dados, com três campos: id, titulo e conteudo. E depois inserir dois registros para utilizarmos como exemplo.

2. A página

Agora nossa página principal onde será feito a busca e a exibição dos dados:

Antes de mais nada, incluimos o arquivo das funções, funcs.js, essas serão responsáveis pela requisição AJAX. Depois criamos um campo de busca onde a cada letra que você digitar ele irá fazer um requisição no banco de dados procurando uma noticia com o titulo igual ao digitado, tudo isso através da função buscarNoticias() – colocamos como parâmetro o valor do campo, ou seja, this.value. E ainda criamos duas divs, onde será exibido os titulos das noticias (resultado) e o outro onde será exibido o conteúdo da mesma (conteudo).

3. A função buscarNoticias()

Iremos criar essa função dentro do nosso arquivo funcs.js:

Não vou entrar muito em detalhes. Aqui enviamos o valor para um arquivo PHP chamado busca.php, e nele iremos verificar se o valor existe no nosso banco de dados. De qualquer maneira, há resposta retornada pelo nosso busca.php será colocada na div resultado.

4. O arquivo busca.php

Antes de mais nada, vamos criar um arquivo para fazer a conexão com o banco de dados, iremos chamá-lo de conn.php, preencha-o com as informações de seu servidor:

Pronto, agora que já temos nosso arquivo para realizar a conexão com o banco de dados, vamos criar o nosso arquivo de busca – busca.php:

Aqui nosso arquivo PHP, irá retornar as noticias encontradas e cada noticia terá um link chamando mais uma função, dessa vez será a função exibirConteudo() – que recebe como parâmetro o ID da noticia. Então assim que o usuário clicar na noticia encontrada (onclick), a função exibirConteudo() será chamada para exibir o conteudo da noticia desejada.

5. A função exibirConteudo()

Dentro do nosso mesmo arquivo funcs.js, iremos adicionar essa função:

Essa função funciona da mesma maneira que a buscarNoticias(), porém ela irá enviar o ID ao arquivo exibir.php e a resposta será colocada na div conteudo.

6. O arquivo exibir.php

Bom agora iremos criar o arquivo PHP para selecionar o conteúdo do banco de dados da noticia especificada.

Esse arquivo simplesmente irá recuperar a ID enviada através do método GET pelo nosso javascript, irá procurar no banco de dados o registro com essa ID e retorna-lo para que seje colocado na div conteudo.

7. Finalizando

Mais uma vez, nós podemos concluir que com o AJAX é possível muito mais interatividade em nossos sistemas. Esse foi só um pequeno exemplo mais poderiamos utiliza-lo, tanto para consulta quanto para exclusão ou alteração no banco de dados. Espero que você tenha conseguido entender ao menos um pouco de como funciona as requisições com AJAX.

Em minha opnião o artigo Validação de campos sem refresh com AJAX ficou mais detalhado em relação aos códigos, caso você não tenha entendido muito bem, de uma olhada nele.

Download dos arquivos

Até a próxima!
Abraços