Hoje volto a abordar este tema sobre Ajax, que já vos tinha feito uma pequena introdução sobre o que é afinal o Ajax. Para as pessoas mais distraídas ou para quem não tem uma ideia do que estará por trás de uma página web, esta forma de mostrar conteúdos dinâmicos passa-lhes completamente ao lado.

ajax_php_logo

O Ajax é hoje certamente usado em provavelmente 99% dos sites que visitamos. Dois grandes exemplos de sites que usam esta funcionalidade/tecnologia são o Facebook e a Google, assim como muitas plataformas de gestão de conteúdos tal como o WordPress ou Joomla.

Implementar conteúdo dinâmico com a ajuda do Ajax não é nada complicado, e podem facilmente usar o Ajax no vosso site. Para isso, e para vos mostrar como funciona o Ajax, preparei um exemplo do mais básico que pode haver (a meu ver).

Se ainda não têm um servidor web com PHP e MySQL a funcionar, podem ver como instalar WAMP em Windows ou instalar LAMP em Linux.

Neste exemplo vamos usar HTML, Javascript, XML, PHP e SQL (visto que o Ajax é uma combinação de HTML, XML e Javascript, e neste caso com a ajuda de PHP e SQL). Podem usar o código SQL abaixo para criarem a tabela necessária na vossa base de dados (neste caso usei um servidor MySQL para abase de dados):

Como podem ver, esta é uma tabela bem simples, e o que vamos aqui fazer é seleccionar um utilizador e fazer com que nos seja mostrado o seu país de origem sem sairmos da mesma página.

Vamos precisar de dois ficheiros, o utilizadores.php (que será a nossa página de visualização) e o ficheiro getuserdata.php (que nos vai dar o resultado que queremos).

Podemos começar pelo ficheiro getuserdata.php, quevai fazer o trabalho em background de obter os dados da base de dados. Este é o conteúdo do ficheiro getuserdata.php:

Basicamente o que este ficheiro faz é devolver o país de origem consoante o id do utilizador.

O outro ficheiro que precisamos é o utilizadores.php, que é onde vamos ver a informação ser mostrada dinamicamente e que vamos ver por partes.

Primeiro temos a parte em Javascript e XML que faz o trabalho de invocar o pedido de dados ao ficheiro getuserdata.php consoante o utilizador que escolhermos:

O que este Javascript faz é pegar no id do utilizador escolhido na lista, de seguida pede os dados do utilizador em questão e mostra o país do utilizador no campo HTML txtPais. Este campo txtPais é muito importante, pois é onde termina este exemplo, com a mostragem dos dados dinâmicos.

De seguida temos a parte visual que temos de construír e popular uma dropdownlist (uma lista de dados que é a tag HTML select) com os nomes dos utilizadores e usamos o id dos utilizadores como valor para cada um deles na lista:

O atributo onchange da tag HTML select faz com que seja executada a query à base de dados sempre que seleccionamos um utilizador diferente da lista.

De forma a termos este código a mostrar resultados precisamos de um campo fundamental onde vão aparecer os dados que queremos. Usamos a tag HTML span com o id txtPais, e é dentro desta tag que irá aparecer a informação que queremos.

Feito isto, temos o nosso ficheiro utilizadores.php construido, básico e funcional. Para testarem aqui fica o ficheiro utilizadores.php completo e com uma apresentação arrumada dos dados:

O resultado deste exemplo será algo deste género (sempre sem qualquer refresh da página):

exemplo_ajax

O Ajax é mesmo uma excelente solução quando queremos apenas mostrar dados actualizados dinamicamente sem termos de estar constantemente a recarregar a página toda.

Espero que este pequeno exemplo vos ajude na vossa programação 😉

Tiago Ramalho

Tiago Ramalho é um profissional de Informática interessado em Internet, Programação .NET e PHP e blogging. Nos tempos livres escreve nos interessespessoais.com sobre Jardim, Saúde, Sistemas, utilitários e outros temas relacionados com informática.

More Posts - Website - Twitter - Pinterest - Google Plus