Depois de um bom tempo sem postar estou de volta para anunciar um portal que fiz. O ValeTI. É basicamente um portal de anúncios de emprego de TI na região do Vale do Paraíba.

Para desenvolve-lo eu segui basicamente a idéia de desenvolvimento. Ser simples, claro e genérico. Por isso fiz bom uso de Python e Django.

Fiquei impressionado com o Django. É realmente uma ferramenta impressionante. Super fácil de usar, completa e muito genérica.

Taí a dica. Agora nesse ano de 2010 voltarei com meus posts de artigos e tutoriais. O ano de 2009 foi muito corrido e não deu para fazer nada praticamente devido ao vestibular.

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

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

link do tópico no Cosme Blog

Postem seus resultados!