Linux slogan
Visite também: Segurança Linux · BR-Linux.org · Dicas-L · Doode · NoticiasLinux · SoftwareLivre.org · UnderLinux



» Screenshot
» Login
Login:
Senha:

Se você ainda não possui uma conta, clique aqui.

Esqueci minha senha



Artigo

Requisições assíncronas em PHP usando AJAX - Parte I
Linux user
vsmoraes
28/08/2008
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.
Por: Vinicus S Moraes | Blog: http://vsmoraes.wordpress.com
[ Hits: 23296 ]
Conceito: 10.0   3 voto(s)3 voto(s)3 voto(s)3 voto(s)3 voto(s) + quero dar nota ao artigo

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

Outros artigos deste autor

Leitura recomendada

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)+"&param1="+escape(param1)+"&param2="+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


  
Para executar esta ação você precisa estar logado no site, caso contrário, tudo o que for digitado será perdido.
Responsável pelo site: Fábio Berbert de Paula - Conteúdo distribuído sob licença GNU FDL
Site hospedado por:

Viva o Linux

A maior comunidade Linux da América Latina! Artigos, dicas, tutoriais, fórum, scripts e muito mais. Ideal para quem busca auto-ajuda em Linux.