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

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

VirtualBox + Apache + PHP + SQL Server

Atheros Wireless + Slackware 12.0

Leitura recomendada

Solução open source para clínicas médicas

Desenvolvendo um componente de calendário dinâmico em PHP

Gráficos em PHP Highcharts

JOOMLA no openSUSE em 10 passos

Lista de extensões preferidas para Joomla!

  
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

Destaques

Artigos

Dicas

Tópicos

Top 10 do mês

Scripts