Requisições assíncronas em PHP usando AJAX - Parte I

Olá pessoal! Neste artigo vou tratar sobre um assunto muito interessante pra quem trabalha com programação Web, o AJAX. Passando por conceitos e exemplos, vou tentar explicar como essa magnífica ferramenta da Web 2.0 funciona.

[ Hits: 39.866 ]

Por: Vinicus S Moraes em 28/08/2008 | Blog: http://vsmoraes.wordpress.com


Introdução



O uso de métodos para incrementar a parte visual e funcional de site é muito usada e não é de hoje. Mensagens popup, caixas de diálogo e DIVs "mágicas" são exemplos de algumas das milhares de possibilidades neste meio.

Estes (e outros) recursos são largamente usados na internet, mesmo que de forma imperceptível, transformando o ato de navegar em uma experiência mais prazerosa e funcional.

O que permite aos desenvolvedores colocar todo seu potencial à prova são ferramentas client-side como o JavaScript e o CSS. Podemos dizer que todo o dinamismo e a beleza de um site faz uso dessas duas tecnologias, excluindo algumas como Flash e o próprio Java.

Mas afinal, o que é AJAX?

AJAX é uma sigla cujo significado é Asynchronous JavaScript+CSS+DOM+XMLHttpRequest ou apenas Asynchronous JavaScript XMLHttpRequest. Tentando gerar um conceito fazendo apenas a utilização do nome, podemos dizer que AJAX é o modo de fazer requisições (HTTP/XML) assíncronas usando JavaScript.

Na prática: quando você clica em um link ou submete (posta) um formulário, uma requisição é enviada ao servidor (HTTP) e uma resposta é esperada pelo navegador, que causa uma atualização (refresh) ao chegar. Vamos supor que você clique ali na opção "Artigos" no menu lateral. O que acontece após o clique? Seu navegador envia uma requisição ao servidor, que retorna o resultado desta e, para o navegador mostrar esse resultado, você nota que a página teve que carregar novamente.

Agora, imagine você preenchendo um formulário que possui duas caixas de combinação. Na primeira você seleciona seu estado e no segundo você tem que selecionar sua cidade. Para isso temos duas tabelas no banco de dados, a primeira guardando os estados e a segunda guardando as cidades (que fazem referência direta aos estados da primeira tabela).

Assim que você seleciona o estado, o site faz uma requisição para que apareça somente as cidades do estado selecionado. Como dito anteriormente, isso causará uma atualização no site inteiro, e é aí que entra o astro deste artigo! Ao invés de enviar uma requisição normal ao servidor, podemos usar o AJAX para enviar uma requisição assíncrona, ou seja, que não faça o site ter aquela atualização que, se não for bem trabalhada, faz você acabar perdendo os outros campos preenchidos do formulário.

Este é um pequeno exemplo das infinitas possibilidades do AJAX. Neste primeiro artigo vou mostrar como fazer esta requisição utilizando somente JavaScript, XML e PHP. Na parte 2 vou mostrar como funcionam duas APIs que facilitam este processo e no último um exemplo totalmente funcional de tudo o que foi abordado. Espero que gostem.

    Próxima página

Páginas do artigo
   1. Introdução
   2. Primeira parte: Geração dos dados
   3. Segunda parte: Requisição JavaScript
   4. Última parte: Formulário completo
Outros artigos deste autor

VirtualBox + Apache + PHP + SQL Server

Google Maps API - Criando e interagindo com seus próprios mapas

Atheros Wireless + Slackware 12.0

Leitura recomendada

Gerando gráficos com PHP e highcharts.com

A simples classe Date Operations

Ninguém planeja fracassar, mas muitos fracassam por não planejar

Lista de extensões preferidas para Joomla!

Instalação do MediaWiki em uma Project web do SourceForge

  
Comentários
[1] Comentário enviado por luiscarlos em 28/08/2008 - 17:55h

Parabens pelo artigo, eu criei uma funcao que faz a ponte entre cliente e servidor de forma que possa usa-la de forma simples e rapida, nao eh a melhor programacao que poderia ter feito, mas ate agora me resolveu os problemas de forma perfeita

Minha contribuição para esta comunidade, é uma função chamada
buscarConteudo(div,funcao,parametro1,parametro2)
que busca a funcao "funcao" passada como primeiro parametro na funcao buscarConteudo e retorna o resultado dentro do elemnto div cuja ID é o primeiro parametro da funcao buscarConteudo, os valores parametro1 e parametro2 sao parametros passados a funcao que sera chamada

