ajax-com-jquery.js

//Já usamos window.onload várias vezes, talvez agora possamos usar
//um recurso de jQuery para cumprir uma função parecida
//farei um post explicando a diferença entre window.onload
//e $(document).ready

$(document).ready(function () {
  	//estamos usando um dos grandes facilitadores do framework
	//a capacidade de selecionar elementos com seletores css
	//aqui seria a mesma coisa do que fazer document.getElementById...
	//No entanto, o retorno da chamada $('#button-ajax') é um 'objeto jQuery'
	//que tem todos os métodos e propriedades explicados na API

	//O operador '$' parece estranho agora, mas olhando com atenção
	//estamos passando uma string como parâmetro num objeto e depois
	//acessando o método 'on' deste.
	//daria no mesmo se usássemos jQuery('#button-ajax').on...
	//o método 'on' recebe a string 'click' e uma função de callback
	//Não se preocupe se não entender isso agora, ainda usaremos bastante
	//esse recurso


	$('#button-ajax').on('click', function () {
		//passamos esse calback no 'click' do botão
		//$.ajax é o método que faz a requisição ajax para o servidor
		//vê-se que ajax é um método do objeto '$'.
		//Esse método recebe um objeto {} com parâmetros
		//type, url, dataType, sucess e error. Você consegue enxergar essa estrutura?

		//type é definido como 'GET'
		//url é 'ajax-sem-jquery-backend.php', ou seja, a URL onde faremos a requisição
		//dataType é o tipo de dado que esperamos receber. Segundo a API, temos 
		//(xml, json, script, or html).
		//No exemplo sem jQuery não vimos esse recurso, mas ele está disponível nativamente
		//basta mudar uma linha do código do exemplo #25
		//Fica mais simples lidar com objetos json quando estamos trafegando dados,
		//mas poderemos usar esse recurso para carregar outros elementos html dinamicamente
		//Não se preocupe, teremos um post sobre isso também ;)

		//Estamos passando uma função de callback em 'sucess'. E ela será chamada
		//quando a requisição tiver sido bem-sucedida
		//você já deve saber para que serve o 'error'. Você pode aproveitá-lo
		//para imprimir um aviso para o usuário 'houve um erro nos seus dados, tente novamente'
		//ou algo assim. Agora estamos vendo como os Callbacks são importantes

		$.ajax({
		        type: 'GET',
		        url: 'ajax-sem-jquery-backend.php',
		        dataType: 'json',   
		        success: function(data){
		        	console.log(data);

	        	//se 'data' existe e a propriedade 'numeroAleatorio' também

	            	if (data && data.numeroAleatorio) { 
	            	//vamos fazer um 'append' na div #wrapper
	            	//veja que usamos jQuery para selecionar esta div
	            	//vamos fazer append concatenando com ', '

	            		$('#wrapper').append(data.numeroAleatorio + ', ');
	            	}
	        },
	        error: function (data) {
	        	console.log('error', data);
	        }

    		});
	});
});