Este artigo marca a volta da publicação de novos conteúdos no blog. O blog mantem um ritmo de publicação semanal de novos artigos, contudo, houve uma pausa de aproximadamente dois longos meses sem nenhum conteúdo novo. Isso se deve a grandes afazeres que tive no meu trabalho de conclusão de curso da faculdade. Tal tarefa exigiu não só um grande tempo meu para realizá-lo quanto a estudar tecnologias para adicionar neste meu projeto. Graças a isso, novos conteúdos serão explorados aqui no blog.
Dedicado a volta da publicação de novos artigos, vamos tratar dessa vez da tecnologia Ajax. Foi algo que estudei e explorei bastante nos últimos meses, e percebi que tem bastante pessoas que ainda tem dificuldade em trabalhar com o mesmo, algumas não sabem do que se trata e com isso perde muitos recursos que poderiam acrescentar em seus projetos. Eu, particularmente, tive um pouco de dificuldades em entender exatamente como funcionava a tecnologia Ajax e também para conseguir adiciona-la no meu projeto. Por isso, prometo que este artigo será um guia definitivo para seu aprendizado em ajax.
Para marcar a volta de novos artigos no blog, é prometido um vídeo sobre este mesmo artigo no meu canal do Youtube.

Antes de começarmos, gostaria que você visitasse dois links referentes ao meu trabalho aqui no blog. Então, caso ainda não conheça ou não os siga, deixe-me lhe apresentar:
Clique aqui e conheça meu canal no Youtube. Embora eu publique vídeos aleatórios, tenho a pretenção de focá-lo nos artigos do meu blog e também em tratar sobre assuntos gerais de programação. Inscreva-se!
Clique aqui para conhecer a página do blog no Facebook. Na página eu sempre faço postagens em relação aos futuros artigos do blog. É onde eu respondo com maior frequência os leitores do blog e leio sugestões para novos artigos. Curta a página para receber as notificações!
Clique aqui para visitar meu perfil pessoal no Facebook. Você pode conversar diretamente comigo através do inbox!

Introdução e teoria

A siga AJAX significa Asynchronous JavaScript And XML, o que em português representaria Javascript e XML Assíncronos. O Ajax não é uma linguagem de programação, e sim uma tecnologia (um recurso) disponibilizada pelos navegadores através do Javascript. Podemos utilizar alguns outros recursos para otimizar o uso do Ajax, como por exemplo, o jQuery.
Especificando um pouco mais o uso do Ajax, com ele, podemos fazer requisições assíncronas (ou síncronas se desejar) de informações para qualquer tipo de tecnologia, como por exemplo, para o PhP.
Um exemplo de uso do Ajax: suponha que você tem um formulário com um botão submit, e ao clicar neste botão, você precisa enviar as informações do formulário para um arquivo PhP que salvará as informações no banco de dados, entretanto, você precisa fazer isso sem que a página seja atualizada. Isso é possível utilizando o Ajax, pois com ele, você consegue enviar informações do Javascript para o PhP, e vice-versa.
Outro exemplo seria um anúncio na internet, onde neste anúncio existe um campo que exibe número de telefone de uma pessoa, mas por questões de segurança, o número desta pessoa só é exibido caso o usuário clique em um botão chamado "ver número". Com o Ajax, você consegue fazer que, ao clicar no botão, você envie informações para um arquivo em PhP, este arquivo em PhP busca o número de telefone da pessoa do banco de dados e exibe essa informação na tela, tudo isso sem precisar atualizar a página, ou seja, de forma dinâmica e instantanea. Legal, não é?

Com Ajax você pode utilizar o Javascript para se comunicar com o lado do servidor, seja PhP, C#, ou qualquer outra linguagem, e com isto, você também consegue utilizar o lado do servidor para trazer informações do seu banco de dados e exibi-las na tela de forma rápida e dinâmica.

