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: 42.750 ]

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


Segunda parte: Requisição JavaScript



A requisição

A requisição feita é pelo JavaScript usando um objeto milagroso, o XMLHttpRequest(), é ele que faz tal requisição, como?

Simples:

// Função que recupera os dados da pesquisafunction catchDados(valor) {
function catchDados(valor) {
  // Instancia o objeto
  ajax = new XMLHttpRequest();
  // Recupera o combo-box ESTADOS
  estados = document.getElementById('estados');
  // Recupera o combo-box CIDADES
  cidades = document.getElementById('cidades');
  if (ajax) {
    // Limpa o combo-box CIDADES
    cidades.options.length = 1;

    // Faz a requisição
    ajax.open("POST", "consulta.php", true);
    ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

    // Vamos processar os estados da requisição
    ajax.onreadystatechange = function() {
      // Carregando...
      if (ajax.readyState == 1) {
        cidades.innerHTML = "Carregando...";  
      }
      // Ao receber a resposta
      if (ajax.readyState == 4 ) {
        if (ajax.responseXML) {
          montaCombo(ajax.responseXML);
        } else {
          cidades.innerHTML = "Selecione o estado.";
        }
      }
    }
    // Envia os parâmetros
    var params = "estado="+valor;
    ajax.send(params);
}

A função descrita acima faz a requisição e trata seus status (carregando e carregado) e, quando recebido o resultado, passa para a função 'montaCombo' (descrita a seguir) que insere os dados do arquivo XML no combo.

function montaCombo(XML){
  // Array com os dados das cidades
  var CIDADES = XML.getElementsByTagName("cidade");
  // Recupera o combo-box CIDADES
  cidades = document.getElementById('cidades');

  // Verifica se a consulta retornou alguma coisa
  if (CIDADES.length > 0) {
    // Lemos todo o arquivo XML
    for(var i = 0 ; i < XML.length ; i++) {
      item = XML[i];
      ID = item.getElementsByTagName("id")[0].firstChild.nodeValue;
      NOME = item.getElementsByTagName("nome")[0].firstChild.nodeValue;

      cidades.innerHTML = "Escolha...";
      // Aqui e DOM, assunto para um outro artigo
      // Cria os dados dentro do combo
      opt = document.createElement("option");
      opt.value = id;
      opt.text  = nome;
      cidades.options.add(opt);
    }
  } else {
    // caso o XML retorne em branco
    cidades.innerHTML = "Escolha o estado.";
  }
}

Espero que não esteja muito confuso, pois a base é um tanto trabalhosa mesmo. Como se pode notar, há uma parte de foi usado a expressão DOM. DOM é uma técnica para manipular objetos HTML em tempo real, assunto para um próximo artigo. O que é feito ali usando DOM é criar os 'options' do combo-box com as opções retornadas pelo XML.

Próximo passo, nosso fomulário HTML.

Página anterior     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

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

Atheros Wireless + Slackware 12.0

VirtualBox + Apache + PHP + SQL Server

Leitura recomendada

Debian com Apache, PHP4, PHP5 e MySQL

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

Uma introdução à biblioteca GD

PHP Orientado a Objetos

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

  
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

Destaques

Artigos

Dicas

Tópicos

Top 10 do mês

Scripts