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
view plaincopy to clipboardprint?
processa.php
view plaincopy to clipboardprint?
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].
view plaincopy to clipboardprint?
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:
view plaincopy to clipboardprint?
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.
view plaincopy to clipboardprint?
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
view plaincopy to clipboardprint?
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á! =)
http://www.wbruno.com.br/blog/2011/04/14/como-debugar-ajax-firebug/
No comments:
Post a Comment