Além disso, com o Ajax você também pode fazer requisições HTTP.
Outro exemplo prático e rápido: você precisa resgatar informações de um arquivo JSON que está hospedado em: conradosaud.com.br/json-android.php. Esses dados você não são visíveis apena acesando a página, eles são enviados para você quando você faz algum tipo de requisição http. Você precisa desses dados para preencher um objeto Javascript. Com o Ajax, basta fazer uma requisição http neste endereço, e como resposta você receberá exatamente as informações que esta página está oferecendo. Simples e descomplicado.

Hora de aprender Ajax na prática!

Como dito anteriormente, você pode fazer requisições Ajax utilizando Javascript nativo, porém, para este artigo, eu vou contar com o auxilio do jQuery para fazer requisições Ajax. O motivo de utilizar jQuery no Ajax é porque o código fica mais limpo, simples e de fácil entendimento. Entretanto, como este artigo busca uma visão geral do Ajax, se por algum motivo você não queira utilizar jQuery para isto eu recomendo que leia este tópico publicado no Stack Overflow, onde você tem uma visão melhor de como trabalhar Ajax no Javascript nativo.

Então, primeiramente, analise o código Javascript abaixo:

$.ajax({
	type: 'POST',
	url: 'http://www.conradosaud.com.br/json-android.php',
	data: "",
	success: function (data) {
		// em caso de sucesso...
	},
	error: function (data) {
		// em caso de erro...
	},
	complete: function(){
		// ao final da requisição...
	}
});

Bem simples, não? Vamos entender agora cada pedaço da estrutura do Ajax:

• type: aqui é necessário especificar o tipo de método que você deseja enviar suas informações. Os tipos possiveis são GET para solicitar dados de um endereço específico e POST para submeter dados a serem processados a um endereço específico. A forma de utilizá-los nem sempre é como eu descrevi agora, mas é o uso mais comum para ambos. Veremos na prática suas diferenças.
• url: endereço específico no qual iremos enviar tais informações. Pode ser tanto um endereço web (como do exemplo) quanto um arquivo dentro do seu projeto, como por exemplo ../php/index.php.
• data (atributo): são as informações que você deseja passar para serem submetidas ao url especificado. Um exemplo seria você enviar dados (variaveis, objetos) em Javascript para um arquivo em PhP (faremos isso mais tarde também).
• data (callback): além da data citada anteriormente, sempre que fazemos uma requisição Ajax nos é retornado uma resposta daquela requisição onde comumente atribuimos o nome de data para esta variável. É através deste callback que sabemos se a requisição foi um sucesso ou não.
• success: se a requisição feita for realizada com sucesso, ou seja, se o processo de requisição Ajax não for interrompido ou falho, você receberá dentro da variável data (nosso callback) os dados retornados por tal requisição.
• error: caso falhe a requisição Ajax, entramos aqui. Ainda sim, o callback de data vem carregado com os recursos que o Ajax conseguiu capturar mesmo que não seja uma resposta positiva da nossa requisição, com isto, podemos avaliar qual foi o erro causado.
• complete: assim como o finally em uma estrutura de try/catch, ao final da requisição Ajax, independente de ter sido uma requisição bem sucedida ou não, podemos utilizar este recurso para fazer as ultimas operações antes da finalização da função Ajax.

Exemplo prático

Na teoria é tudo muito lindo, contudo vamos testar essa estrutura na prática agora.
Abra seu editor de códigos favorito e dentro dele copie e cole o a estrutura HTML de exemplo abaixo:

Mostrar/esconder código

Então vamos fazer algumas observações a respeito do código passado acima.
Primeiramente, temos um HTML padrão apenas para a exibição de texto da página. É importante declarar o jQuery logo na tag head do documento, pois o quanto antes o jQuery for carregado é melhor. Uma vez com o jQuery pronto para funcionar, eu atribui um evento que é executado quando o usuário clicar no link "Clique aqui". Quando for clicado, o Ajax será chamado.
Perceba que a estrutura que eu utilizei no exemplo acima é exatamente a mesma estrutura do exemplo de código Ajax que havia passado anteriormente. Desta vez, utilizamos o tipo GET, pois apenas precisamos pegar os dados de uma url. A url passada é de um site que traz em formato json o ip do usuário e também alguns dados de geolocalização do mesmo. Se você copiar este endereço e colar me seu navegador você terá acesso ao texto json que o site retornará. A diferença principal, é que utilizando o Ajax para fazer essa requisição http, nós conseguimos pegar no callback data o objeto json completo e pronto para ser usado da maneira que precisarmos.

