Engatinhando com AJAX e PHP. Parte 2

Tags: ,
Postado em AJAX, Desenvolvimento WEB, PHP, Tutoriais, XHTML por Felipe Tonello on the January 20th, 2007


Ajude a Combater o Spam! Clique aqui!

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.

  1. function criaXMLHttp() {
  2.  if (typeof XMLHttpRequest != "undefined")
  3.     return new XMLHttpRequest();
  4.  else if (window.ActiveXObject){
  5.     var versoes = ["MSXML2.XMLHttp.5.0",
  6.     "MSXML2.XMLHttp.4.0", "MSXML2.XMLHttp.3.0",
  7.     "MSXML2.XMLHttp", "Microsoft.XMLHttp"
  8.     ];
  9.  }
  10.  for (var i = 0; i < versoes.length; i++){
  11.     try{
  12.         return new ActiveXObject(versoes[i]);
  13.     }catch (e) {}
  14.  }
  15.  throw new Error("Seu browser nao suporta AJAX");
  16. }

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:

  1. var XMLHttp = criaXMLHttp();
  2. 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:

  1. var XMLHttp = criaXMLHttp();
  2. XMLHttp.open("get", "info.txt", true);
  3. XMLHttp.onreadystatechange = function () {
  4.  if (XMLHttp.readyState == 4)
  5.     alert("EEE primeiro teste com AJAX!! :)");
  6. };
  7. 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:

  1. if (XMLHttp.status == 200)
  2.     alert("O retorno foi: " + XMLHttp.responseText);
  3. else
  4.     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.

  1.  
  2. <div id="resultado"></div>
  3.  
  4. <div id="lerid">
  5. Id: <input name="id" id="id" type="text" />
  6. <input value="OKA!!" onclick="lerId()" type="button" />
  7. </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:

  1. function lerId() {
  2.     var id = document.getElementById("id").value;
  3.     var divInfo = document.getElementById("resultado");
  4.     var XMLHttp = criaXMLHttp();
  5.     XMLHttp.open("get", "lerId.php?id=" + id, true);
  6.     XMLHttp.onreadystatechange = function () {
  7.         if (XMLHttp.readyState == 4)
  8.             if (XMLHttp.status == 200){
  9.                 divInfo.innerHTML = XMLHttp.responseText;
  10.             } else {
  11.                 divInfo.innerHTML = "Um erro ocorreu" + XMLHttp.statusText;
  12.             }
  13.     };
  14.     XMLHttp.send(null);
  15. }

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:

  1. <?php
  2. // mudamos o tipo de arquivo.. ao invez de php irá retornar um texto normal
  3. header("Content-Type: text/plain");
  4. // recebe o id que veio pelo parametro usando o método GET
  5. $id = $_GET["id"];
  6. $resultado = "";
  7. // isso agora é um exemplo, você tem que aplicar a conexão e a consulta sql à sua necessidade
  8. $BDUsuario = "seu usuario ou root";
  9. $BDSenha = "senha do usuario";
  10. $BDServidor = "localhost normalmente ou o servidor de banco de dados";
  11. $BancoDeDados = "nome do seu banco de dados";
  12. mysql_connect($BDServidor, $BDUsuario, $BDSenha);
  13. mysql_select_db($BancoDeDados);
  14. $sql = mysql_query("SELECT * FROM tabela WHERE id = " . $id);
  15. if ($resultado = $mysql_fetch_array($sql))
  16.     $resultado = "ID Encontrado
  17.     \n
  18.     Nome: " . $resultado[‘nome’];
  19. echo $resultado;
  20. ?>

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

33 Comentários para 'Engatinhando com AJAX e PHP. Parte 2'

