LOGIN:

iMasters | Por uma internet mais criativa e dinâmica

Feeds

Segunda-feira, 20/03/2006 - 11:57 - Por Júlio César Martini
Seções relacionadas:

Ajax e PHP - Carregando dados sem refresh

Olá pessoal! Essa semana vamos estudar um exemplo prático utilizando PHP e Ajax. Mas o que seria esse tal de AJAX que tanto se fala nos dias de hoje? Ajax é a sigla para "Asynchronous Javascript and XML". A idéia é utilizar Javascript para transformar suas páginas em aplicações, de modo que não precise recarregar a tela cada vez que o usuário clicar em alguma coisa.

Como exemplo, criarei um script com dois comboBox onde, no primeiro, o usuário selecionará o estado desejado e o segundo apresentará (sem refresh) as cidades correspondentes ao item selecionado acima.

Vamos lá:

Hoje em dia existem muitos frameworks que nos auxiliam a construir aplicações utilizando PHP e Ajax, mas nesse artigo vou ensinar a construir um exemplo na "unha", sem a utilização desses frameworks para que vocês possam ter uma noção de como é feito todo o processamento.

Versões utilizadas

PHP 4.4.2
MySQL 4.1

1. Criando o databse e as tabelas de estados e cidades no MySQL

CREATE DATABASE imasters;

CREATE TABLE estados (
ID_ESTADO int(3) NOT NULL auto_increment
, DSC_ESTADO varchar(100) NOT NULL default ""
, SIGL_ESTADO varchar(2) NOT NULL default ""
, PRIMARY KEY (ID_ESTADO)
) TYPE=MyISAM;


CREATE TABLE cidades (
ID_CIDADE int(3) NOT NULL auto_increment
, DSC_CIDADE varchar(100) NOT NULL default ""
, COD_ESTADO varchar(2) NOT NULL default ""
, PRIMARY KEY (ID_CIDADE)
) TYPE=MyISAM;

2. Populando as tabelas


INSERT INTO estados VALUES(1, "São Paulo", "SP");
INSERT INTO estados VALUES(2, "Rio de Janeiro", "RJ");
INSERT INTO estados VALUES(3, "Minas Gerais", "MG");

INSERT INTO cidades VALUES(1, "Araras", 1);
INSERT INTO cidades VALUES(2, "Leme", 1);
INSERT INTO cidades VALUES(3, "São Carlos", 1);


INSERT INTO cidades VALUES(4, "Rio de Janeiro", 2);
INSERT INTO cidades VALUES(5, "Nova Iguaçu", 2);
INSERT INTO cidades VALUES(6, "Nova Frigurbo", 2);
INSERT INTO cidades VALUES(7, "Resende", 2);
INSERT INTO cidades VALUES(8, "Angra dos Reis", 2);


INSERT INTO cidades VALUES(9, "Belo Horizonte", 3);
INSERT INTO cidades VALUES(10, "Bom Sucesso", 3);
INSERT INTO cidades VALUES(11, "Ipatinga", 3);
INSERT INTO cidades VALUES(12, "Monte Belo", 3);
INSERT INTO cidades VALUES(13, "Ouro Preto", 3);

3. Criando o arquivo de conexão com o MySQL - conecta.php


//CONECTA AO MYSQL
$conn = mysql_connect("127.0.0.1", "root", "linux4u")
   or die("Erro na conexão com a base de dados");

//SELECIONA A BASE DE DADOS
$db = mysql_select_db("imasters", $conn)
   or die("Erro na seleção da base de dados");

?>

Screenshot

Depurando o código:

Linha 12 - Conecta com o MySQL passando como parâmetros o servidor, usuário e senha.

Linha 16 - Seleciona o database a ser utilizado, nesse caso IMASTERS.

4. Página index.php

Essa página exibirá o formulário que conterá os combobox estados e cidades além da chamada ao AJAX.


//CONECTA AO MYSQL
require_once("conecta.php");

//PEGA OS ESTADOS
$sql = "
     SELECT a.id_estado, a.dsc_estado, a.sigl_estado
     FROM estados a
     ORDER BY a.dsc_estado";

//EXECUTA A QUERY
$sql = mysql_query($sql);

$row = mysql_num_rows($sql); ?>



127º artigo PHP




127º artigo: AJAX + PHP


