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.
Nos encontramos nessa mesma bat-hora e nesse mesmo bat-canal. ;D
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ó.
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
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
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,
Boa tarde, Felipe,
Achei bastante interessante seu artigo, estou aguardando a parte 3, 4 , 5…
Felicidades
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”
Obrigado pelo alerta!
Prometo não cometer mais esses tipos de erros medonhos. hehehe
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
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
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.
nao tem vergonha de copiar o artigo dos outros e ainda transcrever errado? isto esta no site do imasters. artigo 157
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
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.
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.
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
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.
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
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
Estou iniciando em ajax e adorei o seu tutorial, mto bom mesmo!! Um grande abraço..
Estou com um problema e não achei a solução na internet, gostaria de saber se alguém já passou por isso.
Eu instalei o wordpress, configurei, mas quando eu mudo a configuração de Links Permanentes de Padrão para Estrutura Personalizada, o wordpress funcionama perfeitamente mais no rodapé do blog todo aparece esses códigos HTTP/1.1 200 OK Date: Fri, 28 Nov 2008 21:07:04 GMT Server: Apache/2.2.8 (Unix) mod_ssl/2.2.8 OpenSSL/0.9.8b mod_auth_passthrough/2.1 mod_bwlimited/1.4 FrontPage/5.0.2.2635 mod_perl/2.0.3 Perl/v5.8.8 Content-Length: 0 Keep-Alive: timeout=5, max=96 Connection: Keep-Alive Content-Type: application/x-httpd-php5
Quando eu volto para a configuração de Links Permanentes de Padrão ele não aparece mais.
Alguém já passou por isso??
Hello Everbody
I just joined this forum.
Great work forum crew!
Just recently I read that there is a treatment for diabetes on http://www.healthcaredaily.org
Is this way of curing diabetes mentioned actually true, If so I should have found out earlier! The website http://www.healthcaredaily.org looks legit
Has anyone tried beating diabetes this way?
Thanks
Neiliehadia