Assine os comentários RSS ou TrackBack para 'Engatinhando com AJAX e PHP. Parte 2'.

  1. Walter Cruz disse,

    em January 21st, 2007 às 12:18 pm

    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

  2. Raphael disse,

    em January 22nd, 2007 às 9:44 am

    Olá, muito bom o post.

    Parabens pelo blog, suas postagens são excelentes de de uma didatica muito boa. Precisando estamos ai =)

    Abraços

  3. Luis FIlipe disse,

    em January 22nd, 2007 às 12:36 pm

    otimo artigo!!! e bem bonito o seu blog!

    o link para o atigo parte 1 ta quebrado.

    Flw abraço

  4. gobbueno disse,

    em January 22nd, 2007 às 2:08 pm

    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.

  5. Felipe Tonello disse,

    em January 22nd, 2007 às 2:41 pm

    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

  6. Caio disse,

    em January 25th, 2007 às 1:08 am

    Legal o tema novo e bem melhor que o antigo.

  7. Bruno disse,

    em January 25th, 2007 às 8:30 pm

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

  8. Victor de Souza Couto disse,

    em January 28th, 2007 às 1:23 pm

    ótimo post
    bom tutorial
    eu estou começando e esse foi um bom exemplo pra estudar!!!

    abraços

  9. Túlio Vargas disse,

    em January 29th, 2007 às 9:46 pm

    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

  10. Espanka disse,

    em February 13th, 2007 às 11:24 am

    Usando Internet Explorer Internet Explorer 6.0 no Windows Windows XP

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

  11. Felipe Tonello disse,

    em February 14th, 2007 às 11:24 am

    Usando Mozilla Firefox Mozilla Firefox 2.0.0.1 no Windows Windows XP

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

  12. Dieme Defante disse,

    em February 15th, 2007 às 10:15 am

    Usando Mozilla Firefox Mozilla Firefox 2.0 no Windows Windows XP

    Muito bom esse artigo, acompanhei o primeiro que voce fez e achei bastante interessante e fácil de compreender.
    Valeu.

  13. Dieme Defante disse,

    em February 22nd, 2007 às 12:10 pm

    Usando Mozilla Firefox Mozilla Firefox 2.0 no Windows Windows XP

    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.

  14. Felipe Tonello disse,

    em February 22nd, 2007 às 5:08 pm

    Usando Mozilla Firefox Mozilla Firefox 2.0.0.1 no Windows Windows XP

    hehehe boa observação.. thanks =]

  15. Luxther Defaul disse,

    em March 5th, 2007 às 12:20 pm

    Usando Mozilla Firefox Mozilla Firefox 2.0.0.2 no Ubuntu Linux Ubuntu Linux

    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.

  16. Felipe Tonello disse,

    em March 5th, 2007 às 1:46 pm

    Usando Mozilla Firefox Mozilla Firefox 2.0.0.2 no Windows Windows XP

    Olá Luxther,

    Muito obrigado pela dica! Sempre que poder contribua! :)

    Abraços,
    Felipe Tonello

  17. Leonardo Frangelli disse,

    em March 12th, 2007 às 3:59 pm

    Usando Mozilla Firefox Mozilla Firefox 2.0.0.2 no Windows Windows XP

    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.

  18. Adonai Cruz disse,

    em March 16th, 2007 às 2:05 pm

    Usando Mozilla Firefox Mozilla Firefox 2.0.0.2 no Windows Windows XP

    muito bom o seu tutorial, estava procurando por algo do tipo pela net mas o seu foi o melhor

  19. Isaac disse,

    em June 16th, 2007 às 6:04 pm

    Usando Mozilla Firefox Mozilla Firefox 1.5.0.12 no Windows Windows XP

    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

  20. Márcio disse,

    em June 27th, 2007 às 5:59 pm

    Usando Internet Explorer Internet Explorer 6.0 no Windows Windows XP

    Olá..gostaria de lhe parabenizar pelo tutorial.

    E também gostaria de deixar uma sugestão:
    no arquivo lerid.php:

    em:

  21. Filipe Ricardo disse,

    em July 13th, 2007 às 9:27 pm

    Usando Internet Explorer Internet Explorer 6.0 no Windows Windows XP

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

  22. joaquim disse,

    em September 11th, 2007 às 3:38 pm

    Usando Internet Explorer Internet Explorer 6.0 no Windows Windows XP

    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

  23. Johann disse,

    em October 1st, 2007 às 5:53 pm

    Usando Mozilla Firefox Mozilla Firefox 2.0.0.4 no Windows Windows XP

    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!

  24. Blue_Acid.PT disse,

    em November 19th, 2007 às 1:32 pm

    Usando Mozilla Firefox Mozilla Firefox 2.0.0.8 no Ubuntu Linux Ubuntu Linux

    Parabens, gostei muito.

    Continuação de bons trabalhos.

  25. Sérgio disse,

    em December 3rd, 2007 às 7:03 am

    Usando Internet Explorer Internet Explorer 6.0 no Windows Windows XP

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

  26. tommy disse,

    em December 4th, 2007 às 1:17 pm

    Usando Internet Explorer Internet Explorer 6.0 no Windows Windows XP

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

  27. tommy disse,

    em December 4th, 2007 às 1:20 pm

    Usando Internet Explorer Internet Explorer 6.0 no Windows Windows XP

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

  28. Felipe Tonello disse,

    em December 4th, 2007 às 1:57 pm

    Usando Flock Flock 1.0.1 no Linux Linux

    Obrigado pelo comentário..
    Realmente estava bugado.. mas arrumei!!

    :)

  29. jimi disse,

    em December 26th, 2007 às 11:49 pm

    Usando Internet Explorer Internet Explorer 7.0 no Windows Windows Vista

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

  30. Naldo Vieira disse,

    em February 9th, 2008 às 1:52 pm

    Usando Internet Explorer Internet Explorer 6.0 no Windows Windows XP

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

  31. Márcioo disse,

    em February 26th, 2008 às 4:44 pm

    Usando Internet Explorer Internet Explorer 7.0 no Windows Windows XP

    Muito o tutorial, parabéns! Muito o tutorial, parabéns!

    abraços.

  32. Sergio disse,

    em April 18th, 2008 às 7:30 am

    Usando Internet Explorer Internet Explorer 7.0 no Windows Windows XP

    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.

  33. Vilmar disse,

    em May 12th, 2008 às 10:52 am

    Usando Internet Explorer Internet Explorer 7.0 no Windows Windows XP

    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.

Comente!