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

vsmoraes

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

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

0 0

Denuncie Favoritos Indicar Impressora

Primeira parte: Geração dos dados

Criando a consulta ao banco

Como foi dito, as requisições trabalham com o formato XML, por isso nossa consulta deve responder com XML.

Como fazer?

Seguindo o mesmo exemplo da cidade e estado, vamos criar o seguinte banco:

-- Criando o banco de teste
CREATE DATABASE ajax;

Com as seguintes tabelas:

-- Tabela que guarda os estados
CREATE TABLE estados (
id int(3) NOT NULL auto_increment,
nome varchar(100) NOT NULL default "",
uf varchar(2) NOT NULL default "",
PRIMARY KEY (id)
)

-- Tabela que guarda as cidades
CREATE TABLE cidades (
id int(3) NOT NULL auto_increment,
nome varchar(100) NOT NULL default "",
estado varchar(2) NOT NULL default "",
PRIMARY KEY (id)
)

Com o banco e as tabelas criadas, insira alguns valores para darmos continuidade.

Faremos o uso do PHP para consultar o banco e gerar o arquivo XML.

<?php
  /*
    * Arquivo consulta.php
  */
  // Abre uma conexão com o banco
  $conexao = mysql_connect("localhost", "root", "") OR DIE("Erro na conexão.");
  // Seleciona o banco a ser utilizado
  $banco = mysql_select_db("ajax") OR DIE("Erro ao selecionar o banco.");
  // Realiza a consulta
  $resultado = mysql_query( sprintf("SELECT id, nome FROM cidades WHERE estado=%d", $_REQUEST["estado"]) );
  // Gera o XML com o resultado desta pesquisa
  $XML = sprintf("<?xml version=\"1.0\" encoding=\"ISO-8859-1\"?>\n");
  while ( $record = mysql_fetch_array($resultado, MYSQL_ASSOC) ) {
    $XML .= sprintf("<cidade>\n");
    $XML .= sprintf("<id>%s</id>\n", $record['id']);
    $XML .= sprintf("<nome>%s</nome>\n", $record['nome']);
  }

  // HEADER do arquivo XML
  Header("Content-type: application/xml; charset=iso-8859-1");
  // Mostra os dados
  printf("<cidades>\n%s</cidades>\n", $XML);
?>

Observe que foi usado o método $_REQUEST["estado"] para que o estado possa ser passado tanto por POST quanto por GET, isso vai de cada um.

Em posse da pesquisa, vamos ver como chamar este arquivo via JavaScript.

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

VirtualBox + Apache + PHP + SQL Server

Atheros Wireless + Slackware 12.0

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

Leitura recomendada

Entendendo o que é URI, URL, URN e conhecendo as diferenças entre POST e GET

Gerando gráficos com PHP e highcharts.com

Lista de extensões preferidas para Joomla!

Uma introdução à biblioteca GD

A simples classe Date Operations

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'

0 0

[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.

0 0

[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...

0 0