E ae galera? Tudo certo?
Conforme o prometido na semana passada hoje o tutorial vai falar sobre carregar conteudo utilizando o Ajax. Para isso iremos utilizar a biblioteca Jquery.
Antes de tudo vale o esclarecimento para quem ainda não conhece esses dois termos:
Ajax – Asynchronous JavaScript and XML.
O AJAX não é uma nova linguagem de programação, mas uma nova maneira de usar padrões existentes, e ele consiste em trocar dados com um servidor, e atualizar partes de uma página web sem recarregar a página inteira.
Jquery – é uma biblioteca JavaScript. Simples assim!
Agora que todos estão devidamente apresentados vamos programar um pouco!
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
O método load funciona da seguinte forma:
$(objeto).load(url, dados, retorno);
Parâmetros
Os parâmetros são:
URL – A url que será carregada na requisição.
Dados – Aqui podemos enviar valores (devidamente serializados) para a próxima página. Por padrão o envio é feito via GET.
RETORNO – Após executar a requisição é possível definir uma função. Ex: alert() ou algo do tipo.
Carregando todo o conteúdo de uma página
Para carregar o conteúdo de uma página o código é simples de tudo:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Ajax com Jquery - Exemplo 1</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
// Garante que o código será executado após o DOM ter sido carregado
$(document).ready(function(e) {
// Método load carrega o conteudo da página indicada dentro da div 'conteudo-carregado' e em seguida usamos a função para chamar um alert informando
$("#conteudo-carregado").load("exemplo_2.html",function(){alert('Conteúdo carregado.')});
});
</script>
</head>
<body>
<div id="conteudo-carregado">
</div>
</body>
</html>
O Conteúdo da página exemplo_2.html será todo carregado dentro da div.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Ajax com Jquery - Exemplo 1 - Página 2</title>
</head>
<body>
Página 2
<div id="especifica">
Página 2 - Plus
</div>
</body>
</html>
O Retorno será executado tendo sucesso ou não, porém o conteúdo só será exibido caso a requisição tenha sido bem sucedida.
Carregando conteúdo específico de uma página
Podemos utilizar a função load() para carregar apenas o conteúdo de uma área específica da outra página.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Ajax com Jquery - Exemplo 2</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
// Garante que o código será executado após o DOM ter sido carregado
$(document).ready(function(e) {
// Método load carrega o conteudo da página indicada dentro da div 'conteudo-carregado'<br>
// Porém dessa vez utilizamos o espaço e o nome da div da outra página que deve ser carregada<br>
// Assim apenas o conteúdo da div #especifica será exibida na div 'conteudo-carregado'
$("#conteudo-carregado").load("exemplo_2.html #especifica",function(){alert('Conteúdo carregado.')});
});
</script>
</head>
<body>
<div id="conteudo-carregado">
</div>
</body>
</html>
Nesse caso utilizamos a mesma página exemplo_2.html porém informamos que o conteúdo carregado deve ser o HTML da div ‘especifica’.
Viram só? Simples e fácil! O AJAX no JQuery ainda fornece outros métodos mais específicos que iremos abordar aqui em outros tutoriais. Espero que vocês tenham gostado!
Qualquer dúvida, crítica ou sugestão fiquem a vontade para deixar seus comentários!
Até a próxima!
