Engatinhando com AJAX e PHP. Parte 3

Tags: ,
Postado em AJAX, PHP, Tutoriais por Felipe Tonello on the October 1st, 2007


Ajude a Combater o Spam! Clique aqui!

Depois de um bom tempo estou aqui novamente!

Eu recomendo todos que não viram as partes um e dois do tutorial, que as veja.
Engatinhando com AJAX e PHP. Parte 1
Engatinhando com AJAX e PHP. Parte 2

Nessa 3ª parte, vamos ver como usar Requisição POST.

Vamos para o que interessa!

Criando nosso formulário

Vamos criar um formulário normal.
index.htm

  1. <script src="../Ajax.js" type="text/javascript"></script>
  2. <script src="postAjax.js" type="text/javascript"></script>
  3. <form action="postAjax.php" onsubmit="enviaReq(); return false">
  4.  
  5. Entre com suas informações
  6.  
  7. Seu nome:
  8. <input name="nome" type="text" />
  9.     Sua Cidade:
  10. <input name="cidade" type="text" />
  11. <input value="OKA!" type="submit" />
  12. </form>

Aqui estamos linkando nossa biblioteca para criar nosso objeto XMLHttp. Caso você não esteja entendendo essa parte, recomendo você ler os dois primeiros artigos.

A unica coisa que é novidade, é o onSubmit alí. Quer dizer que quando o formulário for submetido, vai ser rodado uma função javascript ao invez de enviar diretamente o formulário. Depois é dado um return false para ter certeza que a página não dê refresh.

Requisição POST

A requisição post precisa ser enviada no formato, pelo cabeçalho http:
nome1=valor1&nome2=valor2&...&nomeN=valorN

para isso vamos criar a função que gere esse formato para nós.
Vamos chama-la de criaReqStr()

  1. function criaReqStr(oForm){
  2.     var aPostStr = new Array();
  3.  
  4.     for(var i = 0; i < oForm.elements.length; i++){
  5.         var sValor = encodeURIComponent(oForm.elements[i].name);
  6.         sValor += "=";
  7.         sValor += encodeURIComponent(oForm.elements[i].value);
  8.         aPostStr.push(sValor);
  9.     }
  10.     return aPostStr.join("&");
  11. }

Essa função está assumindo que lhe será informada o objeto do formulário, como argumento. Um array(aPostStr) é criado para guardar cada par de nome-valor. Depois, conforme o numero de elementos do formulário, é concatenado o par nome-valor à variável aPostStr. No final do loop, é retornado a informação dos pares nome-valor corretamente.

Você pode se perguntar: Porque usar esse join() no final sendo que eu posso concatenar tudo direto?
Realmente, seria o mais lógico. Mas cada concatenação, em web-browsers, é muito pesada para o processo, então quanto menos você concatenar melhor.

Fazendo a requisição

Para isso, vamos criar a função enviaReq(), que é bem parecida com a função para a requisição GET.

  1. function enviaReq(){
  2.     var oForm = document.forms[0];
  3.     var sBody = criaReqStr(oForm);
  4.  
  5.     var oXMLHttp = criaXMLHttp();
  6.     oXMLHttp.open("post", oForm.action, true);
  7.     oXMLHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  8.  
  9.     oXMLHttp.onreadystatechange = function (){
  10.         if(oXMLHttp.readyState == 4)
  11.             exibeResult(oXMLHttp.responseText);
  12.         else
  13.             exibeResult("Ocorreu um erro: " + oXMLHttp.statusText);
  14.     };
  15.     oXMLHttp.send(sBody);
  16. }

Primeiramente ela seta a referencia do form numa variável(oForm). Depois recebe a string dos pares nome-valor pela função criaReqStr(), lembram?
Em seguida é instanciado o objeto xmlhttp pela função criaXMLHttp().
Depois que está o “tchan” do negócio, no método open() o primeiro parâmetro é “post”, qual requisição queremos fazer. O segundo parâmetro é a página que iremos enviar a requisição, que no caso é o atributo action do formulário. O terceiro parâmetro é true em caso de querer que a requisição seja assíncrona.
Depois é setado um cabeçalho de que a informação está codificada(urlencode). Importante, porque a maioria das linguagens server-side verifica essa codificação para o parsing da informação

Depois é só exibir o resultado no nosso div#divStatus pela função exibeResult():

  1. function exibeResult(sTxt){
  2.     var divStatus = document.getElementById("divStatus");
  3.     divStatus.innerHTML = sTxt;
  4. }

Simples não?

Agora vamos para a parte mais fácil: O server-side.

Criando nosso arquivo PHP

