Engatinhando com AJAX e PHP. Parte 1
Ajude a Combater o Spam! Clique aqui!
Esse é meu primeiro tutorial sobre AJAX e espero que não seja o único. 
[update 03/10/07]
Parte 2 do tutorial AJAX + PHP
Parte 3 do tutorial AJAX + PHP
[/update]
Como esse tutorial é bem básico, para quem está começando com AJAX, eu vou esplicar explicar coisas bem básicas. Desde como funciona o protocolo HTTP e um exemplo de AJAX.
Para que você possa usufruir ao máximo do tutorial, você necessita de conhecimentos de HTML, JavaScript e PHP.
Vamos ver aqui então: Como funciona um HTTP request, um HTTP response, técnicas utilizadas e como comunicar o cliente com o servidor.
HTTP Resquests
O formato de um HTTP request é assim:
<requeste-line>
<headers>
<blank line>
[<request-body>]
A primeira linha(<requeste-line>) necessita da indicação do tipo do request, diretório de acesso eda versão do HTTP. Já no <headers> indica informações adicionais para o server. Depois a <blank line>, é seguida do <request-body> que é opcional.
Não vou ficar explicando muito aqui, pois não é o foco do nosso tutorial. Agora vou mostrar um exemplo prático de como o browser envia o HTTP request:
GET /?cod=1 HTTP/1.1
Host: www.felipetonello.com
User-Agent: Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.8.1) Gecko/20060601 Firefox/2.0 (Ubuntu-edgy)
Connection: Keep-Alive
Explicando resumidamente: Na primeira linha vimos que usamos o tipo GET seguido da / quer dizer que irá acessar ao diretório root do server com o parametro cod=1 e em seguida da versão do HTTP. Depois os cabeçalhos que são auto-explicativo.
Quem usa PHP a um tempo conhece bem esses headers.
Então vimos como o browser se comunica com os servidores por meio do HTTP(Hypertext Transfer Protocol).
HTTP Responses
Agora vamos ver como o servidor responde, quando recebe um request, por meio do HTTP.
<status-line>
<headers>
<blank line>
[<response-body>]
O formato é bem parecido, apenas muda a primeira e ultima linha. Na primeira linha ele retorna a versão do HTTP e o status da resposta. Já na ultima ele retorna o corpo da resposta. Exemplo:
HTTP/1.1 200 OK
Date: Sat, 11 Nov 2006 23:59:59 GMT
Content-Type: text/html;charset=UTF-8
Content-Length: 122
<html>
<head>
<title>Felipe Tonello</title>
</head>
<body>
<!-- Aqui vem o corpo -->
</body>
</hmtl>
Na primeira linha temos a versão do HTTP em seguida do status(200). Os cabeçalhos e depois a resposta que no caso foi como um text/html.
Os status mais comuns são:
- 200 (OK): arquivo encontrado com sucesso.
- 304 (NOT MODIFIED): O arquivo não foi modificado desde o ultimo request. Isso é mais utilizado em browsers com mecanismos de cache.
- 401 (UNAUTHORIZED): Cliente não tem autorização para acessar o arquivo. Normalmente isso irá fazer com que o browser pergunte por usuário e senha para logar no servidor.
- 403 (FORBIDDEN): O Cliente falhou na autorização. Normalmente acontece quando você falha na autorização depois de um erro 401.
- 404 (NOT FOUND): Quando o arquivo não existe na localização informada.
Nesse tutorial vocês entenderam como funciona o protocolo HTTP para se comunidar entre servidor e cliente.
Para não ficar muito grande vou separar em 2 partes. Na proxima parte vamos ver um exemplo de comunicação cliente-servidor usando AJAX.
Até mais.
em November 16th, 2006 às 12:32 am
Nos encontramos nessa mesma bat-hora e nesse mesmo bat-canal. ;D
em November 16th, 2006 às 3:54 pm
vc realmente precisa saber dessas coisas pra programar em PHP? acho q vc pegou pesado pra um curso q pretende ser básico em php
essa introdução seria importante dizer qual a diferença entre um POST e um GET e quais as vantages/desvantages de cada um.
as outras coisas n são muito úteis… já programei muito em php e no máximo usei os headers, pra fazer a página redirecionar… e só.
em November 16th, 2006 às 4:28 pm
Olá maurelio,
Realmente essa parte não necessita nada de php hehe..
É que na verdade eu queria já entrar no php nessa parte mesmo, mas não deu, ia ficar muito grande… Mas concerteza nas proximas você irá ter um básico de php para poder entender legal!
Abraços
em January 23rd, 2007 às 11:40 am
Acho que o Maurélio se confundiu, isso não é um artigo ensinando a programar em php, e sim ensinando a técnica de AJAX juntamente com o PHP, portando se faz necessário aí dois conhecimentos, PHP e claro o funcionamento das requisições do browser para processar o XMLHTTPRequest, que foi o que o Felipe tentou mostrar, e diga-se de passagem, muito bem, já que são poucos artigos em português que ensinam essa técnica. Creio que na segunda parte se possa aprofundar mais nas questões do GET e POST, já que não dá para ensinar sem mostrar algo mais prático.
Abraços
em January 26th, 2007 às 12:25 pm
Olá Marcelo,
Exatamente. Obrigado pela ajuda aqui em cima hehehe
Realmente, na segunda parte eu mostro como usar o método GET.. e na terceira parte meu objetivo é mostrar com o POST..
Abraços,
em April 19th, 2007 às 5:36 pm
Usando
Internet Explorer 7.0 no 
Windows XP
Boa tarde, Felipe,
Achei bastante interessante seu artigo, estou aguardando a parte 3, 4 , 5…
Felicidades
em May 18th, 2007 às 11:40 am
Usando
Mozilla Firefox 2.0.0.3 no 
Windows XP
Começei a ler o seu tutorial e me deparei com “eu vou esplicar” PQP …. deu nojo em ler, aprenda português antes de escrever algo intitulado “tutorial”
em May 21st, 2007 às 11:02 am
Usando
Mozilla Firefox 2.0.0.3 no 
Windows XP
Obrigado pelo alerta!
Prometo não cometer mais esses tipos de erros medonhos. hehehe
em May 27th, 2007 às 7:49 pm
Usando
Netscape 8.1.3 no 
Windows XP
Galera
Preciso de ajuda. trablho por anos com Delphi mas agora quero fazer algo do tipo intranet em paginas de web e tals, preciso saber de um lugar(pagina ou material) em que eu aprenda a desenvolver de forma prática o esqueleto de uma página web (de preferência um progrma que simplifique detalhes visuais) e um em que eu praticamente engatinhe com php e ajax….. pois quero mesmo eh tudo em ajax.
Desde ja agradeço
em July 2nd, 2007 às 10:12 am
Usando
Mozilla Firefox 2.0.0.4 no 
Linux
Felipe…
tô gostando bastante do tutorial… mandou bem!
e qto ao comentário do Mateus acima, é só pra rir mesmo! Tudo bem q seu erro foi meio tosco, mas como q alguém q quer vir te corrigir escreve “começei” com ç? É mais tosco ainda!!!
Naaan… siga em frente, rapaz!
abrazos
em July 15th, 2007 às 11:32 pm
Usando
Internet Explorer 6.0 no 
Windows XP
Mateus, explicar é com X e não com s.
Primeiro vc tem que aprender escrever direito para criticar os outros.
Sobre o tutorial o que vale é a intenção em ajudar.
Abs galera.
em July 21st, 2007 às 12:30 am
Usando
Internet Explorer 7.0 no 
Windows XP
nao tem vergonha de copiar o artigo dos outros e ainda transcrever errado? isto esta no site do imasters. artigo 157
em July 22nd, 2007 às 6:45 pm
Usando
Mozilla Firefox 2.0.0.5 no 
Windows XP
Amigo, acho que está havendo algum engano.. esse tutorial eu criei sozinho mesmo, utilizando apenas um livro importado que comprei para me ajudar nas ideias de exemplos e assim por diante..
Faz um bom tempo que fiz esse tutorial e quando eu fiz nao tinha tutorial assim de ajax e php na web..
anyway, se quiser postar o artigo para eu ver, podemos analisar mesmo quem está copiando. ok?
Obirgado
em September 25th, 2007 às 3:53 pm
Usando
Internet Explorer 6.0 no 
Windows XP
Apreciei o início do seu tutorial pela forma simples e objetiva.Continuarei a tirar proveito dele COM OU SEM falhas de português porque sou GRATO a pessoas que CONTRIBUAM com o seu tempo e conhecimento.Obrigado.
em September 25th, 2007 às 4:05 pm
Usando
Internet Explorer 6.0 no 
Windows XP
Felipe, somente tira o link do comentário anterior que aponta para o site (www.belavito.com) porque ele não tem nada a ver com php.Obrigado.
em September 25th, 2007 às 6:52 pm
Usando
Mozilla Firefox 2.0.0.6 no 
Linux
Olá J. Roberto,
Obrigado pelo comentário! Espero que continue agradando as pessoas.
Sobre o link do seu site, não tem problema não!
Abs,
Felipe
em November 22nd, 2007 às 6:14 pm
Usando
Internet Explorer 7.0 no 
Windows XP
Estou usando ajax, e me deparei com a seguinte situação.
Testei em varios locais a aplicação que estou fazendo e nenhum problea, mas na faculdade sempre da erro 403 forbidden.
Será que é por causa das restrições de acesso a internet?
Como faço para contornar isso?
Agradeço alguma resposta.
em March 10th, 2008 às 10:37 am
Usando
Mozilla Firefox 2.0.0.12 no 
Windows XP
Otimo seu artigo, mas se não utilizar todas as versões do xmlhttprequest, pode não funcionar em alguns browser tipo IE 6 ? Aguardo resposta
em April 4th, 2008 às 1:59 pm
Usando
Mozilla Firefox 2.0.0.13 no 
Windows XP
Exatamente,
Na verdade o IE6 utiliza o MSXML2.XMLHttp.5.0
Mas para compatibilidade com o máximo número possível de browsers, é bom utilizar aquele método
em August 5th, 2008 às 7:02 pm
Usando
Opera 9.24 no 
Windows XP
Estou iniciando em ajax e adorei o seu tutorial, mto bom mesmo!! Um grande abraço..