----------------------------- arquivo lib.js -----------------------------------------
function openAjax()
{
try
{
xmlhttp= new ActiveXObject("Msxml2.XMLHTTP");
}catch (e)
{
try
{
xmlhttp= new ActiveXObject("Microsoft.XMLHTTP");
}catch (Ex)
{
xmlhttp= false;
}
}
if(!xmlhttp && typeof XMLHttpRequest!='undefined')
{
xmlhttp= new XMLHttpRequest();
}
return xmlhttp;
}

function ReqHeader(tipo){
Meu_Ajax.open(tipo, URL, true);
xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8");
xmlhttp.setRequestHeader("Cache-Control", "no-store, no-cache, must-revalidate");
xmlhttp.setRequestHeader("Cache-Control", "post-check=0, pre-check=0");
xmlhttp.setRequestHeader("Pragma", "no-cache");
}

function Response(tipo){
Meu_Ajax.onreadystatechange=function()
{
if(Meu_Ajax.readyState==4)
{
if(Meu_Ajax.status==200)
{
resp=Meu_Ajax.responseText;
switch(tipo)
{
case "alert":
alert(resp);
break;
default:
getElmt(tipo).innerHTML=resp;
}
}
}
}
}

function buscarConteudo(dv,dst,param1,param2) {
Meu_Ajax=openAjax();
URL="conteudo.php";
ReqHeader('post');
if(dv!='alert' && dv!=null)
getElmt(dv).innerHTML='<b>Aguarde, carregando...<img src="imagens/atualiza.gif" border="0"></b>';
Meu_Ajax.send("acao=" + escape(dst)+"¶m1="+escape(param1)+"¶m2="+escape(param2));
Response(dv);
}
--------------------------------------------------------------------------------------------

----------------- arquivo conteudo.php-------------------------------------------------
call_user_func($_POST["acao"],$_POST);

function funcao_chamada($POST) {
$parametro1 = $POST["parametro1"];
$parametro2 = $POST["parametro2"];

}
--------------------------------------------------------------------------------------------

FORMA DE USO:
quando precisar buscar alguma informação ou enviar vc chama a funcao javascript buscarConteudo e passa 4 parametros e em seguida criar a funcao no arquivo conteudo.php que sera chamada, a ponte entre o cliente e a funcao no arquivo conteudo.php no lado do servidor é feita pela funcao buscarConteudo

1 - o id do elemento html div onde será exibido o resultado vindo do servidor, como por exemplo o div onde sera exibido algum resultado de pesquisa; pode ainda ser 'alert' assim o resultado será exibido num alert javascript;
2 - o nome da funcao dentro do arquivo conteudo.php que sera chamado
3 - parametro a ser passado para a funcao
4 - idem ao item 3

EXEMPLOS DE USO
buscarConteudo('dvFormCadastro','gerarFormCadastro','','');
a funcao acima chama a funcao gerarFormCadastro e exibe o que a funcao escrever dentro do elemento html que tiver o id 'dvFormCadastro'

buscarConteudo('dvPesquisa','pesquisarCliente','alex','');
chama a funcao pesquisarCliente e passa como parametro o valor alex e exibe o resultado no elemento html que possui id 'dvPesquisa'

[2] Comentário enviado por vsmoraes em 28/08/2008 - 18:12h

Muito bom isso que vc fez.
Como disse no artigo, existe uma infinidade de coisas possíveis de fazer com estas ferramentas.
Tem um exemplo disso que eu fiquei maravilhado a primeira vez que vi, o meebo.com .
Muito gente conhece, mas se vc parar pra analisar e ver como realmente funciona todo o sistema empregado ali...

Da pra ter uma idéia do poder dessas ferramentas juntas.

Obrigado pela sua contribuição luiscarlos.

[3] Comentário enviado por brunogarcia69 em 02/09/2008 - 21:20h

Parabéns pelo artigo e sei que tenho muito o que aprender de ajax!
Mas o site que mais me impressiona é o maps.google.com , pois tem muitas técnicas ali desconhecidas por mim...


Contribuir com comentário




Patrocínio

Site hospedado pelo provedor RedeHost.
Linux banner
Linux banner
Linux banner

Destaques

Artigos

Dicas

Tópicos

Top 10 do mês

Scripts