Esse post, é complemento do Como debugar JavaScript com o Firefox?.

A maioria das dúvidas que vejo sobre AJAX, na verdade são sobre Javascript. Então se você se deparar com qualquer erro no console, vá para o outro post, e depois volte.

Vou usar o Firebug, para rastrear nossas requisições AJAX, e então explicar como pode ser simples o desenvolvimento dessa metodologia.

Não gosto nenhum pouco de copiar definições, então quando eu precisar fazer algo do tipo, apenas jogo o link no meio do texto, e espero que você que estiver lendo, clique, leia oque eu quis lhe mostrar, e volte. Ou não, o legal é a opção. Se você não quiser clicar, apenas continue lendo, e eu não te encho de ‘Mais do Mesmo‘.

Comecemos do simples. O meu foco será ajax, por isso farei tudo com javascript puro, sem plugins, libs ou frameworks. Se você entender o conceito por trás, vendo por de baixo dos panos como estou mostrando, então estará apto a aplicar o mesmo com qualquer falicitador.

index.html

<html>
<head>
	<title>teste</title>
<script type="text/javascript">
function id( el ){
	return document.getElementById( el );
}
function getHTTPObject(){
	if(window.XMLHttpRequest){
		return new XMLHttpRequest();
	}else if(window.ActiveXObject){
		var prefixes = ["MSXML2", "Microsoft", "MSXML", "MSXML3"];
		for(var i = 0; i < prefixes.length; i++){
			try {
				return new ActiveXObject(prefixes[i] + ".XMLHTTP");
			} catch (e) {}
		}
	}
}
var xmlHttp = getHTTPObject();
function envia( file ){
	xmlHttp.open( "GET", file, true );
	xmlHttp.onreadystatechange = function(){
		if (xmlHttp.readyState == 4){
			id('response').innerHTML = xmlHttp.responseText;
		}
	}
	xmlHttp.send( null );
}
window.onload = function(){
	id('enviar').onclick = function(){
		envia( 'process.php' );
	}
}
</script>
</head>
<body>
	<input type="button" name="enviar" id="enviar" value="Enviar xhr" />

	<p id="response"></p>
</body>
</html>

processa.php

<?php
	echo 'Beleza, chegou até aqui!';

De proprósito, ‘errei’, o nome do arquivo, coloquei process.php, mas na verdade se chama processa.php [terminando com a letra A].

envia( 'process.php' );

Abro o projeto no servidor, clico no botão, e:

Não funcionou, não fez o que queríamos

Erro na tela. Bem simples, e fácil de entender.

Não encontrou o arquivo. Dentre os possíveis motivos, eu poderia ter errado o caminho, o nome do arquivo, não ter me atentado ao CaSe SEnSiTIVe, o arquivo realmente ainda não ter sido criado…

Só apareceu dessa forma, porque eu pedi:

id('response').innerHTML = xmlHttp.responseText;

Mas nem sempre, é tão simples. Se eu não tivesse colocado o retorno completo dentro dessa DIV, teria sido muito mais silencioso. Só nos resta debugar o código.

Acessar diretamente

Uma forma, é acessar diretamente o arquivo que tentamos chamar. Indo no browser, e jogando a URL lá, crua..

http://localhost/process.php

Bem intuitivo. Esse princípio, demonstra bem que a única mágica do ajax, é ‘ir e voltar’ sem refresh. Todo o resto já estamos muito acostumados a lidar.

Mas não é tão prático assim, e ficar acessando várias URLs, pode nos deixar confusos, pois temos que levar em conta o caminho apartir do nosso script.

Usar alert()s

Nessas horas o alert(), é o ‘canino fiel’(melhor amigo), dos programadores js.

if (xmlHttp.readyState == 4){
			alert( xmlHttp.responseText );
			//id('response').innerHTML = xmlHttp.responseText;
		}

No alert, vemos:

O mesmo, porém tivemos que ‘caçar’ mais, e nem sempre é tão simples assim, podemos nos perder, e gastamos preciosos minutos colocando alert()s em tudo quanto é canto.

Finalmente, com o Firebug

Nesse momento, é o Firebug que vai nos salvar.

Apertemos F12, aba Rede, depois xhr:

Basta dispararmos novamente nossa requisição, clicando no nosso input, e vemos o erro no Firebug:

Só por esta aba, já temos toda a informação que precisamos, porém as outras, resposta e html, nos dão uma idéia mais detalhada e visual respectivamente do que obtivemos.

Corrigimos o nome do arquivo

envia( 'processa.php' );

No próximo post, vou mostrar mais algumas situações, e a ajuda que o Firebug nos dá.

Comentem. Me digam o que estão achando, me servirá de guia, para saber sobre o que devo escrever.

Até lá! =)