Esse tipo de requisição http usando o Ajax é muito utilizado para fazer requisições para APIs, como por exemplo, API do Facebook, Google Maps e Google Analytics. Aqui no blog eu fiz um artigo explicando tudo sobre a API do Facebook e como utilizá-la, onde é usado bastante Ajax para fazer essas requisições. Você pode clicar aqui para ler o artigo completo.
Outro ponto muito importante a se observar, é que assim como a proposta do Ajax, toda essa requisição que fizemos foi feito de forma assíncrona, então não precisamos sequer atualizar a página para que esses dados fossem exibidos na tela, o que é uma grande vantagem utilizando a tecnologia Ajax, pois caso precisassemos enviar dados de um formulário para um destino específico sem precisar atualizar a página, seria feito desta forma.

Evite erros: requisições Ajax são assíncronas
O que isso quer dizer?
Veja no código abaixo um erro muito comum que pode ser feito por quem está começando no Ajax:

$(document).ready(function(){

	// vamos armazenar nesta variavel global o ip do usuario que virá da requisição Ajax.
	var ipUsuario;

	// o evento ocorrerá normalmente
	$("#linkTeste").click(function(e){
		e.preventDefault();
		
		$.ajax({
			type: 'GET',
			url: 'https://ipinfo.io/json',
			data: "",
			success: function (data) {
				ipUsuario = data.ip;
				// ok, dados atribuidados a variavel ipUsuario
			},
			error: function (data) {
				alert("Erro na requisição Ajax");
			}
		});
		
		// agora, ao final da requisição ajax, vamos exibir o ip do usuario
		alert("Seu ip é: "+ipUsuario);
	});
});

Copie o código acima e cole na área Javascript do arquivo HTML que estamos utilizando como exemplo. O que acontece quando clicamos no link?

Oras, por que isso acontece?
Primeiramente, vamos entender a definição de assíncrono segundo o dicionário do Google: Assíncrono o que não é sincrônico, que não apresenta sincronia ou sincronismo.

O que acontece é que quando você envia uma requisição a uma determinada url, o callback do Ajax tanto no retorno de sucess quanto de error só será processado e retornado um registro quando a requisição for realizada por completo.
Em outras palavras, o código acima não funciona porque a leitura do código em si ao clicar no evento do link é mais rápida do que a requisição do ajax ao url especificado, sendo assim, o javascript lerá a requisição Ajax, o colocará em processo de espera e logo em seguida lerá o comando do alert. Se no momento em que o Javascript passar pelo alert a requisição Ajax não estiver completa, a variável global ipUsuario ainda estará vazia, mostrando a mensagem undefined na tela.
Isso também pode depender do tempo de resposta do servidor. Caso a resposta à requisição ajax daquela url seja tão rápida quanto a leitura do Javascript, pode ser que em algum momento ao chegar no alert o ajax já tenha carregado a variável ipUsuario e mostre a mensagem correta na tela. Entretando, claro, não podemos depender da velocidade do servidor para mostrar algo na tela correndo o risco da variável continuar vazia até lá.

Como tratar este problema?
Existem diversas formas de se trabalhar com Ajax quando estamos dizendo a respeito de aguardar o tempo de suas requisições assíncronas. Uma delas, porém não use nunca recomendado é adicionar após a url do ajax o comando async: false, pois fazendo isso você está desativando a requisição assíncrona do ajax, ou seja, quando o javascript chegar na sua requisição ajax, o mesmo só continuará após a requisição estar completa. Não é nem um pouco recomendável utilizar este método, mas é importante saber que ele existe.