Ele é super simples, muito igual ao no caso da requisição feita pelo método GET.
postAjax.php

  1. <?php
  2. header(‘Content-Type: text/plain’);
  3.  
  4. $sNome = $_POST[‘nome’];
  5. $sCidade = $_POST[‘cidade’];
  6.  
  7. $sStatus = ”;
  8.  
  9. /* Exemplo com Banco de Dados MySQL */
  10. mysql_connect(’seu.servidor’, ‘usuario’, ’senha’);
  11. mysql_select_db(‘tabela.do.bd’);
  12.  
  13. if (mysql_query("INSERT INTO tabela VALUES (’$sNome’, ‘$sCidade’)"))
  14.     $sStatus = ‘Informação inserida corretamente do banco de dados.’;
  15. else
  16.     $sStatus = ‘Erro ao inserir informações no banco de dados’;
  17.  
  18. echo $sStatus;
  19. ?>

Você percebeu que mudamos o cabeçalho do arquivo para texto normal, usando a função header(). Depois só recebemos as variáveis pelo array global $_POST[].
Inserimos no banco de dados, e em caso de sucesso exibe a mensagem de sucesso. Em caso de erro(banco de dados com problema), exibe a mensagem de erro.

Baixando o tutorial

Para maior proveito do tutorial, baixe o tutorial agora:
post-ajax-php.zip
post-ajax-php.tar.gz

Nessa parte 3 fui bem mais direto ao ponto, agora que todo mundo já sabe o básico de AJAX com PHP né? hehehe

Mas é isso aí. Nas próximas versões do tutorial, vamos ver como fazer um validador de formulário conversando com banco de dados.

21 Comentários para 'Engatinhando com AJAX e PHP. Parte 3'

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

  1. Felipe via Rec6 disse,

    em October 1st, 2007 às 3:53 am

    Usando Unknown browser

    Engatinhando com AJAX e PHP. Parte 3…

    Voltando com a saga de tutoriais de AJAX com PHP. Agora na parte 3 é criado uma requisição por POST. Muito fácil de entender e implementar….

  2. links for 2007-10-02 disse,

    em October 2nd, 2007 às 10:25 am

    Usando WordPress WordPress 2.2.2

    [...] Engatinhando com AJAX e PHP. Parte 3 (tags: php css javascript) [...]

  3. Ricardo Felipe Klein disse,

    em October 4th, 2007 às 11:09 am

    Usando Mozilla Firefox Mozilla Firefox 2.0.0.6 no Linux Linux

    Muito bom…….

    que tal isso utilizando JSON??
    ou, onde o JSON entraria nessa história toda?

  4. Felipe Tonello disse,

    em October 4th, 2007 às 2:14 pm

    Usando Mozilla Firefox Mozilla Firefox 2.0.0.6 no Linux Linux

    Boa ideia Ricardo,

    No próximo artigo sobre AJAX vou abordar o JSON =)

    Abraços

  5. Ricardo Felipe Klein disse,

    em October 5th, 2007 às 11:49 am

    Usando Mozilla Firefox Mozilla Firefox 2.0.0.6 no Linux Linux

    opa, mal posso esperar pra ver isso………
    se não for pedir demais (hehe)
    fala algo sobre o Zend_JSON……

    vou dar uma olhada em como fazer uploads de arquivos (vou precisar disso pra um projeto) com o ZF e vou criar um posto sobre isso no meu Blog, dai precisamos de mais gente pra criar mais artigos…….
    e aumentar a comunidade…

    o que você acha, depois podemos postar isso tudo que escrevermos lá no VoL e postar também links disso no br-linux, pra dar mais visão do ZF pra toda a comunidade PHP

  6. tommy disse,

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

    Usando Internet Explorer Internet Explorer 6.0 no Windows Windows XP

    Para quem quiaser continuar os estudos de ajax, sugiro a leitura de:
    Fundamentos de AJAX do Ryan Asleson e Nathaniel T. Shutta;
    AJAX Guia Prático do Walace Soares.
    Os dois livros são muito bons, tudo explicado em exemplos…..
    até mais

  7. Diogo disse,

    em December 7th, 2007 às 5:22 am

    Usando Mozilla Firefox Mozilla Firefox 2.0.0.11 no Windows Windows XP

    Cara, você fez todo este exemplo mas não mostrou como que o BD deve ser implementado.

    Poderias ter facilitado mais em deixar um código pra criar o BD de acordo com o exemplo, não lhe custaria nada.

    Brasileiro tem mania de fazer as coisas pela metade mesmo…

    Poderias ter aproveitado mais o seu esforço… Muito ruim!

  8. Jimi disse,

    em December 26th, 2007 às 5:13 pm

    Usando Internet Explorer Internet Explorer 7.0 no Windows Windows XP

    Diogo, se você não sabe criar uma tabela, fazer um insert e fazer uma busca com php… oque você quer com ajax? pega um tutorial de php + banco de dados e vá estudar…

    Felipe o artigo está show de bola. galera quer tudo na boquinha…

  9. Jonathas Pacífico disse,

    em December 27th, 2007 às 9:50 am

    Usando Internet Explorer Internet Explorer 6.0 no Windows Windows XP

    Diogo, porque ao invés de criticar você não monta o seu próprio tutorial melhor do que este?
    Criticar é facil, fazer melhor nem sempre é tão simples assim.

    Parabens pelo tutorial, é simples e sem enrolação. Já dá pra ter uma base.

    Agurado os próximos.

    http://www.criaweb.info

  10. Julio Cezar disse,

    em February 16th, 2008 às 7:52 am

    Usando Internet Explorer Internet Explorer 7.0 no Windows Windows XP

    Muito bom o tutorial, trabalho com PHP a bastante tempo, mas não conheço nada de AJAX e até agora em termos de tutorial básico o seu foi o melhor para entender o funcionamento da coisa.

    Vlw.

  11. Sergio disse,

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

    Usando Internet Explorer Internet Explorer 7.0 no Windows Windows XP

    O tutorial está excelente.
    Como seu próprio título sugere, é bem básico, para facilitar a compreensão.
    Depois que cada um fizer seus testes seguindo o exemplo dado aqui, e começar a modificá-lo para outras experiências, vai começar a entender melhor o processo e poderá buscar aprofundamento, já conseguindo entender o que estão dizendo.
    Muito bom mesmo.

  12. Marcio disse,

    em May 7th, 2008 às 9:10 pm

    Usando Internet Explorer Internet Explorer 6.0 no Windows Windows XP

    Muito bom cara… um dos melhores tutoriais de XMLHttpRequest que já vi até agora. Explica da forma correta e dá realmente para você aprender. Espero que continue escrevendo mais tutoriais.

  13. Joaz Soares disse,

    em June 14th, 2008 às 2:00 pm

    Usando Internet Explorer Internet Explorer 7.0 no Windows Windows XP

    Muito Bom tutorial, simples e objetivo, continue assim e não de importancia a certas pessoas que só sabem criticar, e que nunca teriam iniciativa e boa vontade de fazer um tutorial como vocé,

    Parabens.

  14. RAFAEL TONELLO disse,

    em July 9th, 2008 às 12:03 pm

    Usando Mozilla Firefox Mozilla Firefox 3.0 no Windows Windows XP

    E ai cara….seguinte..tava eu na net procurarndo um tutorial que me ensinasse ajax e econtrei um tal de Felipe Tonello..que por conhecidencia tem o mesmo sobrenome q eu…ja mostrei a descoberta pra familia intera….hehe..cara..se tu pudesse entrar em contato comigo eu t agradeceria…eu concerteza entraria em contrato, mas não consegui achar teu email

  15. Felipe Tonello disse,

    em July 9th, 2008 às 12:22 pm

    Usando Opera Opera 9.51 no Windows Windows XP

    Hehehe que legal, já te enviei um e-mail Rafael.

    Abraços

  16. Arthur Lucena disse,

    em July 15th, 2008 às 4:27 pm

    Usando Mozilla Firefox Mozilla Firefox 3.0 no Windows Windows XP

    Felipe,

    Agradeço ao conteúdo publicado, me foi bastante útil neste início de estudos de Ajax com PHP. Há alguns erros de português, que poderiam ser corrigidos com o auxílio de um dicionário (há uma extensão do Firefox que instala um dicionário com verificação ortográfica para inputs de texto, muito bom) mas nada que ofusque a obra.

    Fico no aguardo da 4ª parte.
    Um abraço.

  17. Isaque de Souza disse,

    em July 21st, 2008 às 6:34 pm

    Usando Mozilla Firefox Mozilla Firefox 2.0.0.12 no Windows Windows XP

    Olá Felipe

    Queria tirar uma dúvida sobre aquele “null” que esta no .send(null)
    No Firefox mesmo só funcionou com ele, mas não sei pra que serve;
    E nesse outro exemplo tem a variável de montagem URL sBody

    Aqui troquei esse valor do .send() e deu no mesmo, ta dando certo,

    Na verdade, pra que serve essa variavel passada ao .send ?
    Só resta isso pra eu entender

    Agradeço desde já

    Vlw

  18. Felipe Tonello disse,

    em July 22nd, 2008 às 11:00 am

    Usando Mozilla Firefox Mozilla Firefox 3.0.1 no Windows Windows XP

    O null é um argumento implícito, em outras palavras, ele só serve para mostrar que eu não estou passando nada alí.

  19. tadeu disse,

    em July 29th, 2008 às 1:41 am

    Usando Mozilla Firefox Mozilla Firefox 3.0.1 no Windows Windows XP

    Cara, fantástico seu tutorial!

    Acreditava que fazer uma simples chamada ao servidor com Ajax fosse algo ultra complexo, e esse tutorial me mostrou que não =)

    Faz meia hora que entrei aqui e já tô brincando com Ajax nos mais diversos navegadores.

    Parabéns!

  20. Juliano disse,

    em July 31st, 2008 às 1:12 am

    Usando Mozilla Firefox Mozilla Firefox 3.0.1 no Windows Windows XP

    bah, descomplicou!

    parabéns!

  21. Rogerio Jim disse,

    em August 6th, 2008 às 3:53 pm

    Usando Mozilla Firefox Mozilla Firefox 3.0.1 no Windows Windows XP

    Cara é o primeiro tutorial de ajax que eu entendi!!!
    Ta de parabens.!!!

Comente!