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
<script src="../Ajax.js" type="text/javascript"></script> <script src="postAjax.js" type="text/javascript"></script> <form action="postAjax.php" onsubmit="enviaReq(); return false"> Entre com suas informações Seu nome: <input name="nome" type="text" /> Sua Cidade: <input name="cidade" type="text" /> <input value="OKA!" type="submit" /> </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()
function criaReqStr(oForm){ var aPostStr = new Array(); for(var i = 0; i < oForm.elements.length; i++){ var sValor = encodeURIComponent(oForm.elements[i].name); sValor += "="; sValor += encodeURIComponent(oForm.elements[i].value); aPostStr.push(sValor); } return aPostStr.join("&"); }
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.
function enviaReq(){ var oForm = document.forms[0]; var sBody = criaReqStr(oForm); var oXMLHttp = criaXMLHttp(); oXMLHttp.open("post", oForm.action, true); oXMLHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); oXMLHttp.onreadystatechange = function (){ if(oXMLHttp.readyState == 4) exibeResult(oXMLHttp.responseText); else exibeResult("Ocorreu um erro: " + oXMLHttp.statusText); }; oXMLHttp.send(sBody); }
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():
function exibeResult(sTxt){ var divStatus = document.getElementById("divStatus"); divStatus.innerHTML = sTxt; }
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
<?php header('Content-Type: text/plain'); $sNome = $_POST['nome']; $sCidade = $_POST['cidade']; $sStatus = ''; /* Exemplo com Banco de Dados MySQL */ mysql_connect('seu.servidor', 'usuario', 'senha'); mysql_select_db('tabela.do.bd'); if (mysql_query("INSERT INTO tabela VALUES ('$sNome', '$sCidade')")) $sStatus = 'Informação inserida corretamente do banco de dados.'; else $sStatus = 'Erro ao inserir informações no banco de dados'; echo $sStatus; ?>
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.
Muito bom.......
que tal isso utilizando JSON??
ou, onde o JSON entraria nessa história toda?
Boa ideia Ricardo,
No próximo artigo sobre AJAX vou abordar o JSON =)
Abraços
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
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
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!
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...
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
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.
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.
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.
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.
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
Hehehe que legal, já te enviei um e-mail Rafael.
Abraços
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.
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
O null é um argumento implícito, em outras palavras, ele só serve para mostrar que eu não estou passando nada alí.
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!
bah, descomplicou!
parabéns!
Cara é o primeiro tutorial de ajax que eu entendi!!!
Ta de parabens.!!!
Muito bom, Felipe!
Parabéns!
Isso me ajudará muito!
Muito Obrigado!
Boa tarde...
Gostaria de uma ajuda....
Estou querendo montar uma pagina mais não quero usar iframe na pagina para abrir o conteudo no meio o que fazer... Me de uma ideia e uma ajuda..
Grato..
Olá, achei suas explicações interessantes, e seriam melhores se fizessem um trabalho completo, digo.
O exemplo foi PHP e AJAX, porque então não há um tutorial explicando como instalar o PHP, Apache e MYSQL no Windows e Linux, instalar o que for necessário pra usar o AJAX.
Lógico contendo também as configurações.
Creio que desta maneira ficaria impecável.
Cara... não sei muito bem o que pode ser... mas utilizo firefox 3.0.5 e esse tuto nele não ta rodando.. roda no IE mas da uma msg na barra de status dele dizendo que foi encontrado um erro na página mas roda 100% assim mesmo, o tuto com o método get rodou legal em ambos os navegadores... o q pode ser? Abraços mano... o tuto ficou jóia!!!!
Olá Felipe,
Seguinte sou leigo ainda nessa área e por isso gostaria de saber o pq quando os dados são insericos ao banco os valores que contém caracter especiais como * / & ^ ´, vão com "defeitos".
Obrigado por sua atenção!
O programa já foi resolvido.
Estava esquecendo de colocar o formato (UTF8) no valor recebido.
Obrigado.
PS: OTIMO POST
oi felipe muito massa o script kra
montei funcionou 100%
mais quando coloco no meu sistema logo que ele acaba de gravar
ele vai para um pagina em branco e mostra o retorno
nao consigo descobrir porque.
Olá Felipe.
Rapaz esse tutoria tá ótimo, pois eu procurei muito com tutoria descente sobre ajax e nunca tinha intendido como, vinha a resposta da requisição e agora com este tutoria eu consegui entender, eu peguei outros tutorias e eles davam exemplos muito complexos e acabava ficando muito difícil entender como as coisas aconteciam.
Obrigado e até mais. Já tá nos meus favoritos.
Olá Felipe! Estou utilizando o seu código para preencher em tempo real alguns elementos de acordo com as escolhas do usuário.
O grande problema é que os dados que estou utilizando para preencher esses componentes estão vindo diretamente do banco (MySQL) atravez de uma consulta utilizando linguagem PHP.
Os dados são carregados normalmente para dentro do componente, sem problema algum... porém... os caracteres acentuados (como ç, ã, á, ó etc) não aparecem. Em seu lugar aparece somente uma estranha umagem mais ou menos assim .
Você saberia me informar como resolver esse problema?
Obrigado!
Cara. Muito bom esse seu tutorial, aposto que quem é novato - como eu - vai ler e sair satisfeito.
Que Deus ilumine seu trabalho e que levante mais pessoas boas e interessadas em ajudar o proximo - assim como você...
Eu estava querendo entender o Ajax e achei o seu tutorial excelente para isso. Básico e fácil de entender, para uma pessoa que sabe pouco como eu sobre o assunto.
ou mesmo uma configuração do meu ambiente de teste (no caso uso o Wamp Server)?
Faço algumas observações sem demérito algum: você faz referência ao arquivo pegaId.php, mas o nome é lerId.php. No codigo php tem uma referência a função mysql_fetch_array que está precedida de $. E, por via das dúvidas, coloquei {} no if seguinte também. Isso foi bom pois me ajudou a entender melhor o código, mais do que simplesmente copiar e colar.
Agora, ocorreu que enquanto eu efetuava as correções no arquivo php essas modificações não se refletiam no navegador, como se o arquivo php houvesse sido compilado e incorporado ao html... Precisei fechar o navegador e abri-lo novamente para que refletisse as alterações.
Você sabe me dizer se isso é um comportamento do Ajax, do navegador (internet explorer
Muito obrigado por compartilhar seu conhecimento.
muito bom cara auhauhuh,coloquei esse tutorial no meu fórum!!
quem quiser acessar http://www.omelhordophp.com
abraços Felipe!
Muito bom! Parabéns..
abraços!
Parabéns, excelente post, não sei nada de Ajax e mesmo assim já estou fazendo altas consultas através desta explicação sua.
Só uma duvida, pq os meus resultados aparecem desconfigurados onde tem caracter especial como acentos.
Se puder dar uma força ai agradeço.
Ótimo tutorial, sou iniciante no assunto e pude aprender bastante coisas, e ajudou muito no que eu precisava!!
Para o problema de caracteres modiquem o cabeçalho no arquivo PHP, colocando:
header('Content-Type: text/plain; charset=utf-8');
Não acredito .. achei mais dois com sobrenome Tonello ...rsrs
mto bom tuts man, tava com php puro e tava ficando chato já ..rs. ..agora que li estes tutoriais resolvi aprender ajax ... começar inovar pra crescer ...
Abraços
vamos ver se alguem pode me ajudar, estou desenvolvendo um site com ajax, o texto funciona tudo ok, sem problemas, mas quando chega na tranmissão de fotos, aí ferrou tudo, não consigo de jeito nenhum, ele não le o $_FILES só le os $_POST, alguém sabe como posso fazer, pois tenho 10 cadastros, 9 são com upload de imagens. Desde Já Obrigado
Ola Felipe.
No Chrome funcionou. Mas no IE parece tentar baixar algum arquivo.
Veja: http://www.colegioapice.com.br/index2.htm