jQuery oferece bastante funcionalidades Ajax
que podem facilitar a tarefa de enviar e fazer requisições assíncronas
no servidor. O método mais simples de jQuery para carregar conteúdo
através de Ajax é o load(). Falaremos sobre 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 primeiro exemplo:
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>Como podem ver, sua utilização é bem simples, mas existem alguns
macetes. Por 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 verificar 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';
}
?>Na grande maioria da vezes iremos utilizar o método load() para
retornar todo o conteúdo da requisição, mas 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:
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>Fico por aqui. Aguardo os comentários.
*
Esse tutorial foi escrito a partir do original: Ajax con jQuery: el método load().
De 0 a 10, o quanto você recomendaria este artigo para um amigo?