Ajax com Jquery – Tutorial

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!

Felipe Do E. Santo

Fundador do Hardcódigo, Desenvolvedor Web, Professor, amante de café, usuário do Firefox OS, Gamer e Youtuber nas horas vagas.

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *