Nesse tutorial vamos fazer nosso primeiro exemplo de AJAX + PHP.
Vamos usar primeiramente o XMLHttp GET Request.
Quem não viu ainda, a parte 1 do tutorial você encontra aqui mesmo.
[update 03/10/07]
Parte 1 do tutorial AJAX + PHP
Parte 3 do tutorial AJAX + PHP
[/update]
Bora lá!!
Criando o Objeto XMLHttp
Vamos mexer um pouco no JavaScript para criar a requisição.
function criaXMLHttp() { if (typeof XMLHttpRequest != "undefined") return new XMLHttpRequest(); else if (window.ActiveXObject){ var versoes = ["MSXML2.XMLHttp.5.0", "MSXML2.XMLHttp.4.0", "MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp", "Microsoft.XMLHttp" ]; } for (var i = 0; i < versoes.length; i++){ try{ return new ActiveXObject(versoes[i]); }catch (e) {} } throw new Error("Seu browser nao suporta AJAX"); }
Primeiro ela testa se o browser suporta o XMLHttpRequest e cria se o suportar.. se não ele cria um array com várias versões do XMLHttp para browsers mais antigos(IE). E fica em um loop até conseguir criar um objeto, se não criar nenhum ele retorna a mensagem de erro.
Resumindo: a função testa as possibilidades do browser de criar o objeto XMLHttp. Se for o IE 6.0 ele cria o MSXML2.XMLHttp.5.0 e assim por diante.
Usando o XMLHttp
O objeto XMLHttp tem um método que a mais imporante, a open(). Ela tem 3 parâmetros que precisamos saber:
- Tipo da requisição: sintrg que indique o tipo: get ou post
- URL: string com a url que você quer fazer a requisição
- Async: boolean que indica se o modo da requisição seja feito assincronamente(não sei escrever essa palavra
)
O ultimo parâmetro é o mais importante.. ele que vai dizer se a sua requisição é AJAX mesmo ou não. Se ele for true, a requisição é feita em tempo real. Já se você colocar false, a requisição é feita e o resto da página só é loadada quando a requisição retornar algo ou terminar.
Exemplo:
var XMLHttp = criaXMLHttp(); XMLHttp.open("get", "info.txt", true);
Outro evento importante no XMLHttp é o onreadystatechange. O XMLHttp tem uma propriedade chamada readyState que muda conforme a requisição é recebida. Existem 5 estados para o readyState:
- 0(Não Iniciado): O Objeto foi criado mas o método open() não foi chamado ainda.
- 1(Carregando): O método open() foi chamado mas a requisição não foi enviada ainda.
- 2(Carregado): A requisição foi enviada.
- 3(Incompleto): Uma parte da resposta do servidor foi recebida.
- 4(Completo): Todos as informações foram recebidas e a conexão foi fechada com sucesso.
Toda vez que a propriedade do readyState for mudada, o evento onreadystatechange é disparado. Por causa das diferentes implementações dos browsers, a propriedade do readyState não funciona corretamente em todos os browsers. O unico modo para cross-browser é usando o valor 0, 1 e 4 para o readyState. Mas na maioria dos casos você usará apenas o estado 4 mesmo.
Depois de tudo isso temos que realmente enviar a requisição com o método send(). Quando utilizamos a requisição por GET nós não precisamos passar nenhum parâmetro no send(). Depois quando vermos com POST aí iremos usar mais profundamente. 
Exemplo:
var XMLHttp = criaXMLHttp(); XMLHttp.open("get", "info.txt", true); XMLHttp.onreadystatechange = function () { if (XMLHttp.readyState == 4) alert("EEE primeiro teste com AJAX!! :)"); }; XMLHttp.send();
Tá bom, mas e agora? Enviei tudo, recebi e pronto. Cadê minha informação?
Ta certo, agora é bem simples, existe uma propriedade no XMLHttp que ele tem o retorno do http request, o responseText(no nosso caso, poderia ser responseXML). Lembram da primeira parte do tutorial? Então, agora vamos usar ela.
Primeiro vamos testar se a informação retornada veio com sucesso (200). Para testarmos o status do retorno existe a propriedade status do XMLHttp. Tudo muito simples não? Então olha o exemplo:
if (XMLHttp.status == 200) alert("O retorno foi: " + XMLHttp.responseText); else alert("O retorno foi: " + XMLHttp.statusText);
Beleza. Até aí vimos exemplo bem bobos, apenas para intendermos como funciona as coisas.
Agora sim vamos ver como fica uma aplicação com AJAX e PHP.
Já temos a função que retorna o Objeto XMLHttp, então vamos fazer a partir dela.
Agora vamos para o código HTML.
Criamos duas divs. Uma vai exibir o resultado e outra vai ser o campo onde você coloca o id para fazer a pesquisa.
<div id="resultado"></div> <div id="lerid"> Id: <input name="id" id="id" type="text" /> <input value="OKA!!" onclick="lerId()" type="button" /> </div>
Agora, na função lerId() temos que pegar o valor do campo id e enviar ele na requisição usando GET e depois disso, recebemos o valor e exibimos na div resultado.
Fica assim:
function lerId() { var id = document.getElementById("id").value; var divInfo = document.getElementById("resultado"); var XMLHttp = criaXMLHttp(); XMLHttp.open("get", "lerId.php?id=" + id, true); XMLHttp.onreadystatechange = function () { if (XMLHttp.readyState == 4) if (XMLHttp.status == 200){ divInfo.innerHTML = XMLHttp.responseText; } else { divInfo.innerHTML = "Um erro ocorreu" + XMLHttp.statusText; } }; XMLHttp.send(null); }
Como já vimos como funciona a requisição XMLHttp não vamos ter muita dificuldade de entender essa. A unica diferença com o exemplo é que nós passamos um parâmetro para a página pegaId.php e exibir o resultado no div resultado.
Agora vamos criar a página pegaId.php que irá ler o id enviado pela requisição Http e retornar o status.
lerId.php:
<?php // mudamos o tipo de arquivo.. ao invez de php irá retornar um texto normal header("Content-Type: text/plain"); // recebe o id que veio pelo parametro usando o método GET $id = $_GET["id"]; $resultado = ""; // isso agora é um exemplo, você tem que aplicar a conexão e a consulta sql à sua necessidade $BDUsuario = "seu usuario ou root"; $BDSenha = "senha do usuario"; $BDServidor = "localhost normalmente ou o servidor de banco de dados"; $BancoDeDados = "nome do seu banco de dados"; mysql_connect($BDServidor, $BDUsuario, $BDSenha); mysql_select_db($BancoDeDados); $sql = mysql_query("SELECT * FROM tabela WHERE id = " . $id); if ($resultado = $mysql_fetch_array($sql)) $resultado = "ID Encontrado \n Nome: " . $resultado['nome']; echo $resultado; ?>
Agora o seu primeiro programa com AJAX está escrito.. bem simples não?
Ele só recebe o id que veio por GET, procura no banco de dados, e exibe o nome da pessoa referente ao id(exemplo apenas)..
A unica coisa que pode ficar meio no ar é a questão do header e do echo no final. O header serve para fazer com que o retorno do arquivo fique em formato texto e não em outro tipo(como html, php). Pois nós usamos o XMLHttp.responseText. Se você colocar alguma tag html, na pagina principal, onde o script é rodado, irá funcionar o html, pois a página é html. Agora se você rodar o lerId.php ele irá exibir como se fosse um texto normal.
O echo serve apenas para exibir o resultado. Todo o resultado que você quer que seja exibido no cliente você tem que exibir em seu script php, pois o XMLHttp.responseText pega justamente o que a página php(server-side) exibe, no caso um texto.
Terminamos por hoje nossa aula de AJAX com PHP parte 2.
Na proxima aula vamos ver como funciona a requisição pelo método POST.
Dúvidas podem comentar.
Abraços
Oi. sem querer ser chato, mas tem um monte de requesição onde deveria ser requisição.
De resto, o tutorial é massa. Achei interessante a verificação de versões do xhmlhttp no começo.
[]’s
Olá, muito bom o post.
Parabens pelo blog, suas postagens são excelentes de de uma didatica muito boa. Precisando estamos ai =)
Abraços
otimo artigo!!! e bem bonito o seu blog!
o link para o atigo parte 1 ta quebrado.
Flw abraço
Aeee! Destaque da wordpress.com, heim?
Parabéns carinha. Mandou muito bem.
Já assinava seus feeds antes, mas aposto que você conseguiu aumentar bastante a taxa de visitantes, não?
Ah! E gostei do tema do blog. É o novo, né?
Grande abraço e parabéns pelo artigo.
Valeu galera!!!
Luis Filipe o link aqui está funcionando normal..
gobbueno destaque? onde vc viu isso??
Sobre as feeds.. elas aumentaram sim.. na feed normal do wordpress… a fo feedburner continua na mesma hehhee mas é isso ae..
Esse tema é novo sim…
Abraços
Legal o tema novo e bem melhor que o antigo.
OI, Felipe, mto massa esse tutorial, tipo que to a uns 3 dias querendo aprender ajax, e ja li um tanto de tutorial pela net, mas não consegui colocar nenhum exemplo pra funcionar, hehehe, entendo a logica do negocio, mas so fica dando uns erros ai, to me sentindo um pouco idiota, mas to correndo atraz!! então vai la.
da pra vc me mandar o fonte desse exemplo ai??
Deixa eu te perguntar mais uma coisinha, tipo que tenho na minha maquina rodando, apache+php+mysql, inclusive to montando um site, mas quero deixa-lo mais bacana e ajax pode ser a saida, mas voltando a pergunta, preciso de mais alguma coisa pra rodar essas aplicações?
Um abraço, e novamente, o tutorial ta massa!!!
ótimo post
bom tutorial
eu estou começando e esse foi um bom exemplo pra estudar!!!
abraços
Olá Felipe,
tudo bem !!
e ae.. tá show o blog hein!!
ha tava vendo suas fotinhas no flickr. auhahuuha
Ae.. depois aparece lá no msn pra gente trocar umas ideias..
um abraço
[]´s
Ola, gostaria de saber quando vc vai postar a parte 3 desse tutorial e qual foi e vantagem de exibir o nome do usuario vindo do banco de dados em AJAX e nao fazer isso no php SOZINHO mesmo?
Muito obrigado!!!
Sobre a 3a parte do tutorial, eu ainda não comecei a faze-la. Mas final de semana pretendo começar e jájá postar ela..
Então, a vantagem dessa aplicação ajax é você fazer consulta em um banco de dados sem precisar atualizar a página.. e já retornar para o usuário rapidamente alí na mesma página..
é lógico que eu usei um exemplo bem básico, mas a ideia é vocês entenderem como faz e aplicarem às suas necessidades..
Muito bom esse artigo, acompanhei o primeiro que voce fez e achei bastante interessante e fácil de compreender.
Valeu.
acho que em vez de :
XMLHttp.open(“get”, “pegaId.php?id=” + id, true);
deveria ser:
XMLHttp.open(“get”, “lerId.php?id=” + id, true);
se não, não funciona.
hehehe boa observação.. thanks =]
Olá Felipe!
Cara, navegando pela internet localizei o seu blog pelo google e achei super demais!!! Com isso gostaria de ajudar em alguma parte contribuindo com um link aonde as pessoas poderão ver o que se pode fazer com Ajax. [Link]=> http://www.miniajax.com/
Na verdade um local que aponta para outros sites relacionado ao script selecionado. Muito bom, vale apena conferir.
Obrigado e sucessos!
Luxther Defaul.
Olá Luxther,
Muito obrigado pela dica! Sempre que poder contribua!
Abraços,
Felipe Tonello
Muito bom o tuto cara, continue assim e nao de bola pra torcida que sempre tenta achar um defeito.
Perfeito eh disso que nos que estamos comecando no ajax precisamos, exemplos simples que funcionem de forma perfeita.
Vlw e espero ler mais um bocado aqui.
muito bom o seu tutorial, estava procurando por algo do tipo pela net mas o seu foi o melhor
Olá Felipe,
Não poderia deixar de agradecer pela grande ajuda em postar um tutorial tão simples, objetivo e muito claro. Apos ler varios materiais somente hoje após ler esse tutorial tive a certeza que esse bicho papão não existe. Um grande abraço e continue assim, ajudando a todos com seu conhecimento….Alias voce ainda vai postar o parte que irá falar do metodo POST?
valeu
Olá..gostaria de lhe parabenizar pelo tutorial.
E também gostaria de deixar uma sugestão:
no arquivo lerid.php:
em:
primeiramente queria lhe parabenizar…
muito bom seu tutorial, eu to começando com ajax, naum sei nada… mais to com vontade de aprender…
comigo funcionou certinho… ja foi um grande avanço…
vlw, espero pelos próximos
Olá felipe,
Cara gostei muito do seu exempolo rodo filé aqui nao tive nem um impace pra colocalo pra rodar. agora queria o lance de envio dos inputs por post vc vai publicar ainda ou nao ira publicar. se existir uma possibilidade de mandar pro meu email pelo menos a unica pare que preciso alterar iria agradecer muito
Parabéns pelo artigo ! Muito bom mesmo. Eu sabia como fazer o lado cliente mas não sabia como era o lado servidor em PHP.
Só uma dica: coloca o link para o 3o. artigo neste tutorial.
Abraço!
Parabens, gostei muito.
Continuação de bons trabalhos.
Muito bom o blog e o artigo. Valeu!!
Quanto aos erros de português, não se preocupe, nem com os comentários bestas que algumas pessoas fazem.
É como na história do professor que mostrou um lençol branco com uma pequena mancha preta para seus alunos, e pediu que falassem o que estavam vendo. Todos disseram que viam uma mancha preta. Depois o professor mostrou a todos que só tinham olhos “viciados” para verem as coisas erradas, porque nenhum deles, ao que parece, conseguiu enxergar o lençól, que era o mais importante. Como no seu artigo.
Mandou bem!!
Criamos duas divs. Uma vai exibir o resultado e outra vai ser o campo onde você coloca o id para fazer a pesquisa.
Id:
Onde estão as divs???
Na mensagem anterior o codigo HTML não apareceu, vamos tentar novamente.
Criamos duas divs. Uma vai exibir o resultado e outra vai ser o campo onde você coloca o id para fazer a pesquisa.
\ \
\
Id:
\
\
Onde estão as divs???
Obrigado pelo comentário..
Realmente estava bugado.. mas arrumei!!
Felipe, o “for” na função CriaXMLHttp não deveria ficar dentro do else if ?
pq vc está criando a variável “versoes” dentro do else if, quando sair deste bloco não é possivel acessar a variável…. pelo menos eu acho….
Muito bom!
De tanto procurar no google, esse foi o que mais me deu uma idéia de ajax já q eu n tinha noção de como implementar isso no meu site.
Está de parabéns mesmo!!
Muito o tutorial, parabéns! Muito o tutorial, parabéns!
abraços.
Muito bom, Felipe.
Finalmente consegui compreender como funciona o Ajax com o PHP.
Parabéns!
Me restou uma dúvida: como faço para informar, no php, que não quero que as informações já consultadas fiquem em cache?
Outra coisa: na definição da função em javascript, a function lerId, na linha 5, está informando o script php lerId.php, e acredito que o correto é pegaid.php.
Muito bom .
Estou começando e estou tendo dificuldades de nome de arquivos, portanto gostaria que vc me enviasse os fontes por e-mail caso seja possivel.
Olá, tem como me enviar as fontes por e-mail tb estou tendo dificuldades :/
na segunda parte do seu tutorial vc nao explica direito os arquivos js que serao gerados. quem tem pouco conhecimento fica perdio facilmente.
Olá,
Você sabe de algum método de carregar o AJAX antes de carregar a página PHP sem necessidade de chamar por qualquer um evento o ajax. Como o onLoad por exemplo.
Vlw
Muito bom, para quem esta iniciando é um ótimo tutorial (Y)
Meus parabéns