Carregando cidades sem dar refresh na página.





  Estado: 
  

  


  Cidade: 
  


5. Página cidades.php

Montará um arquivo XML utilizando o estado selecionado pelo usuário. Essa página será chamada pelo index.php utilizando Ajax.


//CONECTA AO MYSQL
require_once("conecta.php");

//RECEBE PARÂMETRO
$pEstado = $_POST["estado"];

//QUERY
$sql = "
  SELECT a.id_cidade, a.dsc_cidade
  FROM cidades a
  WHERE a.cod_estado = ".$pEstado."
  ORDER BY a.dsc_cidade";

//EXECUTA A QUERY
$sql = mysql_query($sql);

$row = mysql_num_rows($sql);

//VERIFICA SE VOLTOU ALGO
if($row) {
  //XML
  $xml = "\n";
  $xml .= "\n";

  //PERCORRE ARRAY  
  for($i=0; $i<$row; $i++) {
    $codigo = mysql_result($sql, $i, "id_cidade");
    $descricao = mysql_result($sql, $i, "dsc_cidade");
    $xml .= "\n";
    $xml .= "".$codigo."\n";
    $xml .= "".$descricao."\n";
    $xml .= "
\n";
  }//FECHA FOR

  $xml.= "
\n";

  //CABEÇALHO
  Header("Content-type: application/xml; charset=iso-8859-1");
}//FECHA IF (row)

//PRINTA O RESULTADO
echo $xml;

?>

Resultado:

Ufa!!! É grande o código. Mas agora vamos destrichar para facilitar o entendimento.

Linha 12 - Incluimos o arquivo conecta.php - responsável pela conexão com o MySQL.

Linha 15 - Montamos a query que será responsável por trazer os estados cadastrados na tabela.

Linha 21 - Executamos a query.

Linha 23 - Total de linhas retornadas pela consulta.

Linha 27 - A função Dados é responsável por tudo, mas no pedaço acima é verificado se o browser suporta Ajax. Verificamos se existe o objeto XMLHttpRequest que nos permite que as requisições sejam feitas via browser de modo assíncrono com o servidor através de JavaScript sem que haja a necessidade da atualização da página. No IE o objeto é um ACTIVEX e no Mozzila e Safari é um objeto nativo.

Linha 53 - Chamamos o método OPEN, passando como parâmetros o método desejado (POST ou GET), a url a ser requisitada e um flag indicando se a chamada é assíncrona ou não.

Linha 54 - Cabeçalho para corrigir os problemas de acento.

Linha 58 - É verificado o valor da variável readyState que pode ter cinco valores: 0 (não iniciado), 1(carregando), 2(carregado), 3(interativo) e 4(concluído).

Linha 63 - Verifica se foi retornado um arquivo XML, caso tenha chama a função ProcessXML();

Linha 73 - Passamos a função o estado selecionado pelo usuário.

Linha 82 - Verificamos a quantidade de elementos contidos na tag CIDADE.

Linha 85 - Percorremos o arquivo XML.

Linha 89 - Pegamos o valor do campo descrição no arquivo XML e atribuímos a variável descrição em JavaScript.

Linha 91 - Mudamos o texto do option.

Linha 94 - Criamos dinamicamente um option pra cada elemento encontrado no XML.

Resultado final

1. Tela Inicial

2. Selecionando um estado

3. Visualizando as cidades

PS: Testado e aprovado no IE 6.0 e no Firefox 1.5

Para baixar os exemplos desse artigo, clique no link abaixo:

DOWNLOAD

Clique AQUI e faça o download do script.

Semana que vem tem mais. Espero que vocês tenham gostado!

Não deixe de nos enviar críticas ou sugestões para o próximo assunto, afinal a coluna é de vocês.

Boa semana a todos!

Até mais

Todos os artigos de Júlio César Martini

