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; |
2. Populando as tabelas
|
3. Criando o arquivo de conexão com o MySQL - conecta.php
//SELECIONA
A 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.
//PEGA OS ESTADOS //EXECUTA
A QUERY $row = mysql_num_rows($sql); ?>
|
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.
//RECEBE
PARÂMETRO //QUERY
//EXECUTA
A QUERY //VERIFICA
SE VOLTOU ALGO //PRINTA
O RESULTADO |
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

Excelente materia, Parabens!
Responder comentário
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

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

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

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!

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

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

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

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.

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
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!

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

Muito bom!
Responder comentário
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
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

Parabéns meu carro sem enrolação e ainda forneceu os códigos para download!
Responder comentário
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
Excelente !! Obrigado por partilhar conosco o seu conhecimento !
Responder comentário
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
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
Qual o motivo de utilizar esses "a's" nos pedidos SQL? Exemplos:
SELECT a.id_estado
FROM estados a

valeu Júlio com seu excelente artigo adaptei para usar com Smarty
Responder comentário
gostaria de sabe se há como fazer a mesma coisa só que para 4 níveis?Obrigado!
Responder comentário
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
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
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.

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

ó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

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!

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?

estou com problema em baixar o arquivo. O arquivo está corrompido? Alguém conseguiu?
Obrigado
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.
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
2001 - iMasters FFPA Informática Ltda - Todos os direitos reservados.