Blog do Penha: Ajax com jQuery

terça-feira, 12 de maio de 2009

Ajax com jQuery - Método load()

Enviado para você por Penha através do Google Reader:

Ajax com jQuery - Método load()

via Pinceladas da Web - XHTML, CSS, JavaScript e WebStandards de Pedro Rogério em 11/05/09

jQuery oferece bastante funcionalidades Ajax que podem facilitar a tarefa de enviar e fazer requisições asíncronas no servidor. O método mais simples de jQuery para carregar conteúdo através de Ajax é o load(). Esse post tratará de forma simples este comando para mostrar as diferentes formas de uso.

Sintaxe

 load(url,parametros,callback)

Inicia uma requisição Ajax a URL solicitada com parâmetros opcionais. Você pode especificar uma opção de callback, que pode ser chamada quando a requisição está completa.

Argumentos

url: A URL que é solicitada a requisição.
parâmetros: Um objeto cuja propriedades são serializadas em uma série de parâmetros codificados corretamente e que se passam a requisição. Se utilizado, deve-se especificar se a requisição utiliza o método POST, caso contrário, se omitido, a requisição utiliza o método GET.
callback: Uma função chamada após a solicitação já ter sido processada.

Vamos ao 1º exemplo:

 $("#conteudo").load("arquivo.html");

Carregaria o conteúdo do arquivo.html dentro da div "#conteúdo". Um exemplo um pouco mais elaborado e completo poderia ser o seguinte:

 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Ajax com jQuery</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { 	$("input[type=button]").click(function(event) { 		$("#conteudo").load('arquivo.html',aviso()); 	}); }); function aviso(){ 	alert('O conteúdo será carregado agora!'); } </script> </head> <body>     <p><input type="button" value="Carregar conteúdo" /></p>     <div id="conteudo"></div> </body> </html>

Vejam o exemplo

Como podem ver, sua utilização é muito simples, mas existem alguns macetes. Po exemplo, quando o argumento "parâmetros" é especificado a requisição se faz sob o método HTTP POST, caso contrário, a requisição se faz de modo GET. Se quiser realizar uma requisição GET com os parâmetros, você pode incluí-la na URL. Mas neste caso você deve se assegurar de que a URL está devidamente codificada.

No exemplo seguinte utilizamos o valor do atributo "value" de três botões input para passar a um arquivo .php a ação que desejamos executar. O código que efetuaria a requisição Ajax no arquivo .php seria esse:

 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Ajax com jQuery</title> <style type="text/css"> 	#box {border:1px solid #ccc; padding:5px} </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { 	$("input[type=button]").click(function(event) { 		var acao = $(this).attr("value"); 		$("#box").load('requisicao.php',{acc:acao}); 	}); }); </script> </head> <body>     <p><input type="button" value="Editar" /></p>     <p><input type="button" value="Novo" /></p>     <p><input type="button" value="Deletar" /></p>     <div id="box"></div> </body> </html>

Já o arquivo requisicao.php se encarregaria de veriifcar os parâmetros via POST e retornar as ações pertinentes:

 < ?php if($_POST['acc']=='Editar'){ 	// Acoes relacionadas a edicao 	echo 'A ação selecionada é editar'; }elseif($_POST['acc']=='Novo'){ 	// Acoes de criacao 	echo 'A ação solicitada é criar'; }else{ 	// Acao para deletar 	echo 'A ação solicitada é deletar'; } ?>

Vejam o exemplo

Na grande maioria da vezes iremos utilizar o método load() para retornar todo o conteúdo da requisição, mas as vezes pode ocorrer de você querer filtrar essa resposta. jQuery permite a você especificar um seletor na URL para filtrar os elementos que irão ser retornados. Por exemplo:

 $('#box').load('meu_arquivo.html #conteudo')

Tudo que estiver dentro da div #conteudo no arquivo meu_arquivo.html será carregado dentro da div #box. O exemplo seguinte se encarrega de carregar todos os links que estão dentro do arquivo links.html:

 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Ajax com jQuery</title> <style type="text/css"> 	#box {border:1px solid #ccc; padding:5px} 	a {display:block} </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { 	$("input[type=button]").click(function(event) { 		$("#box").load('links.html a'); 	}); }); </script> </head> <body> 	<p><input type="button" value="Carregar conteúdo" /></p>     <div id="box"></div> </body> </html>

E o arquivo links.html seria da seguinte forma

 <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum sed diam nonumy eirmod tempor invidunt ut labor. Stet clita kasd gubergren consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua</p> <ul>     <li><a href="http://www.pinceladasdaweb.com.br/blog/">Pinceladas da Web</a></li>     <li><a href="http://www.cssnolanche.com.br">CSS no Lanche</a></li>     <li><a href="http://www.cssnolanche.com.br/uploads/html5/">Exemplo de página em HTML5</a></li>     <li><a href="http://twitter.com/pinceladasdaweb">Siga-me no Twitter</a></li> </ul>

Vejam o exemplo

Esse tutorial foi escrito a partir do original: Ajax con jQuery: el método load().