33 comentários publicados

  • 1.

    Segunda-feira, 20/03/2006, por Vitor Oliveira

    Excelente materia, Parabens!

    Responder comentário
  • 2. Amigo, e para fazer com mais níveis

    Segunda-feira, 20/03/2006, por Valdemar Winkler

    Meu Amigo, parabéns! estava mesmo na lida para desenvolver algo do gênero, (caiu do céu). Como seria para fazer com mais níveis, por exemplo: estado, cidade, bairro, rua; ou teria outra solução?

    Obrigado pela gentileza

    Abraço

    Responder comentário
  • 3. Mínimo PHP

    Terça-feira, 21/03/2006, por Felipe Dornellas

    Cara, não consegui fazer esse código funcionar, ele não está buscando as cidades. Qual a versão mínima de PHP para funcionar o AJAX? Quando seleciono o estado nada acontece, já fiz o teste no FireFox e no IE.

    Responder comentário
  • 4. Boa

    Terça-feira, 21/03/2006, por Diego Felipe Hellas Moreira Alves

    Ta bacana, mas para quem quiser pegar um programa completo, completo no sentido de ter uma base de dados com todos os estados e com todas as cidades separadas por estados..

    http://www.phpbrasil.com/scripts/script.php/id/2840

    Responder comentário
  • 5. Mais Níveis

    Quarta-feira, 22/03/2006, por Othon Rangel

    Como o Valdemar Winkler já falou, achei muito boa esta funcionalidade, porém não vejo como alterar o código para mais níveis. Esta funcionalidade só funciona para 2 níveis ? como faria para ter mais de 1 nível ?
    Desde já agradeço...

    Responder comentário
  • 6. Muito bom, fiz em ASP

    Sexta-feira, 24/03/2006, por Alexandre Rodrigues

    Eu nao programo em PHP, mas tudo tão bem explicado que eu pude migrar facilmente para ASP 3.0.
    Pello menos pra começar, tá mutio bom mesmo! Valeu!

    Responder comentário
  • 7. Mais material sobre AJAX

    Sexta-feira, 31/03/2006, por Helton Eduardo Ritter

    Júlio, seu artigo está ótimo, e qem quiser masi exeplos, visite a página:
    http://www.dhtmlgoodies.com/index.html?page=ajax

    Esse site tem uma biblioteca de recurços avançados se tratando de internet..

    Abraço..

    Responder comentário
  • 8. Carredando dados sem refresh

    Sexta-feira, 31/03/2006, por Claudemir

    Como Poderia fazer para que pudesse fazer isto para 4 níveis?
    Há gostei muito do seu tutorial!!!Estou estudando como usálo em outras aplicações.....mais preciso entender melhor a técnica....

    Responder comentário
  • 9. gabcarol

    Terça-feira, 11/04/2006, por Carlos Rocha

    Ola

    Tentei fazer pelo teu exemplo que me ajuda a preencher os campos com ajax mas nao consegui
    O problema é que ele nao da suporte a mais de uma pesquisa.
    Por exemplo:

    Quando eu escolho entre dois radio buttons Compra ou aluguel, isso ira definir qual tabela mysql sera usada para a consulta.
    Dai como Fazer?

    Se puder me responda por e-mail

    carcleo@bol.com.br


    Responder comentário
  • 10. Erro

    Terça-feira, 11/04/2006, por Vagner Esteves

    Será que pode ajudar? Quando carrego a página "cidades.php" está aparecendo o seguinte erro:
    Warning: mysql_num_rows(): supplied argument is not a valid MySQL result resource in C:\Webmaster\Catalogo\cidades.php on line 17
    Essa linha refere-se a $row=mysql_num_rows($sql);
    Estou usando o MySQL 4.0.21, vc disse que usou a versão 4.1 seria isso a causa do erro? Se for como altero essa linha?
    Abs.

    Responder comentário
  • 11. Ótima materia

    Domingo, 23/04/2006, por John Wanzer Paiani

    Com estes fontes eu dei algumas incrementadas para as minhas necessidades e ficou muito bom mesmo. Me ajudou a entender como funciona o Ajax aonde até então não havia entendido. Você esta de parabéns.

    Responder comentário
  • 12. ótimo, farei com CFML

    Domingo, 23/04/2006, por Rafael Capucho

    Matéria Maravilhosa realmente, existem poucos artigos hoje em dia sobre Ajax...

    Vou fazer a mesma aplicação em CFML, vamos ver como fica, abraços!

    Responder comentário
  • 13. Erro

    Quinta-feira, 27/04/2006, por João Victor de Araújo Coelho

    Estou usando o php5 e mysql 5 e deu esse erro
    quando acessei cidades.php
    Warning: mysql_num_rows(): supplied argument is not a valid MySQL result resource in /var/www/imasters/cidades.php on line 23

    Responder comentário
  • 14. Parabéns

    Sexta-feira, 28/04/2006, por Flávio Roberto Amaral

    Muito bom!

    Responder comentário
  • 15. Sugestão

    Segunda-feira, 15/05/2006, por Alexsandro Rosa de Mello

    Alguns comandos não são de conhecimento popular, e difícil de encontrar sua real função, se possível, poderia criar uma tabela sempre ao final da matéria com a descrição destes. Ficaria mais fácil a compreensão do código, mas, o trabalho de todos sem excessão dos integrantes do imasters, está excelente, nunca ví uma home page melhor que essa! Valeu por tudo!

    Responder comentário
  • 16. Duvidas

    Quarta-feira, 17/05/2006, por Philipe P.C

    olá, tudo na paz?
    bom, eu gostaria de saber, se tem como alterar apenas uma tabela, por exemplo, tenho uma pagina de noticias e quero que busque de um arquivo txt e quando esse arquivo for alterado a tabela tambem seja alterada, tem como fazer isso??
    Obrigado

    Responder comentário
  • 17. Nota 10

    Segunda-feira, 29/05/2006, por ROBERTO LAZARO

    Parabéns meu carro sem enrolação e ainda forneceu os códigos para download!

    Responder comentário
  • 18. Radion button

    Sábado, 17/06/2006, por bruno rodrigues

    Cara valeu a matéria é d . Mas por um modo alternativo, por um radion button tem jeito de carregar a combobox. Tipo, a partir de uma radion button selecinado eu carregar uma tabela "x" no Bd ??

    Responder comentário
  • 19. Parabéns!!!

    Quinta-feira, 06/07/2006, por Devarlei Antunes

    Excelente !! Obrigado por partilhar conosco o seu conhecimento !

    Responder comentário
  • 20. ajuda com ajax

    Terça-feira, 01/08/2006, por CLEBIO RODRIGUES

    O tal do Ajax é genial. Como poderia com ajax digitar dados em um textarea, gravar no banco e mostrar na mesma pagina em outro textarea o que foi gravado no banco.

    Responder comentário
  • 21. Duvida Cruel

    Domingo, 20/08/2006, por Jessé Lobato

    Gostaria de realizar essas consultas so que ao inves de duas... gostaria que fosse para 5, por exemplo: Continente, Pais, Estado, Cidade, Bairro... Como faço ?

    Responder comentário
  • 22. Dúvida com os pedidos SQL

    Segunda-feira, 28/08/2006, por Alessandro Marcelino Santos

    Qual o motivo de utilizar esses "a's" nos pedidos SQL? Exemplos:
    SELECT a.id_estado
    FROM estados a

    Responder comentário
  • 23. valeu pela dica

    Quinta-feira, 01/02/2007, por charles junqueira

    valeu Júlio com seu excelente artigo adaptei para usar com Smarty

    Responder comentário
  • 24. Excelente matéria

    Quarta-feira, 07/02/2007, por Lucas Leonardo Garcia Mendonça

    gostaria de sabe se há como fazer a mesma coisa só que para 4 níveis?Obrigado!

    Responder comentário
  • 25. Muito interessante...

    Domingo, 04/03/2007, por otavio nogueira

    Interessante a explicação, so para deixar aqui tb para adicionar a materia, temos o www.ajaxbox.com.br um framework que ajuda bastante no trabalho do dia a dia com ajax ;)

    Responder comentário
  • 26. Ajax com PHP / MYSQL

    Terça-feira, 13/03/2007, por João Vianei Carozzi

    Essa matéria, muito boa por sinal, em localhost funciona muito bem com a linha 53, mas se envio pra pro site nada funciona. a linha 53 fica assim:ajax.open('POST', '/htdocs/home/jvc/www/cidades.php', true); Vejam: www.jvc.eti.br/mat.php - Se alguém puder ajudar, agradeço muito. No site tem Fale comigo. Obrigado.

    Responder comentário
  • 27. Mudança de base!

    Segunda-feira, 26/03/2007, por Ricardo Lorenzo

    Excelente matéria, mas tentei mudar de MySQL para Oracle, no lugar de 2 combobox eu pus 2 textfields.
    No primeiro é digitado um código e no segundo, a descrição do código aparece após um click em um botão.
    A descrição vem de um select feito em uma tabela Oracle.
    Se você puder ajudar, seria de grande valia para mim.
    Muito obrigado pela atenção.

    Responder comentário
  • 28. Acentos

    Segunda-feira, 18/06/2007, por robertson matos

    Estou com problemas com acentos quando vou passar uma estado que contém acentos ele não mostra os resultados... só mostra os que não possuem acentos!

    Responder comentário
  • 29. Dúvida...

    Terça-feira, 03/07/2007, por Fernando Kenji Kamei

    Caro, tentei fazer isso usando o oracle e não deu certo....

    na parte var dataArray = obj.getElementsByTagName("cidade");

    eu coloquei um alert(dataArray) para ver o que retorna.. e nao retorna nada!!! será q é esse o problema?
    Abraço.
    japa_al@yahoo.com.br

    Responder comentário
  • 30. POST

    Quinta-feira, 23/08/2007, por Alysson Rafael

    ólá. sou novo na comunidade e no desenvolvimento com ajax. Consegui fazer funcionar este exemplo porém só no modo GET, no POST não. Alguém poderia me dizer se funcionou na boa?
    Obrigado

    Responder comentário
  • 31. Erro ao chamar o método ajax.open

    Terça-feira, 09/10/2007, por Fabio Deodoro

    tenho um form com 3 list_box list_a, list_b e list_c. list_c é populada em função das outras duas com AJAX. ao executar ajax.open("POST", "list_c.php", true); os valores das list_box não são repassadas para as variáveis criadas na página list_c.php:
    list_a = $_POST["list_a];
    list_b = $_POST["list_b];

    Onde posso estar errando ou há uma outra forma de passar esses valores?

    Se puder me ajudar te agradeço!

    Responder comentário
  • 32. Ajuda

    Sábado, 11/04/2009, por Igor Oliveira

    Oi tudo bem voce pode me add no msn
    MSN: igor_the_dark@hotmail.com

    "presico muito da sua ajuda"

    E o seguinte voce podia por tambem exemplo e escolha de avatares pre-definidos ou seja escolher um avatar do site ai exemplo:
    Naruto-("AE PÕE O AVATAR DO NARUTO")ENTENDEU?
    e aonde que põe esses codigos?

    Responder comentário
  • 33. ERRO ao fazer download

    Quarta-feira, 17/06/2009, por Cloves Machado

    estou com problema em baixar o arquivo. O arquivo está corrompido? Alguém conseguiu?
    Obrigado

    Responder comentário

Poste um comentário


Os textos publicados neste espaço são de responsabilidade única de seus autores (colunistas e leitores) e podem não expressar necessariamente a opinião do iMasters.

Sobre o autor

Júlio César Martini atualmente presta serviços de WebMaster/Programador para o UOL (http://www.uol.com.br), Graduado em Tecnólogo em Informática pela UNIFIAN - Faculdades Anhanguera e Pós-Graduado em Desenvolvimento de Software para Web pela UFSCAR. Foi o primeiro profissional a chegar à marca de 100 artigos publicados no iMasters e trabalha com PHP desde 2000. Site: http://www.juliocesarmartini.com


Indique para um amigo

captcha

TI SHOP Produtos iMasters

  • Lançamento: CD-ROM Treinamento Aplicado de SQL - Lançamento! Treinamento Aplicado de SQL - Aprenda a trabalhar com SQL com bancos de dados Oracle e SQL Server. São mais de 100 tópicos explicados por Mauro Pichilliani, um articulistas mais lidos do iMasters. Aproveite! Apenas R$ 69,90 no TI SHOP.
  • Lançamento: Livro iMasters "O Encontro de 2 Mundos"- Este livro conta com 56 crônicas de profissionais mais admirados e influentes do mercado brasileiro de Internet. Aproveite o preço especial para leitores do iMasters. Apenas R$ 40,00 e envio imediato!
  • DVD Curso Completo de Photoshop - Do conceito à finalização Lançamento! Curso Completo de Photoshop, em DVD, com mais de 230 aulas dividas em 4 módulos: conceito, básico, avançado e finalização. Apenas R$ 69,50 no TI SHOP - Frete com 50% de desconto
  • DVD Javascript Starter - Curso Completo Com mais de 9 horas de vídeo-aulas, é um curso completo sobre Javascript. Ideal para quem deseja aprender a linguagem. Apenas R$ 64,90 no TI SHOP - Frete com 50% de desconto!

2001 - iMasters FFPA Informática Ltda - Todos os direitos reservados.