20out

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

FILED IN Ajax | jQuery 53 Comentários

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

, , , ,

18set

XMLHttpRequest

FILED IN Ajax | Rapidinhas Sem comentários

Post curto e grosso!

=)

Instanciando XMLHttpRequest para todos os Browsers:

function startAjax(){
	var ajax = false;

	if(window.XMLHttpRequest){
		ajax = new XMLHttpRequest();
	}else if(window.ActiveXObject){
			ajax = new ActiveXObject("Msxml12.XMLHTTP");
			if(!ajax){
				//Compatibilidade com IE5 e 6
				ajax = new ActiveXObject("Microsoft.XMLHTTP");
			}
	}else{
	    alert("O navegador que você está usando não da suporte a essa aplicação!");
	}

	return ajax;

}

Enjoy!

[]´s

Continue Reading

, , , ,

10abr

O que é Ajax?

FILED IN Ajax Sem comentários

Esse será o primeiro de muitos artigos referente ao Ajax, mas antes de colocar a mão na massa, digamos assim, precisamos entender o que é e para que serve.

Ajax é a sigla para “Asynchronous Javascript and XML”. Isso significa que, por Ajax, você pode receber a resposta do servidor sem que seja preciso recarregar a página. Se ainda não ficou muito claro, entre no google e repare que quando você começa a digitar algo, o google mostra uma pequena janela abaixo do campo que você esta escrevendo com algumas dicas sobre o assunto desejado. Essa janela, nada mais é do que uma consulta com o banco de dados e retorno imediato sem recarregar o site todo. O intuito disso é tornar as páginas mais amigáveis e interativas para o usuário.

É fundamental entender que AJAX não é uma única tecnologia, são realmente várias tecnologias conhecidas trabalhando juntas, cada uma fazendo sua parte, oferecendo novas funcionalidades. Depois dessa pequena introdução, uma dica de leitura é o tutorial “Ajax – Visão Conseitual”, que você pode encontrar no Portal Java, ou clicando aqui.

TOPO