Ajax com jQuery – $.get, $.post e $.ajax

Tenho visto muita gente com dúvida em quando usar $.get, $.post e $.ajax (funções Ajax com jQuery) e por isso tentarei explicar cada uma dessas funções da forma mais simples possível para que não haja mais dúvidas. O primeiro passo é saber diferenciar GET de POST:

GET: O método GET é utilizado para capturar valores de variáveis que são enviados ao servidor via Query_String, a qual é concatenada com a url do site. Os dados são lidos com uso da coleção Request.QueryString. O número e tamanho dos valores de campos são limitados.

POST: O método POST é utilizado para capturar valores de variáveis enviadas ao servidor. Os dados são lidos com uso da coleção Request.Form. O número e tamanho dos valores de campos são ilimitados. VANTAGEM: transmite arquivos do disco rígido do cliente ao servidor (upload de arquivo).

Agora podemos dar continuidade. Basicamente a diferença entre os métodos $.get e $.post são as mesmas descritas acima. Ambas são requisições HTTP e tem a mesma funcionalidade, porém nenhuma delas admite callback para erros e acertos, diferente da função $.ajax.

Sintaxe: $.get ou $.post(url, [callback], [tipo]).
Para explicar cada parâmetro dessa sintaxe, vamos ver um exemplo simples. Digamos que você criou um formulário de cadastro de clientes com os campos, nome, cpf e telefone. Com esses dados em mãos, iremos efetuar o cadastro via Ajax utilizando a sintaxe apresentada anteriormente. Vou utilizar o $.post no exemplo.

Obs: Nesse exemplo eu parto do princípio de que quem está lendo tem um conhecimento razoável em javaScript e jQuery e utilizarei o php para recebimento das informações, mas você pode utilizar qualquer linguagem. Não faz parte do escopo desse post o tratamento dos dados recebidos pelo php. Se você possui um pequeno conhecimento e deseja aprofundar mais seus conhecimentos, fica a dica de 2 bons livros do Maujor: jQuery, a biblioteca do programador e Ajax com Jquery.

$.get e $.post:

$.post('cadastroCliente.php', {
    nome: $('#nome').val(),
    cpf: $('#cpf').val(),
    telefone: $('#telefone').val()}, function(resposta){
      //Tratamento dos dados de retorno
    }, "html"
};

Linha a linha
1 – Passamos a url para onde vamos enviar os arquivos digitados pelo usuário.
2, 3 e 4- Data. Aqui colocamos os campos recebidos pela nossa função, no caso desse exemplo utilizei o jQuery para resgatar os dados digitados nos inputs com o $(“#dadosDoCampo”).val() , que equivale ao document.getElementById do JavaScript.
5- Callback. Aqui efetuamos o tratamento do retorno de nossa solicitação que, como dito anteriormente, não entra no escopo desse post. Mas observe que ao final da linha 4 efetuamos a chamada de uma function passando “resposta” como parâmetro. Esse parâmetro pode ser qualquer palavra que melhor represente o callback. Ex: Se o retorno for um xml, você pode colocar function(xml).
6- Tipo de dado que está sendo enviado, pode ser xml, html, script, json, jsonp ou text.

var params = $('form').serialize();
$.ajax({
	//Tipo do envio das informações GET ou POST
	type: 'post',
	//url para onde será enviada as informações digitadas
	url: 'cadastroCliente.php',
	/*
	* Parâmetros que serão carregados para a url selecionada (via POST).
	* o form serialize passa de uma só vez todas as informações que estão
	* dentro do formulário. Facilita, mas pode atrapalhar quando não for
	* aplicado adequadamente a sua aplicação
	*/
	data: params,
	beforeSend: function(){
		/*
		* Ação que será executada após o envio, no caso, chamei um gif
		* loading para dar a impressão de carregamento na página
		*/
		$('#loading').fadeIn(); },
	//function(data) vide item 4 em $.get $.post
	success: function(data){
		//Tratamento dos dados de retorno.
	},
	//Se acontecer algum erro é executada essa função
	error: function(erro){
		$('#loading').fadeOut();
		$('#erroCadastro').fadeIn();
	}
});

E aqui termina a primeira etapa. Alguma dúvida? Deixe um recado que prometo responder o mais rápido possível!

[]´s Fernando Valente

Fonte: iMastersFórum e Site do Maujor