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.

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.

function criaXMLHttp() {
 if (typeof XMLHttpRequest != "undefined")
 	return new XMLHttpRequest();
 else if (window.ActiveXObject){
 	var versoes = ["MSXML2.XMLHttp.5.0",
 	"MSXML2.XMLHttp.4.0", "MSXML2.XMLHttp.3.0",
 	"MSXML2.XMLHttp", "Microsoft.XMLHttp"
 	];
 }
 for (var i = 0; i < versoes.length; i++){
 	try{
 		return new ActiveXObject(versoes[i]);
 	}catch (e) {}
 }
 throw new Error("Seu browser nao suporta AJAX");
}

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:

var XMLHttp = criaXMLHttp();
XMLHttp.open("get", "info.txt", true);

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:

var XMLHttp = criaXMLHttp();
XMLHttp.open("get", "info.txt", true);
XMLHttp.onreadystatechange = function () {
 if (XMLHttp.readyState == 4)
 	alert("EEE primeiro teste com AJAX!! :)");
};
XMLHttp.send();

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:

if (XMLHttp.status == 200)
	alert("O retorno foi: " + XMLHttp.responseText);
else
	alert("O retorno foi: " + XMLHttp.statusText);

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.

<div id="resultado"></div>
 
<div id="lerid">
Id: <input name="id" id="id" type="text" />
<input value="OKA!!" onclick="lerId()" type="button" />
</div>

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:

function lerId() {
	var id = document.getElementById("id").value;
	var divInfo = document.getElementById("resultado");
	var XMLHttp = criaXMLHttp();
	XMLHttp.open("get", "lerId.php?id=" + id, true);
	XMLHttp.onreadystatechange = function () {
		if (XMLHttp.readyState == 4)
			if (XMLHttp.status == 200){
				divInfo.innerHTML = XMLHttp.responseText;
			} else {
				divInfo.innerHTML = "Um erro ocorreu" + XMLHttp.statusText;
			}
	};
	XMLHttp.send(null);
}

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:

<?php
// mudamos o tipo de arquivo.. ao invez de php irá retornar um texto normal
header("Content-Type: text/plain");
// recebe o id que veio pelo parametro usando o método GET
$id = $_GET["id"];
$resultado = "";
// isso agora é um exemplo, você tem que aplicar a conexão e a consulta sql à sua necessidade
$BDUsuario = "seu usuario ou root";
$BDSenha = "senha do usuario";
$BDServidor = "localhost normalmente ou o servidor de banco de dados";
$BancoDeDados = "nome do seu banco de dados";
mysql_connect($BDServidor, $BDUsuario, $BDSenha);
mysql_select_db($BancoDeDados);
$sql = mysql_query("SELECT * FROM tabela WHERE id = " . $id);
if ($resultado = $mysql_fetch_array($sql))
	$resultado = "ID Encontrado
	\n
	Nome: " . $resultado['nome'];
echo $resultado;
?>

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

[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.

http://www.cosmeweb.com.br/blog/exame-xhtml

link do tópico no Cosme Blog

Postem seus resultados!

Ele utiliza ajax em tudo, nenhuma página deu reload. Mas o melhor dele é a sua utilidade. Lá você pode agregar seus feeds, podcasts, delicious, abrir o gmail, fazer buscas pela net, listar site de compras, etc etc...

Da até pra editar o titulo da página =)

To meio sem tempo de ficar escrevendo muito.. mas não tem muito o que falar, vocês tem que conferir com seus próprios olhos!

Tae a dica, esse site me está sendo muito útil e acho que a vocês também..

tirada do blog do IE

if (window.XMLHttpRequest){
// IE7, Mozilla, Safari, etc: browsers decentes
var xmlHttp = new XMLHttpRequest()
}
else
{
if (window.ActiveXObject){
// …outro jeito, usando o ActiveX para IE5.x e IE6
var xmlHttp = new ActiveXObject(”Microsoft.XMLHTTP”);
}

}