Qual a forma mais indicada então?
O fato é: depende muito. Depende da operação que você está fazendo. O exemplo mais comum é o utilizado no primeiro caso, onde colocamos uma função de alert dentro do ajax.
O recomendável e mais utilizado é de fato colocar dentro da operação de sucesso (ou a que for usar) os comandos que serão executados quando sua requisições estiver completa, porque de fato, serão executados quando a operação estiver completa com todos os dados carregados na variável data. De preferência, sempre chame por funções para que seu código não fique bagunçado.

Segue abaixo, novamente, uma requisição para o mesmo endereço buscando informações de IP do usuário onde será exibida uma mensagem na tela, e juntamente, também vamos carregar uma variável global que vou usar de exemplo para uma explicação posterior. Veja o código abaixo:

$(document).ready(function(){
	
	var usuario;

	$("#linkTeste").click(function(e){
		e.preventDefault();
		$("#carregando").show();
		
		$.ajax({
			type: 'GET',
			url: 'https://ipinfo.io/json',
			success: function (data) {
				usuario = data;
				mostrarMensagemSucesso();
			},
			error: function () {
				mostrarMensagemErro();
			},
			complete: function(){
				$("#carregando").hide();
			}
		});
	});

	function mostrarMensagemSucesso(){
		//usuario.ip = "";	para provocar um erro proposital
		if(usuario.ip.length < 1){
			var mensagem = "IP de usuário não identificado.";
			mostraDialogo(mensagem, "warning");
		}else{
			var mensagem = "Seu IP é "+usuario.ip+", no estado de "+usuario.region;
			mostraDialogo(mensagem, "success");
		}
	}

	function mostrarMensagemErro(){
		// para causar esse erro basta mudar o url para algo que não existe
		var mensagem = "Ops, erro na requisição...";
		mostraDialogo(mensagem, "danger");
	}
	
});

Vejamos como fica o exemplo do código no HTML:

Gostou? A função mostraDialogo() é uma função que eu criei relacionada ao artigo de Diálogos flutuantes e temporizados que eu publiquei aqui no blog há algum tempo. Você pode ler este artigo na íntegra e implementar no seu código clicando aqui para lê-lo. É bem simples instalá-lo e fica muito bonito.

Considerações finais

Existem outras utilidades (muitas outras) para o Ajax, mas uma das mais comuns e utilizadas é a requisição http abordada nessa primeira parte.
Daremos continuidade na parte 2 deste artigo, onde vou mostrar como passar variáveis e objetos do Javascript para o PhP e também como passar informações que você buscou do banco ou de qualquer outro lugar do PhP para o Javascript. Será um artigo bem completo, assim como este, então fique antenado.

Não esqueça de praticiar. Continue utilizando o site https://ipinfo.io/json para receber arquivos json, se preferir, eu também tenho um json no meu site em que você também pode brincar, acesse em http://conradosaud.com.br/json-android.php. Lembrando que, embora você possa fazer essas requisições para endereços da web, nada impede você de criar um arquivo json em um documento de texto simples e no lugar da url você indicar o caminho desse seu arquivo, exemplo: url: ../json/arquivo-json.txt e buscar de lá mesmo, porque como eu havia dito anteriormente, a url não precisa ser um endereço web, pode ser também um caminho local do seu computador.

Eu espero que este artigo tenha lhe ajudado de alguma forma. Caso tenha lhe ajudado, uma forma de retribuir este favor é curtindo a página do blog no Facebook e também me siga por lá, dessa forma você sempre será notificado de novos artigos e novidades do blog e meus trabalhos.
Falando em trabalhos, estou com um projeto de criar um podcast! Não será nada relacionado a programação, mas para saber mais eu sugiro que acesse https://tramacast.com.br e conheça mais sobre. Lembrando que dependendo da data em que você estiver acessando, o podcast ainda não esteja pronto, mas aguarde por mais informações.
Não esqueça de deixar seu comentário aqui mesmo neste artigo do blog, você não precisa realizar nenhum cadastro! Qualquer dúvidas e mais informações basta entrar em contato. Obrigado pela sua atenção.