Esse final de semana será bem corrido hehehe

Galera, todos estão convidados para as 2 palestras que irei fazer no conisli, Congresso Internacional de Software Livre, na cidade de São Paulo.

A primeira será 15:45 às 16:45 Engatinhando com AJAX e PHP no dia 9/11.
Em seguida será 17:00 às 18:00 Zend Framework para um PHP mais poderoso no mesmo dia 9/11.

Depois da palestra vou correndo para São Carlos nas UFSCar(Universidade Federal de São Carlos), minha querida facul, onde terá o Game Jam OLPC nos dias 10-11/11.
Vou participar no time com o Leandro Lameiro. Uhuuu vamos lá!!!

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

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

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.

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

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

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.

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.

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:

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:

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:

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.

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:

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:

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

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.