Javascript + Ajax + PHP
Feeds
Newsletter
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; |
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
Interação
33 comentários
Valdemar Winkler
20/03/2006 23h15
Amigo, e para fazer com mais níveis
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
Felipe Dornellas
21/03/2006 09h36
Mínimo PHP
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.
Diego Felipe Hellas Moreira Alves
21/03/2006 20h02
Boa
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
Othon Rangel
22/03/2006 11h37
Mais Níveis
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...
Alexandre Rodrigues
24/03/2006 10h18
Muito bom, fiz em ASP
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!
Helton Eduardo Ritter
31/03/2006 08h03
Mais material sobre AJAX
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..
Claudemir
31/03/2006 11h17
Carredando dados sem refresh
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....
Carlos Rocha
11/04/2006 11h36
gabcarol
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
Vagner Esteves
11/04/2006 19h26
Erro
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.
John Wanzer Paiani
23/04/2006 21h44
Ótima materia
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.
Rafael Capucho
23/04/2006 23h13
ótimo, farei com CFML
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!
João Victor de Araújo Coelho
27/04/2006 11h46
Erro
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
Alexsandro Rosa de Mello
15/05/2006 08h44
Sugestão
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!
Philipe P.C
17/05/2006 11h56
Duvidas
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
ROBERTO LAZARO
29/05/2006 14h55
Nota 10
Parabéns meu carro sem enrolação e ainda forneceu os códigos para download!
bruno rodrigues
17/06/2006 22h56
Radion button
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 ??
Devarlei Antunes
06/07/2006 18h12
Parabéns!!!
Excelente !! Obrigado por partilhar conosco o seu conhecimento !
CLEBIO RODRIGUES
01/08/2006 13h09
ajuda com ajax
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.
Jessé Lobato
20/08/2006 11h16
Duvida Cruel
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 ?
Alessandro Marcelino Santos
28/08/2006 16h08
Dúvida com os pedidos SQL
Qual o motivo de utilizar esses "a's" nos pedidos SQL? Exemplos:
SELECT a.id_estado
FROM estados a
charles junqueira
01/02/2007 18h18
valeu pela dica
valeu Júlio com seu excelente artigo adaptei para usar com Smarty
Lucas Leonardo Garcia Mendonça
07/02/2007 15h38
Excelente matéria
gostaria de sabe se há como fazer a mesma coisa só que para 4 níveis?Obrigado!
otavio nogueira
04/03/2007 14h40
Muito interessante...
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 ;)
João Vianei Carozzi
13/03/2007 23h30
Ajax com PHP / MYSQL
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.
Ricardo Lorenzo
26/03/2007 17h34
Mudança de base!
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.
robertson matos
18/06/2007 08h51
Acentos
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!
Fernando Kenji Kamei
03/07/2007 14h15
Dúvida...
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
Alysson Rafael
23/08/2007 12h35
POST
ó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
Fabio Deodoro
09/10/2007 17h26
Erro ao chamar o método ajax.open
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!
Igor Oliveira
11/04/2009 21h36
Ajuda
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?
Cloves Machado
17/06/2009 00h28
ERRO ao fazer download
estou com problema em baixar o arquivo. O arquivo está corrompido? Alguém conseguiu?
Obrigado
iMasters
- Sobre o iMasters
- Política de privacidade
- Anuncie
- Feeds iMasters
- Fóruns iMasters
- Fale conosco
2001 - iMasters FFPA Informática Ltda - Todos os direitos reservados.