Neste post vou tratar de assunto essencial para programadores WEB, independente de qual linguagem de backend você utiliza, é indispensável o conhecimento de AJAX nos dias atuais. A sigla AJAX significa “Asynchronous Javascript and XML“, ou seja, o javascript cria uma requisição ao servidor, sem que seja necessário o recarregamento da página, e tem como retorno um arquivo xml.
Se você ainda não tem um bom conhecimento de como funciona os sistemas cliente-servidor, requisição-resposta, clique aqui e de uma olhada neste tópico, com uma explicação prévia sobre este assunto.
Como você ja deve saber, xml nada mais é que uma marcação de texto, ou seja, o retorno seria um arquivo de texto com marcação xml. Com o passar do tempo, o javascript evoluiu, e não necessariamente precisamos receber de volta uma marcação em xml. Podemos ter de retorno do ajax, qualquer texto, inclusive html, o que tornou essa ferramenta uma forma poderosa de deixar um site mais dinâmico, ja que através de AJAX é possível retornar dados do servidor e atualizar html da página assincronamente, ou seja, sem precisar recarregar a página inteira.
Porque utilizar AJAX?
Como já dito anteriormente, a principal vantagem, é buscar dados ou realizar operações no servidor sem precisar recarregar a página, ou seja, deixar a página muito mais dinâmica.
Exemplo: Imagine a situação de um formulário de cadastro, onde o campo nome de usuário, não possa ser duplicado, não podem existir duas pessoas com o mesmo nome de usuário. Você pode fazer uma requisição em ajax no servidor, assim que a pessoa acaba de preencher o campo username, e já avisar ela que este nome já esta em uso, antes de ela acabar de preencher o formulário. Você pode utilizar ajax para fazer buscas no banco de dados indiretamente, passando parâmetros na requisição, o servidor processa essa requisição, manda os parâmetros para o banco de dados e retorna o resultado para o javascript. Isto pode ser usado para campos de busca dinâmicos por exemplo, onde a pessoa vai digitando e ja vai parecendo possíveis resultados em baixo do campo. Nestes casos, a cada letra digitada, o javascript ja faz uma requisição via AJAX passando o texto digitado como parâmetro da requisição.
Mas nem tudo é flores, como o AJAX nada mais é do que uma requisição feita pelo javascript, assim como qualquer requisição que você faz ao clicar em um link, é necessário uma linguagem de backend para receber, processar,e responder essa requisição. Por este motivo, o ajax não funciona em documentos HTML em sua máquina local, apenas em servidores reais, ou simulados, como no caso de instalações de servidores na máquina local utilizando pacotes de instalação do Apache. Sendo assim, é necessário o conhecimento de javascript e pelo menos uma linguagem de backend para utilização do AJAX. Esta linguagem de backend pode ser qualquer uma que trabalhe com WEB, como PHP, ASP, JSP(java), etc.
Porque AJAX com Jquery?
A tecnologia AJAX independe de Jquery, é possível realizar AJAX utilizando javascript puro, mas o Jquery veio exatamente para facilitar e muito a vida de programadores WEB, reduzindo drasticamente a quantidade linhas necessárias para realizar uma requisição em AJAX. Se você ainda não tem muito conhecimento sobre Jquery, pode ver uma introdução clicando aqui.
Para isso vamos utilizar primeiramente o próprio método ajax do jquery. HTML:
<h1>Nesta div abaixo, será carregado o resulto do AJAX</h1>
<div id="resposta"></div>
Jquery:
$.ajax({
type: "GET",
url: "teste.php"
}).done(function(msg){
/* função executada quando o ajax estiver completo
* podemos tratar o retorno como quisermos,
* lembrando que essa resposta é
* tratada como um texto
*/
alert( "Conteúdo retornado pela página teste.php: " + msg );
/* se este texto contiver html, podemos
* inserir ele na página como html
* e assim modificamos dinâmicamente o html
* com os resultados retornados do servidor
*/
$('#resposta').html(msg);
}).fail(function( jqXHR, status ) {
//caso aconteça um erro na requisição
alert( "Requisição falhou: " + status );
});
arquivo teste.php:
echo "<p>Parágrafo retornado ao AJAX pelo PHP</p>";
Esta é uma simples requisição em ajax, requisitando a página teste.php, que retorna uma parágrafo, que será adicionado na div com o id resposta. Type get é o mais comum, uma simples requisição, que pode passar parâmetros pela url como por exemplo: pagina.php?nome=joa&idade=23, e url é o endereço que será requisitado.
Este método $.ajax(), é o método mais completo sobre ajax no Jquery, onde você tem inúmeras configurações, nas quais eu não entrarei a fundo aqui, pois o assunto é muito extenso, mas existem outros métodos do Jquery, que na verdade são chamadas mais simples, mas que no fundo executam este mesmo método AJAX, para fazer requisições assíncronas, dentre eles o $.post(), $.get(), $.load() e $.getJSON() que abordarei futuramente em outros posts.
Para uma descrição completa do método $.ajax(), visite a documentação oficial do jquery: http://api.jquery.com/jQuery.ajax/
Como debugar AJAX?
Antigamente era muito difícil debugar qual a resposta que o ajax recebeu, mas com a evolução dos inpetores web dos navegadores, esta tarefa se tornou muito mais fácil. vou mostrar algumas imagens no inspetor do Crome, mas não é muito diferente dos inspetores dos outros navegadores. Para iniciar aperte a tecla F12 para abrir o inspetor, e logo em seguida clica na aba Network, que mostra as operações que envolvem rede e requisições. Neste painel serão listadas todas as requisições, inclusive as feitas no início do carregamento da página, como folhas de estilos, imagens, scripts e a própria página em si. Por isso, para ter uma melhor visualização, após o carregamento da página, clique em limpar, para limpar o painel e verificar só as requisições feitas após o carregamento da página, como no caso de AJAX. Neste painel você já verifica o tipo de requisição: GET ou POST, e verifica também o status de resposta HTTP do servidor, no caso 200 significa encontrado sem erros. Você pode verificar aqui uma lista com vários dos possíveis status: http://pt.wikipedia.org/wiki/Anexo:Lista_de_c%C3%B3digos_de_status_HTTP.
Clicando na requisição, você verá a requisição detalhadamente, inclusive as informações do header da requisição. Nesta seção, basta clicar em response, e você verá exatamente a resposta que foi enviada pelo servidor ao javascript.
Este é um assunto muito extenso, que exige um pouco de estudos e prática, para que seja usado da melhor forma possível. Até mesmo por isso é impossível abordar tudo em um só post. Futuramente postarei novamente sobre os outros métodos Jquery para trabalhar com AJAX. Espero que este post possa ajudar quem esta começando a programar para web, deixando suas páginas mais dinâmicas.
Basta clicar em algum anúncio da header ou sidebar e aguardar pelo menos 10 segundos
